Google Chrome Printing Page Breaks
I’m trying to get google chrome to do page breaks. I’ve been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?
It appears that this has relatively recently (February 2014) been discussed (on an old 2005 bug ticket) on the webkit bug tracker bugs.webkit.org/show_bug.cgi?id=5097
15 Answers 15
I’ve used the following approach successfully in all major browsers including Chrome:
div.page This is Page 1
This is Page 2
This is Page 3
This is a simplified example. In the real code, each page div contains many more elements.
@Mike Thanks for answering the problem for me. Not sure why a br doesn’t work and a div does, but nonetheless an easy change.
According to spec break-after and break-before apply only to block-level elements, table row groups, table rows (but see prose) : drafts.csswg.org/css-break-3/#break-between – that means no floats or any fancy positioning tricks.
This worked for me ONLY if the div.page CSS was in an inline style tag with media set to «print». In other words it does not work inside a @media print element in my global style sheet.
Actually one detail is missing from the answer that is selected as accepted (from Phil Ross).
it DOES work in Chrome, and the solution is really silly!!
Both the parent and the element onto which you want to control page-breaking must be declared as:
page-break-before page-break-after page-break-inside However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)
PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick. However, they do seem to respect:
-webkit-region-break-inside: avoid; so i guess we have to add that now.
It depends on the version of WebKit used if it works or not in Chrome. You yourself said it does not work in Safari 5.1.7, so I don’t think it’s silly at all. The version of WK in what they tested might be different from what you tested.
That page doesn’t work in Chrome 26.0.1410.65, I get 3 pages and the last one only has one word on it). I also tried making sure both the element I want to apply the rule to and its parent have position:relative on my own page, but it still won’t add the page break when printing. So is this a feature that comes and goes in Chrome?
You’re right. it doesn’t seem to work in recent versions of chrome; however, you can replace it with: -webkit-region-break-inside: avoid; (see this one: jsfiddle.net/QCvA5/22/show)
@Peter Any updates here? I posted an SO question with bounty trying to fix a situation I have using page-break-inside . Any help?
This worked for me with one oddity — it only works if I put the style inline, and not in the seperate css file. I’m using it on an h7 element. Chrome version is 38.0.2125.111 m. Grade
I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.
I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday 😉
Just another note: IE7 can’t acknowledge page break settings without an explicit height on the previous block element:
Likely because floating an element takes it out of the document flow in the same way absolutely positioning it does. Elements with position:absolute won’t work with page-break-*.
Also: there shouldn’t be any floating or absolute positioned elements among all parents of the element with page break style. I had bootstrap «col-xs-12» parent, when I explicitly set «float: none» to it, the page break began to work!
I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.
Hopefully this helps somebody out there.
Note that any parent element with certain overflow properties can cause this issues. I just added the rule * < overflow-x: visible >.
I’m having this problem myself — my page breaks work in every browser but Chrome — and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)
Apparently Chrome doesn’t honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil’s example puts the second and third headline on the same page:
div.page This is Page 1
This is Page 2
This is, sadly, still Page 2
Can I force a page break in HTML printing?
I’m making a HTML report that is going to be printable, and it has «sections» that should start in a new page. Is there any way to put something in the HTML/CSS that will signal to the browser that it needs to force a page break (start a new page) at that point? I don’t need this to work in every browser out there, I think I can tell people to use a specific set of browsers in order to print this.
14 Answers 14
Add a CSS class called «pagebreak» (or «pb»), like so:
@media print < .pagebreak < page-break-before: always; >/* page-break-after works, as well */ > Then add an empty DIV tag (or any block element that generates a box) where you want the page break.
It won’t show up on the page, but will break up the page when printing.
P.S. Perhaps this only applies when using -after (and also what else you might be doing with other s on the page), but I found that I had to augment the CSS class as follows:
But like all good things in CSS, this doesn’t always work consistently across the board, so test the living daylights out of it, lest you have angry users wondering why your site prints piles of extra blank pages!
According to MDN, page-break-after «applies to block elements that generate a box,» so using an empty element won’t work. It’s a better idea to apply it to a piece of your content. See developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
@nullability: Good catch. I had mainly used this at my old job in a WebBrowser control in WinForms which used IE, the gold standard of following standards.
For some reason, when using this trick in Chrome, 1 row of pixels of next page was leaking into previous one (noticeable when using background-color). I fixed it by using .pagebreak < min-height: 1px; page-break-before: always; >
First page (scroll down to see the second page) Second page
Print (to see the result) Just add this where you need the page to go to the next one (the text «page 1» will be on page 1 and the text «page 2» will be on the second page).
First page (this will be on page n.1) Second page (This will be on page n.2) This is because the previous value always (of the deprecated page-break-* CSS properties) is now equivalent to the value page (in the now recommended properties break-before and break-after ) ; see: developer.mozilla.org/en-US/docs/Web/CSS/…
Just wanted to put an update. page-break-after is a legacy property now.
This property has been replaced by the break-after property.
Update: Based on recent comments.
For compatibility reasons, the legacy page-break-after property should be treated by browsers as an alias of break-after. This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:
page-break-after break-after auto auto left left right right avoid avoid always page Note: The always value of page-break-* was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to page, rather than the always value in the Level 4 spec.
What is the CSS code to do page breaks for printing web pages?
What is the CSS code to do a page break when printing? Or better yet, is there some print CSS framework like JQuery is to web page DOM manipulation? I need to print web pages with control like Adobe PDF, but without using a third party plug-in. Prints need to be precise, like controlling what pixels hit the top of each page, (if we want to put our logo on each page header for example. Any ideas?
6 Answers 6
You can try to force a page break using the page-break-before or page-break-after properties.
Pixel-perfect print control will be very, very hard to achieve. For example, each browser adds a footer and header section that you cannot influence and only the user can turn off. Browsers disregard background images, and tend to set margins as they see fit.
For a rundown on how to style HTML for print, this Smashing Magazine article may provide some pointers: Printing the Web: Solutions and Techniques
Browser support for printing is very weak, at best. For example, getting something like a page header image to work is going to be pretty rough; I don’t know of any browsers that even support the «@page» CSS declaration, let alone the running content features of CSS3.
The FlyingSaucer PDF toolkit for Java, on the other hand, does a remarkable job of transforming XHTML into PDFs (especially given that it’s free). We use it with Freemarker to template the «page», but it handles images, running header/footer text, even intra-document links.
I’m not sure what server language you’re using but I’ve had great success with wkhtmltopdf and wicked_pdf for Ruby on Rails.
You cannot get pixel-level print precision from a browser. Your only option is PDF or similar 3rd party document format. However, if you just want to ensure a logo is on the top of a page vs the bottom of the next, you can use the page-break-before, page-break-after properties
The w3schools.com has a handy CSS Reference. Since most of us cannot remember many uncommon css properties, hope this is useful for you.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Advanced CSS Printing — Using CSS Page Breaks
I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen — he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this.
Needless to say, I’ve learned quite a few tricks to making a website print properly. I’ve already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.
There are numerous spots that are good for page breaks:
- Between page sections (h2 or h3 tags, depending on your site format)
- Between the end of an article and subsequent comments / trackbacks
- Between longs blocks of content
Luckily, using page breaks in CSS is quite easy.
The CSS
The all and print medias should be addressed:
The first declaration ensures that the page-break is never seen visually. while the second ensures that the page break is seen by the printer.
The HTML
Creating a simple DIV element with the page-break class is how you implement the page break.
The Usage
There you have it. The importance of page breaks in the web should not be understated, as many users still print content regularly. Also note that your content may be printed into PDF format and shared.