Small advice for writing the CSS for the print

On one project I am working on I recently had a chance to once again write styles for the print. As a web designer I understand that each medium has its unique properties and challenges that we need to overcome through design.

When designing for print we need to take into account several requirements for that medium:

• Most commonly used printers around the world are still monochrome, since they are cost efficient.
• Most commonly used paper color is white and in two possible formats A4 or Letter size
• We need to conserve paper and print only the necessary text
• Smallest readable font-size is at between 10pt — 12pt, but with accessibility in mind, it might need to be bigger and of at least 14pt.
• Paper is not interactive. This may sound silly, but we have come to the point in modern world where we are primarily transferring information from digital world to paper, so we must adapt to that.

With these requirements in mind, we can adjust our UI for print. Since the headline says that this is a small advice, I will be short and to the point:

• All text should be converted to black, since we are printing on a white paper. If color is a requirement, then any text color must be of sufficient contrast compared to white paper. If you are following accessibility rules for web design, then you are already set. Accessibility level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Background should be plain white, without any images, gradients or colors.
• Hide all unnecessary UI elements that doesn’t work on paper. Those are usually dynamic forms, search forms, social share buttons, dynamic menus, banners, videos, sound widgets etc.
• For more complex web sits, if you exclude enough elements from print, you might also want to create new simplified grid for the remaining elements.
• Some elements might look odd when they are split between two pages. It is possible to correct this problem by using CSS rules break-inside, break-before and break-after. Unfortunately, these rules work great in all browsers except Chrome (which is the new IE), so you might need to tweak them a bit.
• When printing anchors (links), they will appear just as an underlined text. In order to solve this problem, I have created a small solution with CSS where href attribute is printed next to the anchor text. It looks like this:

@media print {
  a {
    &:after {
      content: "[" attr(href) "]";
      color: black;
      margin: 0 0 0 5px;
    }
  }
}

When applied to this HTML

<a href="https://www.duckduckgo.com">Best search engine</a>

Result on paper would be

Best search engine [https://www.duckduckgo.com]

---

I hope that these advises will help you to create better styles for the print.

What are your tricks for better print styles?

Comments

[Joe Beretta]

Tip with links is cool)))

[Vladimir Jovanović]

Thanks Joe ;)