Today you will find a note from a series of design tips. And not graphic design, but interface design. I think many of you at least once printed a page of the site directly from the browser. The sequence is usually this: press Ctrl + P, wait a minute, then guess to insert paper into the printer, press Ctrl + P again, wonder why it was necessary to print so many banners, counters and the main menu. All you needed was a map and contacts.

Some designers solve this issue like this: for each page, a separate print version is created. Most often, this is a document into which banners, menus and other page elements that are unnecessary for printing are not inserted.

Why make a separate version

If the page is large, then it is possible that it does not fit on A4 and will be printed only up to half, and the rest will be on the second sheet. By removing extra blocks before printing, we will save space on paper, ink in the printer and nerve cells.

In addition, different screen resolutions of users will not allow us to know exactly how this or that element will be printed. Therefore, I would advise you to remove everything unnecessary and be sure that all printouts will be the same.

How to specify what to print?

Usually thanks to object classes and identifiers we can hide almost any element of the page. In order not to hide the excess, I would recommend hiding the navigation header, site logo, sidebar (if any) and footer (bottom of the page).

Thus, what is in the content area will go to print. For all elements that you want to hide when printing, assign your own class, for example "no-print".

We can also specify that images in the banners folder should not be sent for printing. This is done with a mask. To do this, you need to specify in CSS:

img (display: none !important; )

With this code, we will hide all banners that will appear anywhere on the page. In the same way, you need to make the rest of the elements invisible.

No-print ( display: none !important; )

Application in practice

In order for the file print.css processed only at the time of sending for printing, you need to specify it in thus:

Print this page

A few years ago, I was pleasantly surprised to learn of the existence of such a feature. It is convenient and quite simple, so I recommend you to use it.

Often on sites you can find printable version of a page. Many people think that this is something built into the browser itself or that it is very easy to do. In fact, this is not true at all. The print version is a normal page which you need on one's own do.

You can see the printable version of this article. In fact, what should be displayed there? Title of the article, section, category, author, text itself and date. All this is displayed on this page. Do you need a menu, a search form, various blocks? I don't think that's why they don't.

Also make sure the width of the print version is does not exceed 650px, otherwise the browser may cut the edges.

So, you already understood that print version You need to create your own, displaying exactly what the user needs. Now about how to do it.

There is 2 options: create a separate page and create a separate stylesheet. The first option, I think, is clear. Create another page with print version and on the main page you give a link to this printed version. The user follows it and through "File"->"Print" he will print it out.

The second option involves creating a separate style sheet where you hide all unnecessary blocks (via display: none;) and set the appropriate dimensions for the output content. Next, such a style file is connected as follows:

Now if the user wants to print this page, it will not print what he sees, but what is written in print.css. In fact, the user sees the page in one way, and the printer in a completely different way.

That's the way a printable version is being created any page of the site.

This may surprise some, but web pages are printed quite often.
This note shows Useful CSS tricks to prepare the page for printing.

Preliminary changes in styles

It is advisable to break CSS styles into separate files depending on microformats:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld">

This will help avoid confusion in the future and save you time. It is worth considering that print fonts should be specified in points (pt), inches (in), picas (pc) or centimeters/millimeters (cm/mm).

Set background color, set padding

We remove the indents, set the page to a white background color and black font (for contrast), set the margins to 0.5 inches. We also remove the float property from floating elements so that when printing a web page, the blocks do not move out.

Removing extra styles

When printing, many elements of the site are superfluous: navigation, advertising, banners. We remove them with display:none.
I got something similar:

Working with hyperlinks

We remove the underlining from the links, we will not need them for printing. We also display the URL (in brackets next to the link text).

a( border : 0 ; text-decoration : none ; )
a img( border : 0 )

CSS Pagination

Property page-break-before allows you to set the location of the page break when printing.
If we are too lazy, and all styles are in one css file, then the code will look like this:

@media all
{
.nextpage ( display : none ; )
}

@media print
{
.nextpage ( display : block ; page-break-before : always ; )
}

We get a class that will not be visible on the page, but will fulfill its purpose when printed.
Usage example:

<html xmlns= "http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
<title > page-break-before example</title>
<styletype="text/css">
@media print(
.newpage(page-break-before: always;)
}
</style>
</head>
<body >
<h1 > CSS page breaks</h1>
<p > Try to print this page (and eat more of these soft French rolls, and drink tea).</p>
<p > This is the 1st paragraph and will be on the first page when printed.</p>
<div class="newpage">
<p > This is the 2nd paragraph, it will be on the second page when printed.</p>
<div class="newpage">
<p > This is the 3rd paragraph and will be on page 3 when printed. Everything is so simple.</p>
</body>
</html>

CSS properties: widows, orphans

Property widows Specifies the minimum number of lines of text that appear on the next page when a document is printed.
Example:

Another css property - orphans- sets the minimum number of lines that can remain at the bottom of the page without a page break.
If the widows value conflicts with the orphans value, then widows will take precedence.
Usage example:

