Even today, there are still many people who want to print the Internet. That can have different reasons. Maybe a team wants to discuss the content of your post in the meeting. Or someone wants to read your article where he certainly has no internet reception. In order to be able to address these people, each website still requires a CSS file for printing, the so-called Print Stylesheet.
Many people still print a lot of articles today in order to read them offline. You should take this circumstance into account if you do not want to lose readers. However, there are two hurdles in the way of printing.
First: Hardly any WordPress theme today has a print style sheet. The developers of the themes do not go to the trouble, although such a pressure CSS just counts for me the good sound of developing.
Second, because there is no print style sheet, the end user using the theme will not have a print button available.
So in this post, I’ll show you how to create a Print CSS where it should be integrated into the theme and how to create a print button.
Create the optimal print stylesheet
First create an empty CSS file with a plain text or HTML editor. Call herprint.css, Copy the following into the picture:
All the CSS settings you want to make now come between the opening and closing brackets.
1 – Set page margins and font sizes
First, we set the margins of the margins to get an optimal result.
I recommend using the top setting and setting the margins to 2 cm. After that is done, the font size settings can be made. Note that the printer requires different font size units than a monitor. Therefore, Pixel, Em and Rem must be converted into Points.
- Pixels => Points
- 6px => 5pt
- 7px => 5pt
- 8px => 6pt
- 9px => 7pt
- 10px => 8pt
- 11px => 8pt
- 12px => 9pt
- 13px => 10pt
- 14px => 11pt
- 15px => 11pt
- 16px => 12pt
- 17px => 13pt
- 18px => 14pt
- 19px => 14pt
- 20px => 15pt
- 21px => 16pt
- 22px => 17pt
- 23px => 17pt
- 24px => 18pt
A font size of 12pt has proven to be optimal. Now you also have the choice of which font you want to use for printing. A good readability on a printed sheet of paper forms serif fonts, such as the Georgia.
2 – Use page breaks – Define page breaks
With the three CSS propertiespage-break-before, page-break-afterandpage-break-insideyou can determine exactly if and where a printed page is wrapped. To prevent this, for example, that images are wrapped in two parts.
- page-break-beforedetermines if and how a page break occurs before this element.
- page-break-afterin turn takes care of changes to an element
- page-break-insidetakes care of a possible change within an element, for example the pictures and graphics.
Auto is the standard of the printing element,alwayssets every time a change,avoidforbids the upheaval andleftandrightis intended for subsequent pages, which are formatted according to the left or right. Cleverly used for printing, the rules would look like this:
3 – The handling of links
Links should be clearly marked so that they stand out. Since links on a sheet of paper can not be clicked on, we need to visualize the link targets. We do this with the following quotes:
4 – Hide videos and other iframes
Displaying videos on a printed paper does not make sense. But if you just set the iframes to display: none, you’ll have ugly gaps left over. With the following code you reset the distances and hide iframes, as well as videos completely.
5 – Hide unnecessary items
Many sections of a website should not be printed. First, they do not provide any important information, and secondly, printing out these areas costs unnecessarily expensive ink or toner. Therefore, we hide all areas that are not of value.
For you, this means that you can dive into the source code of your website so that you can find the areas that should not be printed. The following things are useful to hide them:
The header, navigations, pagination, sidebar, tags and categories, comments, share buttons, and more. Here is an excerpt from the print stylesheet of my own website:
6 – Insert messages before and after the print content
Sometimes it can be very handy to be able to insert messages before and after the actual print content. With such a message, you may also want to thank the reader who printed your article. Or you can show a copyright message. Again, it is important to find the right CSS class from your content area.
The complete print style sheet
The right location: where does the print.cssdenn belong?
The following functions belong in thefunctions.phpof the theme or in a page-specific plugin.
The correct answer would be unique in the header. The following function is the right one if you want to include a developed theme in the official theme directory:
If, however, you want to provide your own theme with a print style sheet, then the type described above is not necessarily optimal. First, the CSS is loaded on all pages, not just the individual articles, second, it blocks page layout and makes your site a little slower. Therefore:
Any CSS not needed for the page layout in the visible area belongs in the footer!
In addition, it should only be loaded when the single.php is called with the individual articles. There is hardly anyone who wants to print your homepage.
Therefore we let the stylesheet load into the footer of the website.
Ease of use: create a print button
If you offer your readers a well-made print stylesheet, then it would be beneficial if you also included a button to print in your theme. The procedure is quite simple, the button can be designed with CSS the way you want it. The code on my website looks like this:
In the theme, this button can then with a simple
be called wherever he should appear.
The article was created as an extension idea to the contribution: Websites make printer-friendly and save printing costs
(The original article was published in June 2016 and has been kept up to date since then, the last update was in May 2019.)
Post picture: Magnascan / Pixabay