Inconsistent print layout behaviour cross browser

[oscarduignan]

Description of the issue

When you print a page in chrome it looks different to when you print the same page in firefox or safari

Chrome uses the mobile breakpoint styles when printing - so grid columns become stacked vertically - however other browsers (firefox and safari) don't do this

A lot of HMRC services use a 2/3 grid area for their main content, but don't actually have anything in the remaining 1/3 of the layout

So when you print one of these in chrome, the 2/3 grid area expands to fill the whole width of the page (what they want). In firefox and safari however, the content still only takes up 2/3 with a gap on the right

For now they've patched it with this CSS to make the the print layout consistent between browsers

@media print {
    .govuk-main-wrapper > .govuk-grid-row > div[class*='govuk-grid-column-'] {
        width: 100%;
    }
}

The following screenshot shows how the print layout looks before applying this (top pdf on the right, with blue outlines added to it's layout elements) and after (bottom pdf on the right, with red outlines added to it's layout elements):

Steps to reproduce the issue

Try printing this example from the design system in chrome, then try printing it in firefox

https://design-system.service.gov.uk/styles/layout/common-two-thirds-one-third/index.html

The print layouts will be different

Actual vs expected behaviour

The team who raised this with us in HMRC expected the print layout to be consistent between browsers

Should there be anything in govuk-frontend to make the print layout consistent by default between browsers - or guidance in the documentation explaining why there can be a difference

Environment (where applicable)

N/A

• Operating system:
• Browser:
• Browser version:
• GOV.UK Frontend Version: latest version

[querkmachine]

I've seen this come up a few times. In my prior digging, this seems to purely be a function of how each browser treats printing. We don't do anything in Frontend to influence it or force one layout over another.

Chrome

Chrome seems to evaluate CSS breakpoints when determining what to print. By default, it seems to consider A4 paper to be within the 'mobile' breakpoint range, so it prints one column.

You can see this in action by going to 'More settings' in the print dialog, changing 'Scale' to 'Customised' and setting it to around 80, at which point Chrome switches to a two column view.

Paper size and margins are also taken into account: Smaller paper sizes will use single columns, larger ones will use two columns.

Safari

Safari only uses the breakpoint that's active when the print dialog is displayed. If the viewport is wide enough to show two columns, the print will be two columns. If the viewport is narrow enough to be one column, the print will be one column.

In both cases, the scaling setting influences the size of elements, but doesn't change what breakpoint is active. Paper size is not taken into account.

Firefox

Firefox is different again. It seems to always use the desktop breakpoint regardless of viewport size, paper size, or scaling settings. Presumably it's using some sort of internally hardcoded pixel value and evaluating breakpoints against that.

Thoughts

On the face of it, Chrome's methodology for this strikes me as actually being the most sensible. It's the only one here that recalculates breakpoints and reflows content based on the available space and scaling.

I would personally be hesitant for us to do much to force browsers to behave one way or another. There's no clear agreement between browser vendors over what is 'the right way', and print styles doesn't feel like something we should massively fiddle with (at risk of breaking the workflows or expectations of users who need it, e.g. low vision).

Enforcing columns widths on print would introduce issues (especially for those low vision users who may want to scale things up). Making columns always be 100% width when printing might be the best way of standardising all browsers, but I can imagine situations where this may not be the desired or expected outcome by a user.