Although we live in digital age where everything can be easily accessible, there are still many people who prefer to read long text from paper. There is a possibility that some users will print out the text from your site in order to read it away from the computer.
The ability to render content suitable for printing has been around for a long time. We can do this by using the @media rule in the stylesheet, like this:
@media print ( /* Style rules */ )
There are several properties that let you style the content of a web page to make it print-ready, and we'll cover one of them: page breaks.
What does it do?If you have worked with text editors, such as Microsoft Word and Pages, you should be familiar with the page break menu, which allows you to move text to the next page.
This module does the same thing, allowing you to control how the content of a web page is transferred, page by page.
Using a page breakAs an example, we have created a demo page that we are going to print. We found a failed transfer on it, as you can see below.
It will look better if the header and footer start on the next page.
To do this, we use the page-break-after property and set it to always to force the next element to break to the next page.
Page-break ( page-break-after : always ; )
You can then create a new element with a class between the elements, or assign a class to the previous element in this way.
With the Eraser feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t.
The phone to travel WithS Translator is going to be a great tool for your travels as ...
Now the header and bottom hanging line will start on the next page.
The above method can be tedious if you have a lot of text. So instead of forcing the content to go to the next page, it would be better to set a minimum threshold for the top and bottom dangling lines.
In typographic practice, top and bottom lines refer to remaining words and short lines that appear disconnected from the rest of a paragraph on another page.
Using the properties orphans (lower hanging string) and widows (upper hanging string) we can set the minimum threshold. In the example below, we specify that at least three lines remain at the bottom or beginning of the paragraph where the page break occurs.
P (orphans: 3; widows: 3;)
Additional sourcesWe've covered the basics of using page breaks in print for website copy, and we hope it inspires you to think about print styles for your website so that your content looks good on both screen and paper.
Translation – Duty room
I have a project that requires printing an HTML table with many rows.
My problem is how the table is printed across multiple pages. It sometimes cuts a line in half, making it unreadable because one half is at the edge of the page and the rest is printed at the top of the next page.
The only plausible solution I can think of is to use complex DIVs instead of a table and force page breaks if necessary... but before going through all the changes I thought I might ask here earlier.
Use these CSS properties:
Page-break-after page-break-before
For example:
@media print ( table (page-break-after:always) ) ....
None of the answers here worked for me in Chrome. AAverin on GitHub created a useful Javascript for this and it worked for me:
Just add js to your code and add a splitForPrint class to the table and it will neatly split the table into multiple pages and add a table header to each page.
Note: When using a page break: always for a tag, it creates a page break after the last bit of the table, creating a completely blank page every time! To fix this, simply change it to page-break-after: auto. It will break correctly and won't create an extra blank page.
@media print ( table ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....
The accepted answer didn't work for me in all browsers, but following the css did work for me:
Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )
The html structure was:
In my case there were some additional problems with thead tr , but this solved the original problem of table row containment.
Due to header issues I ended up with:
#theTable td * ( page-break-inside:avoid; )
This didn't stop the rows from breaking; only the contents of each cell.
I ended up with @vicenteherrera's approach, with some tweaks (which may be bootstrap 3).
Basically; we can't break tr s or td s because they are not block level elements. So we insert div s into each one and apply our page-break-* rules to the divs. Second, we add some padding to the top of each of these divs to compensate for any styling artifacts.
@media print ( /* avoid cutting tr"s in half */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Wrap each tr and td"s content within a div // (todo: add logic so we only do this when printing) $("table tbody th, table tbody td").wrapInner("" ); ))
Corrections and adjustments to the additions were necessary to compensate for some jitter that was introduced (from the bootstrap, I assume). I'm not sure if I'm presenting a new solution from the other answers to this question, but maybe it will help someone.
I recently solved this problem with a good solution.
AvoidBreak ( border: 2px solid; page-break-inside:avoid; )
Function Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print();
Works like a charm!
I tested many solutions and none worked well.
So I tried a little trick and it works:
tfoot with style: position: fixed; bottom: 0px; position: fixed; bottom: 0px; is placed at the bottom of the last page, but if the footer is too high, it overlaps the table content.
tfoot only with: display: table-footer-group; doesn't overlap, but isn't at the bottom of the last page...
Let's put two tfoot:
TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; )
One reserves a seat on last pages, the second one is in your personal footer.
Test table ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )
| notes |
| x |
| x |
| x |
The main attention during web development is focused on electronic versions of sites. Pages have to be checked in multiple browsers, tested on different sizes windows... Are there 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 version. And, if we strive to make our materials as accessible as possible, we should not neglect paper media. Additionally, you should not make assumptions about users and their behavior. People still print out web pages on printers. Just think of articles or blog posts, pages with recipes, contact information, directions or listings. Sooner or later, someone will certainly try to print something you posted on the Internet.
Here’s what Haydon Pickering, author of the book “Inclusive Design Patterns,” says about this: “I haven’t used home printers for a long time. The point here is that I get the feeling that they break about ten minutes after you start printing. But I’m not everything.”
If you now realize that, like me, you haven't been paying 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, my small collection of useful CSS tricks will get you started.
1. Using CSS Print Styles The best way to incorporate print styles into your page is to declare an @media rule in your main CSS file.Body ( font-size: 18px; ) @media print ( /* print styles will go here */ body ( font-size: 28px; ) )
Alternatively, you can put the printing styles into a separate file and include it in HTML, but with this approach you will need an additional request when loading the page.
2. Testing How to evaluate appearance web page prepared for printing? It is clear to anyone that putting it on paper after every change in style is not The best decision. Fortunately, browser capabilities are quite sufficient for “paperless” checking of printed versions of pages.
Depending on your browser, you can export the page to PDF, use the preview feature, or even debug the page directly in your web browser.
To debug print styles in Firefox, open the Developer Panel using the keyboard shortcut Shift + F2 or by executing the menu command Develop → Developer Panel. Enter in command line located at the bottom of the window, the following: media emulate print , completing the entry by pressing Enter . The active tab will act as if its media type were print until you close or refresh the page.
Print emulation in Firefox
Chrome also has a similar feature. Open Developer Tools, for which, in MacOS, you can use the key combination CMD + Opt + I, in Windows – Ctrl + Shift + I, or execute the menu command Additional tools → Developer tools. After that, open the render panel. One way to do this is to press Esc to bring up the Console panel and then use the menu to open the Rendering panel. In the rendering panel, set the Emulate CSS Media flag and select Print.
You can read more about testing printed versions of web pages on StackOverflow.
3. Absolute units of measurement Absolute units of measurement are not very suitable for screen versions of pages, but for printing they are just what you need. In printing styles it is completely safe, moreover, it is recommended to use absolute units of measurement, like cm, mm, in, pt, or pc.Section ( margin-bottom: 2cm; )
4. Page Properties You can use the @page rule to control page properties, such as their size, orientation, and margins. This comes in very handy, say, when you need all printed pages to have the same margins.@media print ( @page ( margin: 1cm; ) )
The @page rule is part of the Paged Media Module standard, which offers a lot of cool things like selecting the first page to print, customizing blank pages, positioning elements in the corners of the page and . It can even be used to prepare books for printing.
Section ( page-break-before: always; )
▍Page break after an element The page-break-after property allows you to set a forced page break after an element. Using this property, you can also prevent breaking.H2 ( page-break-after: always; )
▍Break a page inside an element The page-break-inside property comes in very handy if you need to avoid splitting an element between two pages.Ul ( page-break-inside: avoid; )
▍Top and Bottom Dangling Lines Sometimes you don't need to force page breaks, but you want to control the output of paragraphs at page boundaries.For example, if the last line of a paragraph is current page does not fit, the last two lines of this paragraph will be printed on the next page. This is because the property that controls this (widows, i.e. “top hanging rows”) is set to 2 by default. This can be changed.
P ( widows: 4; )
If another situation occurs and only one line of a paragraph fits on the current page, the entire paragraph will be printed on the next page. The property responsible for the lower hanging lines (orphans) is also set to 2 by default.
P(orphans: 3;)
The point of the above code is that in order for the entire paragraph to not wrap onto the next page, at least three lines must fit on the current page.
To understand this better, take a look at the example prepared using CodePen. And here is a debug version of the same example, it is more convenient to test.
*, *: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!important directive is absolutely normal ;)
Body > *:not(main) ( display: none; )
8. Displaying Link Addresses Links, as 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 link addresses after their text representations, just use the following style:
A:after ( content: " (" attr(href) ")"; )
Of course, with this approach, a lot of unnecessary things will be “deciphered.” 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 clutter the printed page, it would be better to use something like this:
A:not():after ( content: " (" attr(href) ")"; )
It looks crazy, of course. So I'll explain the meaning of this rule in plain English: "Display the value of the href attribute next to each link that has an attribute that starts with http but does not contain mywebsite.com."
Abbr:after ( content: " (" attr(title) ")"; )
10. Forced printing of the background Usually browsers, when creating a page for printing, do not display background color And background images, unless they are explicitly told to do so. However, sometimes all this needs to be printed. The non-standardized print-color-adjust property will help us here, which allows you to override the default settings for some browsers.Header ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )
11. Media Queries If you write media queries like the following, keep in mind that the CSS rules in such queries will not affect the printed version of the page.@media screen and (min-width: 48em) ( /* screen only */ )
Why is this so? The thing is that CSS rules are applied only if the min-width value is 48em and if the media-type is screen . If you get rid of this media query from keyword screen , then it will be limited only by the min-width value.
@media (min-width: 48em) ( /* all media types */ )
12. Printing of maps Current Firefox versions and Chrome can print maps, but, for example, Safari cannot do this. What to do when printing cards? One of the universal options is to use static maps instead of dynamic ones.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's a piece from The Smashing Magazine where you can find useful tips about this theme. One of them is to include their addresses in the form of QR codes on printed pages. As a result, the user, in order to open the page from which the printout was made in the browser, will not have to type its full address on the keyboard.14. About printing non-optimized pages While working on the topic of printing web pages, I discovered an excellent tool that allows you to conveniently prepare non-optimized pages for printing. Using PrintliminatorA page block consists of the page area where the content is located and the margin area surrounding the page area. The @page rule is used to change some CSS properties when printing a document. You can only change the margins of the margin element, and you can also set page breaks at the specified location.
@page ( margin: 2in; )
You can set individual document fields inside the @page rule, such as margin-top , margin-right , margin-bottom , margin-left :
2. Page breaksYou can control page breaks using the page-break-before , page-break-after and page-break-inside properties. These properties apply to block elements, for which the position property is set to relative or static .
| Values: | |
| auto | |
| always | Always adds a page break before the element. |
| avoid | Prevents placing a break before the element, if possible. |
| left | Adds one or two page breaks before an element so that the next page is formatted as left page. The element will be printed starting from the top of the left page, i.e. on the page to the left of the spine. When printing double-sided, it will appear on the reverse side of the paper. |
| right | Adds one or two page breaks before the element. The element will be printed starting from the top of the right border. The next page will be formatted as the right page. |
| inherit |
Syntax:
@media print ( h1 (page-break-before: always;) )
| Values: | |
| auto | The default value specifies automatic page breaks. |
| always | Always adds a page break after the element. |
| avoid | Prevents adding a break after the element, if possible. |
| left | Adds one or two page breaks after an element so that the next page is formatted as the left page. The element will be printed starting from the top of the left page, i.e. on the page to the left of the spine. When printing double-sided, it will appear on the reverse side of the paper. |
| right | Adds one or two page breaks after an element so that the next page is formatted as the right page. The element will be printed starting from the top of the right border. |
| inherit | Inherits this property from the parent element. |
Syntax:
@media print ( footer (page-break-after: always;) )
The page-break-inside property tells the browser whether the page can break inside an element or not. But if the element turns out to be longer than a page, then a break is inevitable.
