Experimental Lex

Playing with words.

Page Layout Hacks in HTML5 – Part 2

Let’s keep going on this topic. The first post laid out some of the challenges that were faced in using HTML5 as the display format for an iPad app. Essentially, that also means it was used as the source format where the text copy was mixed in with the code. That has to be some kind of programming anti-pattern where the view logic is mixed with the business logic. In this case, the business logic is defined by the user experience requirements which calls for horizontal page flipping with multi-column text layout and fully-justified text.

As we continue this exploration, it becomes more clear that the external development team did not understand the modern CSS technologies that are now available for handling these kinds of display requirements. All things considered, this area of HTML and CSS is somewhat obscure… really an “edge-case” for most of the web development world. Almost all prior web design and development has relied on arbitrary pagination of vertically scrollable pages instead of pagination based on a fixed page/column size. Without the devices that would impose specific pagination constraints, these programming techniques were mostly unknown and virtually irrelevant.

While we continue to research the so-called “right way” of structuring HTML5 content to support text reflow between columns and pages, we should still look at the hacks that were necessary. Hacks seem to be a constant in any programming endeavor.

Aesthetics of Magazine-Style Publishing

In newspaper and magazine publishing, multi-column article layout is the norm and full justification of text is pretty standard. The narrower columns are meant to be easier to read, since the readers’ eyes have to do less work while scanning words from one margin to the other continuously. This also improves the readability of the content, since it becomes less likely for the reader to get lost in the middle of a long sentence.

The full justification of text forces each line of paragraph text to use the full width of the column (with the exception of the last line), and this gives the content a cleaner look. Without the full justification, the text is (usually) left-justified and the other margin has a “ragged” edge.

This improved readability creates additional challenges. Often, there are places in the text where long words close together get word-wrapped in an inconvenient place which results in excessive spacing between words. With the narrower columns of multi-column layout, this problem is compounded.

In addition, the usual concerns of widows and orphans need to be addressed. When paragraphs are split across pages and columns, there are often problems where a single line from the beginning or end of a paragraph is stranded by itself at the top or bottom of a page/column.

Web-Based Reading

On web pages, article content is usually presented in a single column and readers are expected to scroll down the page to continue reading. In addition, the paragraph width for an article is usually narrow, which is meant to improve the readability. This has the side effect of making the article longer in terms of vertical space. A long article on a website might have pagination links, but there is no obligation for the page content to fit into a single viewable page area. Hence, vertical scrolling is usually a requirement in web-based reading.

E-Book Reading

For digital book publishing, page layout is less of a concern since paragraph text is meant to reflow smoothly regardless of screen size. Yet, e-book readers like the Kindle and iBooks are designed to simulate the book reading experience by providing pagination of content in a non-scrollable page. The horizontal page-flipping experience is also part of most e-book readers which is important to book-lovers and purists.

Tablet-Based Reading

The coming revolution in digital publishing is being driven by tablet-based devices like the iPad. For publishers who want to provide a magazine-style look and feel, it may be necessary to support a multi-column layout and often with full-justification of text.  In the remainder of this article, I will share some of the tricks and hacks that might come in handy if you are forced down this perilous path.

Code Hacks

Force Justifying the Last Line

With fully-justified text, the last line at the bottom of a column or page is the one you have to worry about. In order to force-justify a line, you need to employ a trick that makes the paragraph think there is more text that continues on the next line. In the example below, we inserted a <span> tag with the style visibility:hidden and within the tag we have long series of characters. Together, this simulates a long word that gets word-wrapped to the next line, yet is invisible.

<p>One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in his bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, <span style=”visibility: hidden”>aaaaaaaaaaaaaaa</span></p>

Tweaking Word Spacing

Sometimes, paragraph text will split across pages or columns in an unattractive way. For example, an orphan line that continues in the next page or column. That will happen often. One way to handle this is to increase or decrease the number of pixels between each word by setting the word-spacing CSS style. This will often help you get the text reflow you want.

<p style=”word-spacing:2px;”>Gregor’s glance then turned to the window. The dreary weather—the rain drops were falling audibly down on the metal window ledge—made him quite melancholy.</p>

Note: the word-spacing style only accepts whole numbers when rendered by Safari/WebKit.

Squeezing Words Together

In some cases, a line is word-wrapped even though it looks like there is almost enough space to fit the next word on the same line. One trick you can apply is to use the HTML thin space entity, which is thinner than a standard space. I was surprised to find out about it and it’s very useful in this kind of situation.

for the contact felt like a cold shower all over&thinsp;him.

Keeping Words Together

On occasion, you may prefer to keep two words together, especially when a paragraph is split between pages. This can be achieved with the HTML non-breaking space (&nbsp;). However, the &nbsp; and &thinsp; entities both have a fixed width will not stretch out in fully-justified paragraphs, which will make the word spacing like odd.

Superscript and Subscript Handling

Perfect and precise line height is important from a visual perspective and to ensure that paragraph height is consistent. When you have a two-column layout, it is important that the lines of text in each column are lined up precisely.

So, it is surprising to find out that the CSS line-height style can easily get broken by superscript or subscript text in a paragraph. If you have footnote markers, this will be a common problem. The fix for this is to modify the CSS for the <sup> or <sub> tags. Here’s an example:

sup {
vertical-align: baseline;
position: relative;
bottom: 8px;


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

%d bloggers like this: