Justify and Word Spacing?

Looking at the recent posts, I noticed two things about the original print edition that I didn’t capture in the new styling: full justification and word spacing. So I thought I should write a few notes about it.

For some reason there is an abnormally large amount of space between words in Aladore.  This is partly due to the fully justified text (i.e. the line of words is carefully spaced so that it fills an entire line making both the left and right margins even). If you pick up a print book you will see that almost all are fully justified. Here is the first paragraph of Aladore chapter II so you can see what I am talking about:

aladore 1914 p.8

However, in text for the web everyone says DO NOT ever fully justify, just align to the left.  The common wisdom behind this stance is that the layout engines of web browsers are not as sophisticated and polished as publishing applications, thus make fully justified text ugly and unreadable with distracting spaces. Thus, you rarely see a reputable website with fully justified text.

As we have seen throughout the Digital Aladore design process, ebooks fall somewhere in between.  Many ereading devices attempt to reproduce the feeling of print books, thus attempt full justification (no matter how the ebook is actually styled).  For example, Kindle always automatically justified every line of the text, with ugly results that infuriate many readers.  Thus, people were excited when Kindle recently unveiled a new layout engine that is supposed to greatly improve the rendering.

Personally, I hate fully justified text in digital (and some print)!  To me it reduces readability making the flow between words irregular.  My eye tends to follow the interesting spaces opened up in the text… I don’t understand why a straight right hand margin is so desirable anyway.  So here is what the same paragraph shown above, as rendered by Readium with left justification:

non-justified text

You can see the right margin is very ragged at this size.  I tried to match the line length with the print edition for this test, which I think exaggerates the unevenness. I find that with my normal font size on my SONY Reader, the lines are longer than this, thus the jaggedness evens out.

However, once I started looking at the issue, I realized all of the professionally produced ebooks did include “text-align: justify;” in CSS for all text body <p>.  My non-justified styling of Aladore does stick out (on devices that actually respect and render the original CSS that is).  So here is what it would look like adding justify, as rendered by Readium:

justified text

So, yes the justified text does look a little more tidy and professional… and more closely matches the 1914 edition.

However, even with this modification, you can still see that the word spacing in the print edition is larger. HTML5 provides some additional property values for tweaking text-align: justify, however they are not supported by most browsers.  We can try to play around with CSS word-spacing.  So I added “word-spacing: .1em;” to the <p>, resulting in text that renders like this in Readium:

justified with word space increasedThe effect is slight, but I do think it is closer to the 1914 print.  We should ask, Is that a good thing in digital?  The odd spacing was a bit difficult to read even in print…

The word-spacing is mostly irrelevant, since very few reading apps except Readium, support the property. (I should point out that although Readium does a nice job of rendering the full scope of CSS, EPUB3, and multimedia, it is not a complete or very usable reading app. It is missing basic features such as bookmarks, annotation, navigation, or even full text search.)

So… Going forward, I will add justify to the CSS, but skip the word-spacing.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s