Tagged “print”
A Guide To The State Of Print Stylesheets In 2018 - Smashing Magazine
Rachel Andrew explains how to write CSS for a nicely optimised printed page that uses a minimum of ink and paper and ensures that content is easy to read.
I really like the section on Workflow that compares the options of
- organising your print styles as a separate stylesheet loaded via a
<link>in the<head>(this is the “traditional” approach); versus - using
@media print {}in your main styles, which opens up the opportunity to locate each component’s print styles beside its main styles.
As Rachel notes, the first option might feel tidy (and keeping print styles separate reduces the size of your main stylesheet) however on larger sites this approach can lead to print styles being “out of sight, out of mind” and poorly maintained.
I think there will always be a need for 80% global print styles, supplemented by a sprinkling of component-specific print styles (and maybe even the odd utility class). It’s just a case of how you organise this.
I had an idea that you could maybe put the global print styles in a separate sheet and locate the component styles beside components in the main stylesheet however because we tend to want global print styles to add to and override main styles you’d want the print_globals file coming after the main styles, but that then screws up the order of the component-specific print styles. When @layers with <link> is supported perhaps this could all work! Until then, the future of print CSS for large design systems is perhaps Option 2: colocate print styles with screen styles.
Online Résumé (maxboeck on Github)
A beautiful, responsive, print-friendly résumé template from Max.
Some points of note:
- Accessible (WCAG AA)
- uses the h-resume Microformat
- uses a Spellcheck Linter
- Search Engine Optimized (meta, JSON-LD, etc...)
- Built with Eleventy
- Netlify-ready (although hosting choice is up to you)
- Critical CSS Inlined
- Print Styles
Newspaper Terminology (from The Guardian)
The web and print are different media, however I still find some of print’s time-honoured terminology useful for naming things.
For example I use standfirst to identify intro paragraphs on Greenhill Journal Entries. This Guardian resource is a useful reference.
See all tags.