Design Web Pages for Both Screens and Papers

DONG Yuxuan @ May 13, 2020 Asia/Shanghai

Design rules that can make people print your web page with less pain.

Web pages can be temporary. To permanently save valuable documents, people may print your web pages to PDF files or papers. However, most web pages don’t consider what they should look like while be printed.

CSS provides the @media print selector to customize styles on papers. We should make use of it to have good reading experience for both screens and papers.

Rule 1: Hide UI components

Buttons, forms, navigations and other UI components can’t function on papers. And when people want a PDF copy or a printed copy, they usually want only the content of the article.

Thus UI components should be hidden.

This site uses Disqus for commenting. It’s the only UI component on the site and it’s wrapped in a div with the class comments. So what I do is very simple:

@media print {
	.comments {
		display: none;
	}
}

If comments are critical to your page, you may preserve them or use more sophisticated styles.

Hyper links are cool but they can’t function on papers. For people to reference other documents, the URL should be printed within brackets after a link. It can be implemented by the :after CSS selector.

Mine is the following.

@media print {
	a:after {
		content: ' (' attr(href) ')'
	}
}

To make it look nice, try not to use the URL itself as the link text.

Rule 3: Turn Scrolling to Wrapping

If you’re writing technical posts like me, code snippets must appear frequently in your posts.

On screen the code block would better not wrap. If the width of the code is too long for the container, we make the container scrollable.

Once again, scrolling doesn’t function on papers. If the page is expected to be printed, it should turn scrolling to wrapping while it’s printed.

On my site, block-level code snippets are placed in <pre><code> ... </code></pre> tags. The simplified styles related to wrapping and scrolling are the following.

pre code {
	display: block;
	overflow: auto;
	white-space: pre;
	word-wrap: normal;
	word-break: break-all;
}

@media print {
	pre code {
		white-space: pre-wrap;
	}
}

More

There’re more things can be done to make pages more friendly to paper reading. While printing, the beginning of a paragraph can be indented; The font may change to a serif one; And so on. For my simple tiny site, the above rules are enoungh. However, I hope this article and what I do on this site could inspire developers and individual blog writers to care about the paper reading experience.