![\"Andreas](\"https:\/\/secure.gravatar.com\/avatar\/487450c20600a62a136fa01bbf314403?s=96&d=mm&r=g\")
<\/a><\/div>\n- \n
- <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/article>\n
- \n
- <\/li>\n
- <\/li>\n
- <\/li>\n
- <\/li>\n
- <\/li>\n
- <\/li>\n
- <\/li>\n<\/ul>\n<\/div>\n\n
E<\/span>ven today, there are still many people that want to print out the entire internet. This can have many reasons. Maybe a team seeks to discuss an article\u2019s content in a meeting. Or maybe somebody wants to read your article somewhere where they don\u2019t have an internet connection. To satisfy these people, each website requires a CSS file for printing.<\/p>\n
![\"a4-print\"](\"https:\/\/i0.wp.com\/www.noupe.com\/wp-content\/uploads\/2014\/06\/a4-print.jpg?resize=600%2C409&ssl=1\")
<\/p>\nEven today, many people print plenty of articles to read them offline. If you don\u2019t want to lose readers, you should provide options for these visitors. However, there are two hazards on the way to printing.<\/p>\n
First: today, there are barely any WordPress themes that come with a print stylesheet. The theme developers don\u2019t put an effort in that, even though, for me, developing a print CSS is common courtesy. Second: as no print stylesheet is available, the ultimate consumer that uses the theme doesn\u2019t have access to a print button.<\/p>\n
Thus, in this article, I\u2019ll show you how to create a print CSS, how it should be integrated into the theme, and how to create a print button.<\/p>\n
Creating the Optimal Print Stylesheet<\/h2>\n
First, create an empty CSS file with a pure text or HTML editor. Name it print.css<\/strong>. Then copy and paste the following into the file:<\/p>\n
\/**\n * Print stylesheet for yourwebsite.com\n* @version 1.0\n* @lastmodified 16.06.2016\n*\/\n\n@media print {\n Your notes\n}<\/pre>\nAll CSS settings go between the opening and the closing bracket.<\/p>\n
1 \u2013 Defining Side Borders and Font Sizes<\/h3>\n
First, we need to define the distances between the side edges, to receive an optimal result.<\/p>\n
\/* Setting content width, unsetting floats and margins *\/\n\/* Attention: the classes and IDs vary from theme to theme. Thus, set own classes here *\/\n#content,#page {\nwidth: 100%; \nmargin: 0; \nfloat: none;\n}\n\n\/** Setting margins *\/ \n@page { margin: 2cm }\n\n\/* Or: *\/\n@page :left {\nmargin: 1cm;\n}\n\n@page :right {\nmargin: 1cm;\n}\n\n\/* The first page of a print can be manipulated as well *\/\n@page :first {\n margin: 1cm 2cm;\n}<\/pre>\nI recommend using the above settings, and defining margins to 2 cm. After that\u2019s done, the font size settings can be chosen. Here, you should keep in mind that the printer requires different units for the font size than the monitor. Thus, you need to convert pixels, em, and rem into points.<\/p>\n
- \n
- Pixels => Points<\/li>\n
- 6px => 5pt<\/li>\n
- 7px => 5pt<\/li>\n
- 8px => 6pt<\/li>\n
- 9px => 7pt<\/li>\n
- 10px => 8pt<\/li>\n
- 11px => 8pt<\/li>\n
- 12px => 9pt<\/li>\n
- 13px => 10pt<\/li>\n
- 14px => 11pt<\/li>\n
- 15px => 11pt<\/li>\n
- 16px => 12pt<\/li>\n
- 17px => 13pt<\/li>\n
- 18px => 14pt<\/li>\n
- 19px => 14pt<\/li>\n
- 20px => 15pt<\/li>\n
- 21px => 16pt<\/li>\n
- 22px => 17pt<\/li>\n
- 23px => 17pt<\/li>\n
- 24px => 18pt<\/li>\n<\/ul>\n
A font size of 12pt has proven to be best. Now, you have the choice which font you would like to use for the print. On paper, fonts with serifs, like Georgia, are well readable.<\/p>\n
\/* Set font to 16px\/13pt, set background to white and font to black.*\/\n\/* This saves ink *\/\nbody {\nfont: 13pt Georgia, \"Times New Roman\", Times, serif;\nline-height: 1.3;\nbackground: #fff !important;\ncolor: #000;\n}\n\nh1 {\nfont-size: 24pt;\n}\n\nh2, h3, h4 {\nfont-size: 14pt;\nmargin-top: 25px;\n}<\/pre>\n2 \u2013 Using Pagebreaks \u2013\u00a0Defining Pagebreaks<\/h3>\n
The three CSS attributes\u00a0page-break-before<\/strong>,\u00a0page-break-after<\/strong>, and\u00a0page-break-inside<\/strong> allow you to decide exactly where a print page will be broken. Among other things, this will prevent images from being broken into two pieces.<\/p>\n
- \n
- page-break-before <\/strong>determines if and how a pagebreak is set before this element.<\/li>\n
- page-break-after <\/strong>takes care of breaks behind an element.<\/li>\n
- page-break-inside <\/strong>can cause a break within an element, like images or graphics, for instance.<\/li>\n<\/ul>\n
\/* The following settings are possible: *\/\npage-break-after : auto | always | avoid | left | right\npage-break-before : auto | always | avoid | left | right\npage-break-inside : auto | avoid<\/pre>\n
Auto is the print element\u2019s standard, always<\/strong> places a break every time, avoid<\/strong> prohibits the break, and left<\/strong>, and right<\/strong> are meant for continuation pages that are formatted left or right, accordingly. If applied properly, these rules would look as follows:<\/p>\n
\/* Defining all page breaks *\/\na {\n page-break-inside:avoid\n}\nblockquote {\n page-break-inside: avoid;\n}\nh1, h2, h3, h4, h5, h6 { page-break-after:avoid; \n page-break-inside:avoid }\nimg { page-break-inside:avoid; \n page-break-after:avoid; }\ntable, pre { page-break-inside:avoid }\nul, ol, dl { page-break-before:avoid }<\/pre>\n3 \u2013 The Handling of Links<\/h3>\n
Links should be highlighted so that they get noticed. As links can not be clicked on a piece of paper, we need to visualize the link targets. This is done with the following notes:<\/p>\n
\/* Displaying link color and link behaviour *\/\na:link, a:visited, a {\nbackground: transparent;\ncolor: #520;\nfont-weight: bold;\ntext-decoration: underline;\ntext-align: left;\n}\n\na {\n page-break-inside:avoid\n}\n\na[href^=http]:after {\n content:\" < \" attr(href) \"> \";\n}\n\n$a:after > img {\n content: \"\";\n}\n\narticle a[href^=\"#\"]:after {\n content: \"\";\n}\n\na:not(:local-link):after {\n content:\" < \" attr(href) \"> \";\n}<\/pre>\n4 \u2013 Hiding Videos and Other iframes<\/h3>\n
Displaying videos on a printed piece of paper doesn\u2019t make sense. However, when setting the iframes on display: none, ugly gaps remain. The following code allows you to remove the gaps and hide iframes, as well as videos entirely.<\/p>\n
\/**\n * Making intergated videos disappear, and removing the iframes' whitespace to zero. \n *\/\n.entry iframe, ins {\n display: none;\n width: 0 !important;\n height: 0 !important;\n overflow: hidden !important;\n line-height: 0pt !important;\n white-space: nowrap;\n}\n.embed-youtube, .embed-responsive {\n position: absolute;\n height: 0;\n overflow: hidden;\n}<\/pre>\n5 \u2013 Hiding Unnecessary Elements<\/h3>\n
Many areas of a website can\u2019t be printed. For one, they don\u2019t provide any relevant information, and for another, printing these areas is a waste of ink or toner. Thus, we will hide all areas that are not relevant.<\/p>\n
For you, this means that you can dive into your website\u2019s source code to find the areas that you don\u2019t want to be printed. It makes sense to hide the following things:<\/p>\n
The header, the navigations, the pagination, the sidebar, the tags, and the categories, the comments, the share buttons, and other elements.<\/p>\n
\/* Hiding unnecessary elements for the print *\/\n\n#header-widgets, nav, aside.mashsb-container, \n.sidebar, .mashshare-top, .mashshare-bottom, \n.content-ads, .make-comment, .author-bio, \n.heading, .related-posts, #decomments-form-add-comment, \n#breadcrumbs, #footer, .post-byline, .meta-single, \n.site-title img, .post-tags, .readability \n{\ndisplay: none;\n}<\/pre>\n6 \u2013 Adding Messages Before and After Printing<\/h3>\n
Sometimes, it can be very useful to be able to add messages before and after the actual print content. This type of message allows you to thank your reader for printing your article. Or you can display a copyright message. Once again, it is important to find the proper CSS class of your content area.<\/p>\n
\/* Adding custom messages before and after the content *\/\n.entry:after {\ncontent: \"\\ All Rights Reserved. (c) 2014 - 2016 \";\ncolor: #999 !important;\nfont-size: 1em;\npadding-top: 30px;\n}\n#header:before {\ncontent: \"\\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well.\";\ncolor: #777 !important;\nfont-size: 1em;\npadding-top: 30px;\ntext-align: center !important; \n}<\/pre>\nThe Complete Print Stylesheet<\/h3>\n
- page-break-after <\/strong>takes care of breaks behind an element.<\/li>\n
- page-break-before <\/strong>determines if and how a pagebreak is set before this element.<\/li>\n
![\"\"](\"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/11\/a4-print-1.jpg?w=910&ssl=1\")
<\/a>CSS: The Perfect Print Stylesheet | The JotForm Blog<\/a><\/em><\/h1>\n<\/p>\n
\n\nCSS: The Perfect Print Stylesheet<\/h1>\n
\n