Inserting page breaks for printing or PDF via HTML

So we have a web invoice which is also converted into PDF. When line items section becomes too tall (so many items), the generated PDF from HTML (via wkhtmltopdf) breaks some of the lines in the summary section and is pushed to the next page. It would be nice if the whole summary section is automatically pushed to the next page when the section before it is too tall.


Our invoice layout is just the typical invoice design with header section, recipient section, line items and summary section which also includes the footer. Most of the sections are fixed except for the line items which can be one more more items and can grow tall that the whole invoice won’t fit one page.


My immediate reaction was to think of a way to count the line items and insert page break dynamically when the number of line items is enough to insert the page break before the summary section. However, that is too messy and is prone to error.

A quick search leads me to this forum post from SitePoint. From the post, I learned that I can use CSS to keep a certain section intact and prevent page break from within.

Therefore, I set the summary section to prevent page breaks within inside using this style:

.invoice-summary {
  page-break-inside: avoid;

To test, I used the browser’s print preview and as well as the generated PDF for the invoice, and indeed, it inserts the page break before the invoice summary, pushing the whole summary section to the next page.

That’s it!

Posted in CSS, Web Development | Tagged , , | Leave a comment

HTML to PDF – Using custom web fonts

We currently have a working HTML to PDF converter in our project usually used to generate PDF invoices. However, a new requirement requires using a font not usually found on the stock fonts. At this point, I realized that our … Continue reading

Posted in CSS, Web Development | Tagged , , | Leave a comment

MySQL 5.7+ STRICT mode

If you have a project that is so old and so broken but you have to maintain anyway, but you are developing locally using MySQL 5.7+, just run this on your MySQL console to remind yourself how poorly coded your … Continue reading

Posted in MySQL | Leave a comment

AWS Lambda with API Gateway Integration

In this post, I will go through the process of using an AWS Lambda function served via AWS API Gateway HTTPS endpoint. My existing NodeJS API performs one task and is not called too often which is a perfect candidate … Continue reading

Posted in AWS | Tagged , , | Leave a comment

Rails – Healthy Migration Habbits – a repost

We are using a gem that encrypts database table columns. So far, it is working as intended, however, we encountered several issues where a column or a model attribute is missing, or simply not working. It turns out that we … Continue reading

Posted in Rails | Tagged , | Leave a comment

Redirect All Requests to HTTPS with Nginx

Assuming that you already have a working HTTPS configuration for your website and you decided to redirect all requests to HTTPS, here is a simple nginx configuration for that. This assumes that you don’t want to serve HTTP anymore. This … Continue reading

Posted in Linux | Tagged | Leave a comment

Creating Self-Signed Certificate for Web Servers Like Nginx

I’m not sure if I have written this before, but here is how we create a self-signed certificate (without the passphrase) to be used by web servers like Apache or nginx. Gist – creating self-signed certificate. This one works for … Continue reading

Posted in Linux | Tagged , , | Leave a comment

Angular 4.x – Add a 404 page

For a frontend application like Angular, the 404 page is served by the frontend application rather than the web server. To make this work, we should always return the index.html of our angular application for all applications, except for asset … Continue reading

Posted in Angular | Tagged , , | Leave a comment

Angular 4.x and Beyond – Twitter Bootstrap Nav Bar Not Working in Mobile

Yesterday, I have deployed my personal site into production which is built with Angular 4.x using an old template (Twitter Bootstrap 2.x). I just recently noticed that the navigation menu is not expanding when viewed in smaller screens. It is … Continue reading

Posted in Angular | Tagged , | Leave a comment

Angular 4.x – Integrate a jQuery Plugin

I’m using a very old twitter bootstrap template which is using jQuery Colorbox plugin to handle image preview modal like lightbox did. It took me more or less 4 hours to figure it out given I’m fairly new to Angular … Continue reading

Posted in Angular | Tagged , | Leave a comment