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):
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],
}
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;
}
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:
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
Great! With these changes, maybe Nikola will become popular with writers instead of mainly nerds :P
By the way, is
required with
?
Hyphenation of non-justified text does not make any sense, but you can do this anyways.
Actually, it makes sense. We use it to make the right side of a left justified more balanced.
Not really required but makes it much more visible.
How is the output of the hyphenated text? I am guessing it does not support text reflow.
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.
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 :-)
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.
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?
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.
Excellent! I can start work and worry about theming once 6 is released.
Thank you for the prompt reply, it is really appreciated.