CSS styles for printing that I forgot about

Original author: Manuel Matuzovic
  • Transfer
image


Aaron Gustafson recently posted an Indiegogo tweet that said that printing their pages with order information yields something completely indecent. And away we go.


This tweet hooked me. I suddenly realized that I couldn’t even remember when I optimized web pages for printing or at least checked how they were displayed on a printer.

The main focus during web development is focused on electronic versions of sites. Pages have to be checked in many browsers, tested on different window sizes ... Is it up to printers here. Or maybe I forgot about print styles because I rarely make paper copies of pages myself. Be that as it may, I felt that the situation urgently needed to be corrected.

The printed version of the web page has the same right to exist as the electronic one. And, if we strive to make our materials as accessible as possible, do not neglect paper media. In addition, no assumptions should be made.about users and their behavior. People still print web pages on printers. Just imagine articles or blog posts, pages with recipes, contact details, directions, or listings. Sooner or later, someone will certainly try to print something from what you posted on the Internet.

Here is what Haydon Pickering, author of Inclusive Design Patterns, says: “I haven’t been using home printers for a long time. The point here is that I get the feeling that they break down about ten minutes after you start printing. But I am not everything. ”

If now you understand that, like me, you did not pay enough attention to print styles, I hope my story will serve you well and help you quickly refresh your memory. And if you've never optimized web pages for printers at all, my small collection of useful CSS tricks will let you get started with such optimizations.

1. Using CSS styles for printing


The best way to connect print styles to a page is to declare a rule @mediain your main CSS file.

body {
    font-size: 18px;
}
@media print {
    /* здесь будут стили для печати */
    body {
        font-size: 28px;
    }
}

Alternatively, you can take the print styles to a separate file and include it in HTML, but with this approach, you will need an additional request when loading the page.

<linkmedia="print"href="print.css" />

2. Testing


How to evaluate the appearance of a webpage prepared for printing? It is clear to anyone that putting it out on paper after every change in style is not the best solution. Fortunately, the capabilities of browsers are quite enough for a "paperless" check of printed versions of pages.

Depending on the browser, you can export the page to PDF, use the preview function, or even debug the page directly in a web browser.

To debug print styles in Firefox, open the Developer Panel using the keyboard shortcut Shift + F2 or using the menu command Development → Development Panel . At the command line located at the bottom of the window, media emulate printenter the following:, completing the entry by pressing Enter. The active tab will act as if the media type were print for it , until you close or refresh the page.


Print emulation in Firefox

Chrome also has this feature. Open Developer Tools , for which, on MacOS, you can use the key combination CMD + Opt + I , on Windows Ctrl + Shift + I , or use the menu command Advanced Tools → Developer Tools . After that, open the rendering panel. One way to do this is to press the Esc key to display the Console panel , and then, through the menu, open the Rendering panel . In the rendering panel, set the Emulate CSS Media flag and select Print .


Chrome print emulation

More about testing print versions of web pages can be found on StackOverflow .

3. Absolute units


Absolute units of measurement are not very suitable for on-screen versions of pages, but for printing they are just what you need. The style Print is perfectly safe, in fact - is recommended to use absolute units of measurement , such as cm, mm, in, ptor pc.

section {
    margin-bottom: 2cm;
}

4. Page Properties


You can use a rule to control the properties of pages, such as their size, orientation, and margins @page. This is very useful, say, when it is necessary that all printed pages have the same margins.

@media print {
     @page {
        margin: 1cm;
    }
}

A rule @pageis part of the Paged Media Module standard , which offers many great things, such as selecting the first page to print, setting up blank pages, positioning elements at the corners of a page, and so on . It can even be used to prepare books for printing .

5. Page break management


Since printed sheets, unlike web pages, are not infinite, the contents of web pages sooner or later break off on one sheet of paper and continue on to the next. There are five properties for managing page breaks.

▍ Page break before item


If you want a certain element to always be at the top of the page, you can put a forced page break in front of it using the property page-break-before.

section {
    page-break-before: always;
}

▍ Page break after item


The property page-break-afterallows you to set the forced page break after the element. Using this property, you can also prevent breaks.

h2 {
    page-break-after: always;
}

▍ Page break inside an element


The property page-break-insidewill be very useful if you want to avoid sharing an element between two pages.

ul {
    page-break-inside: avoid;
}

▍ Top and bottom dangling lines


Sometimes there is no need to force page breaks, but you need to control the display of paragraphs at the page borders.

For example, if the last line of a paragraph does not fit on the current page, the last two lines of this paragraph will be printed on the next page. This is due to the fact that the property that it controls ( widowsthat is, the “upper hanging lines”) is set to 2 by default. This can be changed.

