Firefox: Avoid splitting images and lines of text when printing

firefoxprinting

When printing from Firefox (on any OS, I think), the browser splits images and sometimes even lines of text across page breaks — the top part of an image shows up at the bottom of page n, and the rest appears at the top of page n + 1.

Is there any way to get Firefox to keep images on individual pages while printing?

Best Answer

From CSS Discuss Incutio

TLDR: Page breaks are badly supported by browsers (probably with good reason), so it's mostly up to the page designer to deal with this. For the rest there is little you can do, except for copy-pasting it to a document perhaps. And C-Net agrees.

Page breaks

Since the "print margins" are not under your control as Web author, you can't guarantee how much of a Web document will be printed on each page and hence where the page breaks will be. It will vary according to the user's browser, browser settings and printer. And the user's base font size and stationery size are also outside your control. You will want to use CSS to influence (not control) the position of page breaks. CSS2.1 Chapter 13 Paged Media is essential reading. Note that, in this Chapter, CSS2.1 drops some features in CSS2 that browsers have never implemented.

Support for the page-break properties (such as page-break-inside) is poor, even in the latest browsers, the major exception being Opera (Opera 5 onwards) whose support is very good:

Worse, browsers are liable to break pages in clearly unacceptable places (see also next paragraph). For example, I have found cases where browsers will break an image across pages. Testing on my various sites suggests that Opera's page-break handling, whilst not perfect, is distinctly more robust than that of Firefox or IE.

Eric's article (see below) mentions a bug in Gecko (Mozilla) -based browsers regarding the printing of floated elements. This bug apparently has yet to be fixed [at July 2009] result in floated elements being chopped at the end of the printed page and sometimes in only one page of a document being printed [Note 2]. I've found a similar float-chopping problem with older versions of Opera (e.g. O7.21). A different bug has been reported in IE where, if the top of a floated element happens to coincide with a page break, the floated element doesn't print at all [acknowledgement: Rennan Rieke].

Suggested strategy for page breaks

The best policy (certainly, until browsers improve) is to give them a break (ha!) by allowing them as much discretion as you can in their choice of break points. They have particular problems with side-by-side elements, such as positioned <div>s; floats; and tables with two or more columns. Suitable strategies therefore include making positioned <div>s static; unfloating floats; and breaking up tables used for layout into a series of shorter tables [Note 1]. Even though the page-break properties are poorly supported, don't over-constrain the browsers: use the "avoid" value with as light a touch as you can.

Browsers really don't like floats when it comes to printing (see previous section). The workaround is to unfloat floated elements (float: none and perhaps width: auto as well). If you do risk having a floated element when printing, it may print across a page break (the top of a floated element is anchored to the current line). Depending on the nature of the floated material, this may be acceptable behaviour. If not, only Opera will enable you to suppress such a split.

If you must have some content printed on only one page, e.g. a form, your best chance is to make it significantly less than one page long, so that you have a good margin (sic) of error. Regarding stationery size, you might choose to assume the international (ISO) standard A4 size (for an international audience) or US Letter size (for an exclusively US audience) although there's no guarantee of what size users are using. But ask yourself how you would respond if you had produced a one-page form using a word processor and a user who was vision-impaired asked for a large-print version. As always with Web design and CSS, life will be much simpler if you don't try to fight with the user by insisting on pixel perfection or guaranteed page breaks. Fluid design applies on paper as well as on screen.

Related Question