Add print styles to components

NickColley commented 6 years ago

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 commented 6 years ago

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

kr8n3r commented 6 years ago

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

andysellick commented 5 years ago

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

injms commented 5 years ago

✋ 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 commented 5 years ago

👍 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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:

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
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 commented 3 years ago

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 commented 2 years ago

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

36degrees commented 2 years ago

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?

alphagov / govuk-frontend

Add print styles to components #573

Use of sans serif font in print styles