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. You 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

notfoss / 2013-08-28 05:09:

Great! With these changes, maybe Nikola will become popular with writers instead of mainly nerds :P

By the way, is

text-align: justify;

required with

HYPHENATE = True

?

Chris Warrick / 2013-08-28 08:55:

Hyphenation of non-justified text does not make any sense, but you can do this anyways.

thiago / 2013-08-28 12:01:

Actually, it makes sense. We use it to make the right side of a left justified more balanced.

Roberto Alsina / 2013-08-28 12:21:

Not really required but makes it much more visible.

thiago / 2013-08-28 12:03:

How is the output of the hyphenated text? I am guessing it does not support text reflow.

Roberto Alsina / 2013-08-28 12:21:

Actually, it does! What happens is that a whole lot of soft-hyphens are inserted where they make sense, and then the reflow is done by the client.

thiago / 2013-08-28 13:01:

That is really nice.

In an ideal world the hyphenation should be done by the browser. I was wondering the other day how difficult it would be to implement a hyphanation lybrary from Open Office, for example, into Firefox or Chrome.

It seems that they did just that with Pyphen, bringing these libraries to create the output. Do you have some of this output to show? -- it will be long since I get home from work and I am really curious about it :-)

Roberto Alsina / 2013-08-28 13:07:

There is at least one pure-JS implementation of this same idea. Let me upload he hyphenated site somewhere...

http://hyphenated.ralsina.c...

Try making the window narrower to see the effect of hyphenation/justification on the text.

Neil C Ford / 2013-08-29 10:18:

How seemless an upgrade will 5.5.1 -> 6 be? I'm looking to move my site to Nikola, so just wondering if I should hold off for a week or so, or if I can start now and happily upgrade?

Roberto Alsina / 2013-08-29 10:26:

If you don't do a custom theme before the upgrade, it's probably just a matter of renaming a few options to avoid warnings.

Neil C Ford / 2013-08-29 10:49:

Excellent! I can start work and worry about theming once 6 is released.

Thank you for the prompt reply, it is really appreciated.


Contents © 2000-2020 Roberto Alsina