Skip to main content

Ralsina.Me — Roberto Alsina's website

New in Nikola v6 part I: Typography

I am plan­ning to do a ma­jor re­lease (ver­sion 6!) of Niko­la my stat­ic blog and site gen­er­a­tor the next week­end. It's a ma­jor ver­sion be­cause there has been a ton of fea­ture work done. So, I will do a quick se­ries high­light­ing some of those im­prove­ments this week.

Today's Topic: Typography.

Niko­la used to suck at this. It pro­duced sites like most web­sites: ab­so­lute garbage when it came to ty­pog­ra­phy. So, we fixed it.

Here is what a cer­tain sec­tion of A Study in Scar­let looked like when built us­ing Niko­la 5.5.1 (the cur­rent re­lease):

Looks like a web­page, 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 ty­po­graph­i­cal quotes and dash­es.

/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:

Fi­nal­ly, de­cent look­ing tex­t.

/galleries/random/sherlock4.png

By the way, if you click on the fig­ure and use the ar­rows, you can see how it changes on each it­er­a­tion. Y­ou can see the whole page with all this ap­plied (and/or read A Study in Scar­let) at http://hy­phen­at­ed.ralsi­na.me/s­to­ries/a-s­tudy-in-s­car­let.html

Comments

Comments powered by Disqus