p {
    widows: 4;
}

If another situation arises and only one line of paragraph is placed on the current page, the entire paragraph will be printed on the next page. The property responsible for the bottom dangling lines ( orphans) is also set to 2 by default.

p {
    orphans: 3;
}

The meaning of the above code is that in order for the paragraph not to be transferred entirely to the next page, at least three lines should fit on the current page.

In order to better understand this, take a look at an example prepared using CodePen . And here is the debug version of the same example, it is more convenient to test it.

It should be noted that not all properties and their values ​​are universal, so CSS print styles should be checked in different browsers.

6. Reset styles


- such as preparing a Web page to print, it makes sense to throw some styles, background-color, box-shadow, color.

Here is a snippet from the HTML5 Boilerplate print style sheet :

*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
    background: transparent !important;
    color: #000!important;
    box-shadow: none !important;
    text-shadow: none !important;
}

By the way, CSS styles for printing are one of the few exceptions where the directive !importantis absolutely normal;)

7. Removing unnecessary content


In order not to waste ink, you should remove from the printed version of the page everything that is unnecessary, such as huge beautiful slides, ads, navigation tools on the site and other things like that. This can be done by setting the property displayto the value noneof unnecessary elements. It is possible that you consider it correct to show only the main content of the page, and hide everything else:

body > *:not(main) {
    display: none;
}

8. Displaying link addresses


Links, in the form in which they are usually found on web pages, are completely useless when printed, unless the reader of the paper version of the document knows where they lead.

In order to display the addresses of links after their textual representations, it is enough to use the following style:

a[href]:after {
    content: " ("attr(href) ")";
}

Of course, with this approach, “decrypted” will be a lot of superfluous. For example, relative links, absolute links on the same site where the printed page is located, links with anchors and so on. In order not to clog the printed page, it would be better to use something like this design:

a[href^="http"]:not([href*="mywebsite.com"]):after {
    content: " ("attr(href) ")";
}

It looks crazy, of course. Therefore, I will explain the meaning of this rule in the usual language: "Display the attribute value hrefnext to each link that has an attribute that begins with http, but does not contain mywebsite.com."

9. Explanation of abbreviations


Abbreviations in the text should be placed in the tag <abbr>, and their decryption should be included in the attribute title. If you arrange the abbreviations in this way, their values ​​are very simple to show on the printed page:

abbr[title]:after {
    content: " ("attr(title) ")";
}

10. Forced background printing


Typically, browsers, forming a page for printing, do not display the background color and background images, unless explicitly specified. However, sometimes all this is necessary to print. Here, a non-standardized property will help us print-color-adjust, which allows you to override, for some browsers, the default settings.

header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

11. Media Inquiries


If you write media queries something like the one shown below, keep in mind that CSS rules in such queries will not affect the print version of the page.

@mediascreen and(min-width: 48em){
    /* только для экрана */ 
}

Why is this so? The thing is that CSS rules only apply if the value min-widthis equal 48em, and if media-typeit is screen. If you get rid of the keyword in this media query screen, it will be limited only by the value min-width.

@media (min-width: 48em) {
    /* все типы средств отображения информации */ 
}

12. Card listing


Current versions of Firefox and Chrome can print maps, but, for example, Safari cannot. What to do when printing cards? One of the universal options is to use, instead of dynamic, static cards .

.map {
    width: 400px;
    height: 300px;
    background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true');
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

13. QR codes


Printing QR codes containing important links can significantly improve the usability of paper versions of web pages. Here is the material in The Smashing Magazine, where you can find helpful tips on this topic. One of them is to include in the printed pages their addresses in the form of QR codes. As a result, the user, in order to open the page with which the printout was made in the browser, does not have to type its full address on the keyboard.

14. About printing non-optimized pages


While dealing with the topic of printing web pages, I found an excellent tool that allows you to conveniently prepare non-optimized pages for printing to the printer. Using Printliminator, you can remove unnecessary elements from the page by simply clicking on them. Here is a demo of working with this tool on YouTube, and here is a project page on Github.

15. Gutenberg


If you like frameworks, you might like Gutenberg , which makes it a little easier to prepare web pages for printing.

16. Hartija


And here is another printable CSS framework. It is called Hartija , created by Vladimir Carrer .

Summary


If you want to see some of what we talked about in business , here is a link to the project in CodePen with examples (and here is its debug version).

Optimizing web pages for printing is not so difficult. Perhaps the most important thing is not to forget about it. I hope that now there will be a little more sites that are friends with printers.
Tags:

Also popular now: