Printing the web: making webpages look good on paper

URL: https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/

“Everyone’s got computers with lovely high-resolution screens!” I hear you screaming, “Why should we care about designing for print?”

Accessibility

To put it plainly, not everyone is able to view a screen for an extended period of time, and they need alternative ways to consume content. Separate from that, some people just prefer reading hard copies.

Travel

If you’re travelling, especially somewhere rural or in a different country, you’ll likely not have internet access (or power at all, for that matter), and being able to print a hard copy can not only be useful, but the only option.

Legality

Many companies still have organisational policy that requires keeping hard copies. Pairing with this, you might be legally obligated to make sure your page is printable, especially if you’re building for government.

People print websites — they’ll print your website — and making a website printable comes with beneficial byproducts which improve the experience on screen.

break-after and break-before have a lot of rather complex values, but the main ones we care about in the context of page breaks are:

  • auto (default): A break is permitted but not forced
  • avoid: Avoid breaking on the page, column, or region
  • avoid-page: Avoid a page break
  • all: Forces a page break through all possible fragmentation contexts
  • page: Force a page break
  • left: Force up to two page breaks so the next page is on the left
  • right: Force up to two page breaks so the next page is on the right
  • recto: Force up to two page breaks so the next page is a right page in a left-to-right spread or a left page in a right-to-left spread
  • verso: Force up to two page breaks so the next page is a left page in a left-to-right spread or a right page in a right-to-left spread

break-inside has these possible values:

  • auto: A break is permitted but not forced
  • avoid: Avoid breaking on the page, column, or region
  • avoid-page: Avoid a page break
  • avoid-column: Avoid a column break
  • avoid-region: Avoid a region break

To work with any medium, you’ve got to understand its limitations. As obvious as it sounds to say, paper isn’t interactive — you can’t click, long-press, or hover an element. There is a lot to keep in mind with regard to adapting work from one medium to another.

Ooh these two are cool, for printing the url's of links as parenthetical content after the link or abbreviation: 

a[href]:after {
    content: " (" attr(href) ")";
}
abbr[title]:after {
    content: " (" attr(title) ")";
}

Then, there's the whole, "don't need the 'interactive frame' of a page...so just use <main>" snippet: 

body > *:not(main) {
    display: none;
}