New in Nikola v6 part I: Typography

I am planning to do a major release (version 6!) of Nikola my static blog and site generator the next weekend. It's a major version because there has been a ton of feature work done. So, I will do a quick series highlighting some of those improvements this week.

Today's Topic: Typography.

Nikola used to suck at this. It produced sites like most websites: absolute garbage when it came to typography. So, we fixed it.

Here is what a certain section of A Study in Scarlet looked like when built using Nikola 5.5.1 (the current release):

Looks like a webpage, right?

/galleries/random/sherlock1.png

The first things that suck in that image are the quotes and dashes. They are ASCII quotes, straight and dull, and dashes rendered as --. A solution for this has existed for a long time in the form of smartypants by Jon Gruber. There is a project called typogrify which integrates that and more to help improve HTML output. So, it is now (optionally) integrated into Nikola.

This change in your conf.py enables it:

from nikola import filters
FILTERS = {
".html": [filters.typogrify],
}

Nice typographical quotes and dashes.

/galleries/random/sherlock2.png

The final thing that needs improving is that ragged right edge. That's a CSS fix, and easy to do. Just put this in files/assets/css/custom.css:

div.section>p {
    text-align: justify;
}

Not so ragged. But not right.

/galleries/random/sherlock3.png

If you care about typography, you will know what's wrong in that image. See how every line breaks right between words, and the right edge is not exactly aligned? That's because the words are not hyphenated. And that sucks! Hyphenation algorithms have existed for 40 years, why are we not using them? Well, let's use them then! Thanks to Pyphen and some HTML manipulation now Nikola can do it, if you set HYPHENATE = True in your conf.py:

Finally, decent looking text.

/galleries/random/sherlock4.png

By the way, if you click on the figure and use the arrows, you can see how it changes on each iteration. You can see the whole page with all this applied (and/or read A Study in Scarlet) at http://hyphenated.ralsina.me/stories/a-study-in-scarlet.html

Comments

Comments powered by Disqus