Ir al contenido principal

Ralsina.Me — El sitio web de Roberto Alsina

New in Nikola v6 part I: Typography

I am plan­ning to do a ma­jor re­lea­se (ver­sion 6!) of Niko­la my sta­tic blog and si­te ge­ne­ra­tor the next weeken­d. It's a ma­jor ver­sion be­cau­se the­re has been a ton of fea­tu­re wo­rk do­ne. So, I wi­ll do a qui­ck se­ries hi­gh­li­gh­ting so­me of tho­se im­pro­ve­men­ts this week.

Today's Topic: Typography.

Niko­la us­ed to su­ck at this. It pro­du­ced si­tes like most web­si­tes: ab­so­lu­te gar­ba­ge when it ca­me to ty­po­gra­ph­y. So, we fixed it.

He­re is what a cer­tain sec­tion of A Study in Scar­let looked like when built using Niko­la 5.5.1 (the cu­rrent re­lea­se):

Looks like a we­bpa­ge, ri­gh­t?

/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],
}

Ni­ce ty­po­gra­phi­cal quo­tes and das­he­s.

/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 ra­gge­d. But not ri­gh­t.

/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­na­ll­y, de­cent looking tex­t.

/galleries/random/sherlock4.png

By the wa­y, if you cli­ck on the fi­gu­re and use the arro­ws, you can see how it chan­ges on ea­ch ite­ra­tio­n. You can see the who­le pa­ge wi­th all this applied (an­d/or read A Study in Scar­le­t) at http://h­y­phe­nate­d.­ral­si­na.­me/s­to­rie­s/a-s­tud­y-i­n-s­car­le­t.ht­ml

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.