Looking for web design?

In order to provide the clearest possible communication for our visitors, we now have separate websites showcasing our software and web design services.

How to add page breaks to HTML

Please note: This article pertains to our LVSYS CMS websites. In order to provide the clearest communication for our customers, we have separated our company website into two parts. One is for software, the other is for web design. If you have any questions at all, please feel free to give us a call at (503) 408-4890 or send us a message to help@buildableworks.com.

We often get the question about creating HTML that sends proper page breaks to the printer.

(This method works in Chrome, Firefox, and IE and has been tested as of July 2017. Try printing this page!)

Example HTML:

... content in page 1 ...
<p style="page-break-after: always;">&nbsp;</p>
<p style="page-break-before: always;">&nbsp;</p>
... content in page 2 ...

For example, if you try printing this page (e.g. with Chrome print preview), the second and third lines below should be on separate pages. If you inspect these elements, the CSS is inline:

 

Page break below this line
This should be printed on a lonely page
This should also be printed on a separate page
 

Next. there are a few very important considerations:

  1. It's done via CSS (inline or in a stylesheet) by adding 'page-break-after: always' to a paragraph at the bottom of your page (above where you intend to break). Optionally, you may need to also add 'page-break-before:always' to the paragraph or heading (or other block-level element) at the top of the next page.
  2. If you use a stylesheet, use a print media query to wrap the CSS for printers. For example, in your CSS, add a section like this: @media print { /* styles for printers */}
  3. If you use a stylesheet, make sure it is included without a default media attribute. Lots of older sites would add media="screen" to stylesheet inclusions, rendering any CSS media query in those stylesheets useless.
  4. Kills the floats! If any parent container is floated, page breaks won't work. In your CSS for printers, disable all the floats of parent containers by setting 'float: none !important;' on the parent containers of the content you wish to print with page breaks (important - we do it on this site). 
  5. Use on block elements. Make sure the elements containing the 'page-break-*' rules are blocks, not inlines (ex: DIV, P, OL, etc. but not SPAN or A)
  6. You may need to use both 'page-break-after: always' and 'page-break-before:always' (buggy Chrome...). In the example above, we showcased multiple options which work.
  7. And finally: Printing with Chrome is finicky. 

That's it! If this does not work for you, just let us know.

/11

"They were never afraid to show me their code, so I could always see what they were working on."

Adolf Valdez
Precision Analytical Inc.

"I found the best thing I liked about them is their communication. We were never left in the dark, like with other development companies."

Adolf Valdez
Precision Analytical Inc.

"Everybody here is more excited about the look and feel and being able to finally get live data. With the old system, we had to export text files and it always took a day. We're all excited to have something new, fresh, and with more functionality. The reports are more dynamic, and we can actually scale them."

Adolf Valdez
Precision Analytical Inc.

"Buildable Custom Software has people on our calls that are dedicated to our project, which is something we have not experienced before. Unlike past vendors that have experienced a lot of staff turnover, we have had the same team."

Josh Jones
CityCounty Insurance Services

"We haven't found many other vendors that can understand our unique business needs as well as Buildable Custom Software."

Josh Jones
CityCounty Insurance Services

"We have a rules engine that has hundreds of lines of code to develop these rates, and Buildable Custom Software condensed that down to seven or eight lines of code, and it works great."

Josh Jones
CityCounty Insurance Services

"The project manager puts the contract together and outlines what we're doing each sprint. She does an excellent job of organizing everything we need."

Josh Jones
CityCounty Insurance Services

"Buildable Custom Software has done a great job of understanding what our needs are."

Josh Jones
CityCounty Insurance Services

"They blew us out of the water with their proposal. They featured the latest and greatest software, and we were impressed by their past work."

Josh Jones
CityCounty Insurance Services

Web Design and Web Development by Buildable