All Ping

Although we are currently leaving in a digital era where everything can be accessed easily, there are many people who still prefer reading long text on paper. There is a chance that a number of your users will print out your content to read offline.

The capability of styling or porting content from web to print has existed for years. We can do this with the @media rule within the stylesheet, as follows:

          view plaincopy to clipboardprint

1. @media print { 
2. /* Style rules */ 
3. } 

There are several properties that allow us to format our web content when porting to print, and we are going to discuss one of it: the Page Break.

What It Does?

If you have been working with word processors like Microsoft Word and Pages, you should be familiar with the Page Break menu; this allows you to break your content to the next page.

This module does that; allowing you to control on how your web content should be split, page after page.

Using Page Break

For demonstration purposes, I have created a dummy page that I’m going to print. Here, I have found an unstrategic break, as you can see below.

It would look better if the heading and that orphan starts at the next page.

To do this, we can use the page-break-after property and set the value to always to force the following element to “break” to the next page.

view plaincopy to clipboardprint?

1. .page-break { 
2. page-break-after: always; 
3. } 

Then, you can either create a new element with the class in between the elements, or assign class in the preceding element like so.

view plain copy to clipboard  print?

1. <p class="page-break">With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p> 
2. 
   
3. <h3>The phone to travel With</h3> 
4. <p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p> 

Now, you should find the heading and the orphan at the following page.

Widows And Orphans

The method above can be tedious if you have very large amounts of content. So, instead of forcing the content to break, it would be better to set the minimum threshold of the widows and orphans.

In typography, widows and orphans are the unfortunate names used to refer to the left over words or short lines that seem to have been abandoned by the rest of the paragraph on another page.

By using the orphans and widows property, we can specify the threshold. Given the following code example, we can specify at least three lines remain at the bottom or at the beginning of paragraphs where page breaks occur.

view plain copy to clipboard print?

1. p { 
2. orphans: 3; 
3. widows: 3; 
4. } 

Further Resource

We have discussed the basic of controlling page break in print media for your web content, and we hope that this encourages you to consider print styles in your website so your content will look good both on screen and on paper.

For more, you can head over to the following reference.

• CSS Paged Media Module Level 3 — W3C