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…


Leave a Reply

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

You are commenting using your 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