Add print styles to components

[NickColley]

When simulating print mode on components most don't have the necessary adjustments.

Edit:
Spike that was done: https://github.com/alphagov/govuk-frontend/compare/spike-print-styles

[NickColley]

@36degrees I think our users such as GOV.UK Publishing will run into this pretty soon.

[kr8n3r]

Trello ticket: https://trello.com/c/mlBn52Wg/1395-design-print-styles-for-components

[andysellick]

I'm currently looking at print stylesheets for components using GOV.UK Frontend on GOV.UK, so this would be great 👍

[injms]

✋ me too - I've put together something to make the accordion component readable when printed out, but it's got some not-so-nice !importants.

[frankieroberto]

👍 on this.

When developing the accordion component, we had an interesting debate about whether, when printing a page, all of the accordions should be "opened" or not. My conclusion was that it probably made sense to keep them in the same state as the page, as the user may only want to print some of the sections (and if they really wanted to print them all then that’s fairly easy to do via the "Open all" button).

[crosslandwa]

The HMRC PAYE (classic) service has recently switched to using the design system GOV UK. The application offers users the ability to view-and-print previous years submissions - we use the check answers pattern to "play back" submitted details and provide a (JS) print button to open a print dialogue (note screenshots show test data):

Page screenshot:

Printing in chrome:

We've provided a form for users to provide feedback, and had several comments about printing. Here are some quotes:

• Can you make reports printer friendly please. The large bold letters are using plenty of ink!
• The plld forms printing option put them altogether and each employer should be on a different page to make it easy to print off for each employee withe payment amount on separate page for employer information. Very clunky and not very user friendly
• The print option for P11d etc does not work properly - you get everything, including the web page headings and even the print button! Please can we print just the forms.
• It would be great to get a really easy print out of the previous year - on one page too (it's enormously wasteful of paper).
• P11D forms are not in a fit format to give to employees.
• The printed P11D looks very amateurish to give employees when they've been used to an 'official looking' P11D in the past.

(we have more feedback available on request)

It would be great if the design system could provide more print styling that address some of these issues, though I appreciate finding one approach that fits all potential printing needs isn't trivial

In the meantime, we've loaded the following additional styles on our "view and print" pages - i've added comments to detail what each workaround does:

@media print {
  /* hide GOV UK components */
  .govuk-phase-banner, .govuk-footer, .govuk-button, .govuk-header__content {
    display: none;
  }

  /* hide relative links - gov uk print styles only look to hide http/https links */
  .govuk-link[href]:after {
    content: none;
  }

  /* hide bespoke language switcher component */
  .portal-rsa-language-switcher {
    display: none;
  }

  /* forces printing at A3 size, so that desktop rather than mobile layout is used */
  @page {
    size: 297mm 420mm;
    margin: 18mm;
  }
}

We're also considering applying the following overrides to the summary-list component:

@media print {
  .govuk-summary-list__key {
    width: 70% !important;
    padding-bottom: 0 !important;
  }

  .govuk-summary-list__value {
    width: 30% !important;
    padding-bottom: 0 !important;
  }
}

For a summary-list with a single "column" of values, fixing the govuk-summary-list__key width at 30% causes the table to take more vertical space then it could when printing:

It's possible that having more control over the key/value widths of the summary-list component would help us here (rather than having specific print styles...)

[KB55]

In addition to the above comment, we are now releasing the additional overrides to the summary list component for printing in the HMRC PAYE service:

 @media print {
  .govuk-summary-list__key {
    width: 70% !important;
    padding-bottom: 0 !important;
  }

  .govuk-summary-list__value {
    width: 30% !important;
    padding-bottom: 0 !important;
  }
}

We consulted with our business owners and they confirmed that changing the column widths provided preferable styling for printing

[NickColley]

I have also received reports from a team on the X-GOV slack that our print styles have increased the amount of pages that are now printed out.

[tombye]

I'm plugging Design System into GOV.UK Notify at the moment. The majority of our pages contain form controls (which will soon use components) so this would benefit us as well.

[36degrees]

As raised by a user on Slack, the lack of print styles means that the panel component prints with light grey text on white:

I believe this is the browser’s ‘best effort’ to make it printable – by default, browsers will remove background colours from things when printing them, and because the text would then be white-on-white it’s making the text grey.

[terrysimpson99]

Further to the issue mentioned by 36degrees on 21 Apr. That's quite a low contrast. Has it passed a test for accessibility at A or AA? If not, we'll have to stop using it.

[terrysimpson99]

I'm delighted with what's been done relating to contrast of panel text when printed. I'd like to raise a couple of other issues:

1. Please can body text default to 14 point (in the printed paper version)? I think the current default is 12 point. We increased it from 12 to 14 point to reduce requests for large print or other assistance in accordance with https://www.gov.uk/government/publications/inclusive-communication/accessible-communication-formats and https://www.rnib.org.uk/sites/default/files/Top_Tips_Creating_accessible_print_documents.pdf

2. Please can the vertical space used by the panel be reduced (in the printed paper version)? We sometimes have content in addition the panel and our users end up printing more than one page. A panel that consumes less vertical space will reduce the number of pages that get printed.

[CharlotteDowns]

Use of sans serif font in print styles

Sans serif font is set as default in print stylesheets to avoid issues that occur when printing on some operating systems and print drivers. These issues were impossible to diagnose so the decision was made to leave it to the local fonts on the computers as they’re most likely to work.

[NickColley]

Would you be up for me working on this as a contribution?

[36degrees]

Would you be up for me working on this as a contribution?

Thanks for the offer @NickColley! We're slightly concerned that this might turn out to be quite a lot of work, especially for our designers who would likely need to be involved in reviewing the changes.

However, we'd be happy to trial something if we can keep the scope small, perhaps focusing on a single component to start with?

What do you think?