@media print(
p ( widows : 3 ; orphans : 3 ; )
}

Summing up:

As a result, I got something like this:

body( margin : 0.5in ; font-family : times)
* ( background : #fff !important; color : #000 !important; float : none !important; width : auto !important; height : auto !important; )
#context ( margin : 0 !important; padding : 0 )
#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer ( display : none )
#zag h1 span( font-size : small; display : block )
a( border : 0 ; text-decoration : none ; )
a img( border : 0 )
a:after ( content : " (" attr(href) ") " ; font-size : 90% ; )
a[ href^= "/" ] :after ( content : " (http://www.site" attr(href) ") " ; )

This style sheet is quite simple and, in my opinion, requires more detailed elaboration of individual elements, but the result on print is very noticeable compared to a regular style sheet. Of course, the CSS file will be quite different depending on the design, but the general principles outlined in the article apply to almost any project.

In which he pointed out that their detail order pages were unusable in printed form.

I was stunned when I saw this tweet - I realized that it's been a long time since I optimized the styles for print and I didn't even think about checking them.

Maybe it's because I spend a lot of time resizing my browser window to ensure my sites work great in all sizes and shapes, or maybe because I rarely print pages for myself. Whatever the reason, I completely forgot about print styles and that's bad.

Optimizing web pages for printing is important because by printing pages we make the site as accessible as possible, regardless of the environment. We must not make assumptions about our users and their behavior. People keep printing web pages. Think articles, blog posts, recipes, contact information, map sites, or real estate listings. Someone is bound to try to print one of your pages sometime.

I abandoned home printers a long time ago, as I always thought they broke after 10 minutes of use. But not everyone is like me. - Haydon Pickering (Inclusive Design Patterns)

If you find yourself in a similar position, this post will help you get a quick refresher. If you haven't optimized your pages for print, the following tips will help you get started.

1. Connecting styles for printing

The best way to include print styles is to declare the @media directive in your CSS.

Body ( font-size: 18px; ) @media print ( /* print styles go here */ body ( font-size: 28px; ) )

Alternatively, you can include the styles in the HTML, but this will require an additional HTTP request.

2. Testing

You don't have to print a page every time you make a small style change. Depending on the browser, you can export the page to PDF, use print preview, or debug directly in the browser.

To debug printing styles in Firefox, open the developer toolbar (Shift + F2 or Tools > Web Developer > Developer Toolbar), type media emulate print in the input box, and press enter . The active tab will act as if the media type is print until reloaded.

Emulating Print Styles in Firefox

In Chrome, open the developer tools (CMD + Opt + I (macOS) or Ctrl + Shift + I (Windows) or menu View > Developer > Developer Tools) and display the console, open the render panel and select Print from the Emulate CSS Media menu.

Emulating Print Styles in Chrome

3. Absolute units of measurement

Absolute units are bad on screen but great for printing. It is perfectly safe to use them in print styles, and it is even recommended to use units such as cm , mm , in , pt , or pc .

Section ( margin-bottom: 2cm; )

4. Specific rules for pages

You can set properties specific to the printed page, such as page size, orientation, and padding, using the @page directive. This is very handy if you want all pages to have certain indents.

@media print ( @page ( margin: 1cm; ) )

The @page directive is part of the Paged Media Module specification, which has great things like the ability to select the first page to print or blank pages, position elements in the corner of the page, and more. This can even be used to print books.

5. Manage page breaks

Since printed pages, unlike web pages, are not endless, content will break between pages. We have 5 properties to control how this happens.

Page break before element.

If we want an element to always be at the beginning of the page, we can enforce a page break using the page-break-before rule.

Section ( page-break-before: always; )

Page break after element.

The page-break-after rule allows us to force or disable page breaks after an element.

H2 ( page-break-after: always; )

Page break within an element

This property is useful if you need to avoid page breaks inside an element.

Ul ( page-break-inside: avoid; )

Widows and orphans (hanging strings)

Sometimes you don't need control over the page break, but control over how many lines will be displayed on the current page and how many on the next page is important. For example, if the last line of a paragraph does not fit on the current page, it will wrap to the next page along with the penultimate one. This is because the corresponding widows property is 2 by default. We can change it.

P ( widows: 4; )

If we run into the other side of this problem and we only have the first line of a paragraph on the current page, then the entire paragraph will start on the next page. The orphans property is responsible for this and its default value is 2.

P ( orphans: 3; )

This code means that at least 3 lines must fit on the current page so that the paragraph does not wrap to the next.

Not all of these properties and values ​​work in every browser, you should check print styles in different browsers.

6. Reset styles

It makes sense to reset some styles like background-color , box-shadow , and color for printing.

*, *: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; )

Print styles are one of the few exceptions where using the !important keyword is fine.

7. Removing optional content

To avoid wasting ink, you should remove unnecessary items such as typography, ads, navigation, and so on. with the display: none property.

