Category: 6.75 Design Tweaks

Aladore on WordPress post?

Want to see a preview? I put all the new Aladore CSS inline for the first page of chapter III, it doesn’t necessarily come out all correct, since this is WordPress–the posts don’t serve up the exact html I type in. But, if you put all that new markup together, you should get something like this:


THEN Ywain turned his face towards the village, and went down the hill: and he went with a good heart, for though the boy had left him, yet he hoped not to be long without him, and even now when he looked straight forward it seemed that he had the joy of his company and his laughter. But when he turned and looked beside him, there was but his own shadow; black it lay and long, and about the edges of it a brightness was shining. Then he remembered that the sun was low and night rising among the hollows, and he bethought him of his supper and sleep.

So he went quickly to the village, and passed through it and came to the farmer’s house that lay beside the great wood: and the farmwife gave him welcome, as one that knew not who he was, but could well pitch her guess within a mile or so. And she whispered to her husband, but he was hard of hearing and full of slumber from the fields. So when Ywain had supped, they showed him where he should lie. And when he was come there he laid him down, and the day went from him in a moment and he knew no more whether he were alive or dead.

There are a few more tweaks to do on this text, which we will talk about in this section!

Poetry Markup

If you remember, I talked a bit about the difficulties of formatting the poetry in an ebook (Aladore didn’t turn out tooooo complicated, since the poems and structures were pretty simple). And if you remember way back, we started on the journey To Aladore with a bit of poetry, the Song of the Children in Paladore.

So, to preview the new poetry markup and styling, I put the new CSS inline so we can revisit the song:

To Aladore, to Aladore,

Who goes the pilgrim way?

Who goes with us to Aladore

Before the dawn of day?

O if we go the pilgrim way,

Tell us, tell us true,

How do they make their pilgrimage

That walk the way with you?

O you must make your pilgrimage

By noonday and by night,

By seven years of the hard hard road

And an hour of starry light.

O if we go by the hard hard road,

Tell us, tell us true,

What shall they find in Aladore

That walk the way with you?

You shall find dreams in Aladore,

All that ever were known:

And you shall dream in Aladore

The dreams that were your own.

O then, O then to Aladore,

We’ll go the pilgrim way,

To Aladore, to Aladore,

Before the dawn of day.

Do you like it better than the Blockquote on the old To Aladore post?

Here is what it looked like in print:

To Aladore, p.250, 1914 edition

p.250, 1914 edition

You can see that the print verse is actually in a slightly smaller font. To reproduce a bit of these typographical techniques used to set off the poetry from body text, I added a few more CSS tweaks: font-size: 0.95em; word-spacing: 0.2em.

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.

HR issues

Iterative user testing of the ebook styling pointed out a few more flaws that needed to be ironed out.  Basically, after the steps outlined in the last few posts, things looked great in Readium, but dedicated reading devices have some frustrating rendering limitations that I want to work around.

For example, check out the first page of Aladore:

aladoren00newbuoft_0021I recreated the cute little line below the title with a <hr> with this CSS styling {width: 5em; border-width: 0.1em; margin-top: 2em; text-align: center;}.  This looks pretty good on Readium:

page1However, no other reading app seems to support text-align: center for <hr>, resulting in a silly looking short horizontal rule aligned on the left side of the screen. There are two other <hr> in the book, under the contents and illustrations in the TOC, which look equally ridiculous. So, the options are to 1) leave the nicely styled horizontal rule and let it look stupid on older devices, 2) delete the hr completely, or 3) remove centering and length from the hr styling. I decided to go with option 3 in the TOC and option 2 for Chapter 1, even though its not entirely satisfying.

As we have found throughout Digital Aladore, sometimes practicality overrides other design ideals…

New Cover

I mentioned that I wanted to create a new cover image for the epub. After playing around with some ideas, I decided to NOT get creative… I just grabbed the cover off the 1915 edition of Aladore and tweaked it for the ebook:

aladore_coverI think a cover should be simple and display the title large enough that it is readable as a thumbnail. This enables easy and informative browsing on reading devices. Oddly enough this old book cover seems to work just fine.

I brightened up the image and cropped it down to a narrower 1.6 ratio, pixel size 729×1199 (using GIMP of course).  Like all things ebook, there isn’t any universal standards or guidelines for cover images, each device and corporation suggests a slightly different ratio and pixel size.  Since this version of the ebook is intended for dedicated ereaders, I kept the image on the smaller end, but still high quality enough to not look horrible on a larger screens such as a NookHD or iPad (in case you are wondering, there will be another version of the ebook optimized for newer devices, following the full epub3 standard, coming later).



After completing the tweaks outlined in the last few posts, I opened the Aladore epub with Calibre’s built in editor for a final look.  As mentioned in previous posts, the editor is comparable to Sigil, although not necessarily designed for creating ebooks from scratch. However, because it is built into Calibre’s ebook library management platform, it is great for making tweaks on the fly for testing on your reading devices. Also, development on the project currently seems more active than Sigil.

To get a overview of the contents of the epub, I open Reports from the Tools menu.  This analyzes the package, listing all the files, words, images, styles, characters, and links.  It is a nice way to quickly look for any issues that might still be lurking. I scan through the words to see if any weirdness stands out, then check the characters to ensure there is nothing strange.  You will learn interest factoids, such as “and” is the most used word at 4001 times, or there is 66,910 spaces in the ebook.

reportsIt is worth noting that Calibre slightly modifies the metadata when ebooks are added to the library.  If you are anal about your newly perfected markup, you might want to re-edit it.  One powerful feature of the editor is “Compare to another book” under the File menu. It creates a nice visualization highlighting the differences between versions of the ebook (compare with Juxta used earlier in Digital Aladore). Here it is showing the differences introduced by the automatic Calibre metadata edits:


So everything looks okay! I also flipped through it on my reader for a final “user testing” session.

Finally, we want to run it though IDPF’s EPUB Validator (a free web-based tool) to ensure everything is kosher:


Ready for distribution?