Styling for Print & Accessible Code

21 Nov, 2019 — 3 min

When I moved to Hugo, one of the main goals was the generated site would be compatible with most media. This includes blog posts being printable and accessible.

Print styling is because I occasionally use Print to PDF functionality when I need to send or archive my posts.

I didn’t have many non-contrast accessibility issues since I’ve kept the HTML structure very basic. I also managed to get away with only a little link styling for non-code contrast issues. I discovered though that the contrast checker does not account for rgba/alpha/opacity on text so I converted several colors for testing (lazily calculated with SASS’s lighten).

Here are the main points of what I learned while doing this.

Browsers don’t like printing flex

The biggest surprise for me with print was how badly display: flex; mangles pages. Firefox in particular really does not like to render flex content. Therefore, I had to add @media print cases to undo where I use display: flex; in my code.

Styling Code for Print

The main issue I had with printing was code. To solve this, I’ve done two things. First, I changed my syntax highlighting to the bw theme (a black & white theme) when using print. Second, I added line wrapping for print using:

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

Styling Code for Accessibility

While checking contrasts I found a glaring issue for my blog since I deal with code - the default syntax highlighting theme has some major contrast issues, with a dark pink-red on black to name the worst offender. This lead me to run the contrast checker in WAVE extension (Firefox; Chrome) on all of the Chroma styling samples at once, which is an excellent way to make your browser really slow.

Shockingly, only 5/37 themes passed the contrast checker with no issues: borland, bw, pygments, rrt, and xcode. I excluded bw because I like color (although as mentioned above I use it for print styling) and rrt because I found it painful to read. I ended up choosing borland because I aesthetically liked it the most.

I used Hugo’s syntax theme exporting via the following:

hugo gen chromastyles --style=monokai > syntax.css

After changing themes, I found that differentiating code and non-code wasn’t visually obvious. So I played with the contrast checker and found that #f3f3f3 worked nicely as a background color (which I ended up adding for inline code separately). However, I later realized that this created a contrast issue in the comment styling due to borland’s green color. This ended up being fixed by replacing it with pygments’ green (#008000 instead of #008800).

I’m not totally in love with borland so I may play around with the styling later, but it still looks reasonably good while being accessible. A dark theme is also something to look at later on.

Conclusion

The resulting theme is also very small, which means that it works on AMP without inline styles. You can see the theme demo-ed in this post and the code on GitHub.

I can now happily say that as far as I am aware, my blog has no contrast issues and is print-compatible. You’re welcome to file a bug here if you find it’s not.