You can basically show only the main content and hide everything else:

Body > *:not(main) ( display: none; )

8. Printing Link Addresses

A:after ( content: " (" attr(href) ")"; )

Of course, everything will be shown this way: relative links, absolute links, anchors, and so on. The following option will work better:

A:not():after ( content: " (" attr(href) ")"; )

Looks crazy, I know. The way these lines work is to display the value of the href attribute next to any link that has one if it starts with http but doesn't point to our mywebsite.com .

9. Printing transcripts of abbreviations

Abbreviations must be wrapped in an element with a description in the title attribute. It makes sense to print it out.

Abbr:after ( content: " (" attr(title) ")"; )

10. Print background

Usually browsers don't print background color and background images unless you explicitly tell them to. There is a non-standardized print-color-adjust property that allows you to override the default settings in some browsers.

Header ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )

11. Media Queries

If you write media queries like in the following example, be aware that the styles in this media query will not be applied when printed.

@media screen and (min-width: 48em) ( /* screen only */ )

You will ask why? Because CSS rules only apply when both conditions are met: min-width is 48em , media-type is screen . If we get rid of the screen keyword, then the media query will only consider the min-width value.

@media (min-width: 48em) ( /* all media types */ )

12. Card printing

Current versions of Firefox and Chrome are capable of printing maps, but Safari is not. Some services provide static maps that can be printed instead of the original.

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

Addon 2: Gutenberg

If you're looking for a framework, then you might like Gutenberg, which makes page optimization a little easier.

Addon 3: Hartija

This is another print style framework from

It would seem that it is difficult to create a page for printing? We simply create the same document with text but without any design and link to it from a regular page. But search engines have introduced a filter for duplicate content, and webmasters have to hide printable pages from indexing. In addition, site visitors are also not very convenient, because they first need to go to a copy of the page they need, in which there are no design elements, and then click on the "Print" button.

This is where CSS can come to the rescue, which not only reduces the amount of work for webmasters and makes it easier for visitors to use the site, but also allows you to avoid penalties from search engines for duplicate content.

Page structure

So, let's first use HTML to create the structure of our document. For the example, I decided to use a tabular layout to make it easier to understand:

Navigation Main page Articles Contacts

Article title This page can be printed. Only the text of the article will be printed.

Your ad could be here

As you can see, we have a table with three cells that are arranged horizontally. Everything is like a regular site: navigation on the left, content in the middle, and ad blocks or news on the right. Each cell has been assigned its own id. For the left side it's leftcolumn, for the right it's rightcolumn, and for the middle content cell it's content.

Adding CSS

Now, using CSS, you need to tell the browser which styles it should use to display page elements on the screen and which ones it should use when printing. Create style.css and write the following there:

@media screen ( body ( background-color: #0B73BD; font-family: tahoma; color: #FFFFFF; ) table ( width: 600px; ) #leftcolumn ( width: 140px; vertical-align: top; font-size: 15px ; ) #rightcolumn ( width: 110px; vertical-align: top; font-size: 15px; ) #content ( background-color: #32AADB; padding: 5px; font-size: 15px; ) a ( color: #FFFF00; ) ) @media print ( body ( background-color: #FFFFFF; font-family: tahoma; color: #000000; ) #content ( background-color: #FFFFFF; padding: 5px; font-size: 15px; color: # 000000; width: 600px; ) #leftcolumn ( display: none; ) #rightcolumn ( display: none; ) )

The first block of CSS code describes how the page elements should be displayed in the browser. The block was taken in additional curly braces before which we added @media screen. This tells the browser that these styles need to be applied for display:

This is what the page looks like when viewed in a browser

The second block describes the display of the same page elements as the first, but in this case in the form in which the document will look when printed and is indicated by the @media print parameter. Since we want only useful content to be printed, we disable the left (#leftcolumn) and right (#rightcolumn) cells from being displayed by setting them to display: none.

This is what the printed version of the site page looks like

Separate style files

It is not necessary to combine everything in one style file. Instead, you can use two style files and, when connecting them to the pages of the site, tell the browser which style file to use when printing and which one for displaying on the screen. The first one (for screen output) is defined by the media="screen" parameter, and the second one will be used for printing and is defined by the media="print" parameter:

Styles for printing must be described after all the others, otherwise Opera will print the block of content along with the color background that is intended for output to the browser, and not the white color that we chose for printing.

Also, when printing, we strictly reduce the width of the content block to 600px, because at 100% width, the printer "cuts off" a small strip of text on the right side of the page. Also pay attention to the fact that when printing from Opera, the indentation along the edges of the sheet is slightly less than in Internet Explorer and the lines of text on the sheet of paper are wider.

Now you no longer need to create additional pages for printing. You can inform users about the ability to print a page, for example, using a link with the text "print", when clicked, a tooltip will be displayed with a message about the ability to directly print the current page without a design.

Copying the article is prohibited.