I love text. Naturally. I mean, between programming, University work, emails and sexting, I spend around 50 hours a week doing the “digit dance” to make words appear on a glass screen in front of me. As a consequence, I’m obsessed with the appearance of type, and those neatly formatted PDFs generated by
LaTeX has for a long time been my ideal of what nice typesetting looks like.
Recently, I came across two wonderful projects which allowed me take my filthy
LaTeX fetish in a whole new web direction:
Christian Perfect’s work on enabling Computer Modern on the web is amazing. I love Knuth’s aesthetic, and the possibility of bringing those delightfully janky fonts to a website near you made my day. Here’s a before and after of Lato vs Computer Modern Bright:
It was just a simple case of importing the right font into my style sheet and I was on my way. Now that the choice of font has been made, we can now focus on one of the more refined aspects of the
The ability to lay out beautiful solid blocks of text is one of
Unfortunately, it seems too basic to be used with formatted text which contains nested HTML (the algorithm splits the text based on words, discarding all HTML), but thankfully Stein’s Hyphenation Engine proves capable of performing the majority of the heavy lifting, with the CSS
text-justify: newspaper attribute being able to complete the job, providing a pretty decent approximation. The hypher jQuery plugin is extremely easy to use, boiling down to something along the lines of:
<script src="jquery.hypher.js"></script> <script>$('p').hyphenate('en-gb');</script>
Here’s a before and after screenshot of plain old CSS justified text (left), and the same justified text after hyphenating with Bram’s
hypher package. The difference, while subtle, is convincing:
To my eyes, those two changes made the text on this whole site come alive. But hey, such is the power of confirmation bias, right?