Formatting a Tail for EPUB: Concrete Poetry and Varying Screen Width

Carroll alice in wonderland bookcover

From the ePub Books Blog.  More details in the full article.

Let us format a mouse’s tail.

There’s a good reason for it: Wikipedia says, and I see no reason to disbelieve, that exactly 150 years ago (July 4th, 1862) Lewis Carroll told the daughters of his colleague the first version of the story which we now know, in written form, as Alice’s Adventures in Wonderland. And this is, obviously, a good occasion for some formatting. There is an especially attractive piece in the named book: The Mouse’s Tale, shaped like a mouse’s tail. In my earlier article on formatting poetry for small screens, I mentioned this as an example of a poem too specific to be discussed in a general-purpose tutorial. Let me now repent and discuss it. Maybe the solution presented here will inspire some good ideas for other cases; or maybe it will just entertain someone, which isn’t so bad either.

It’s obviously very easy to use fixed formatting for this poem; all you need is the   character, which, added in appropriate quantities in the beginning of each line, will shape the text accordingly. However, if we want to consider the tremendous range of screen sizes on which an e-book may be read, this solution is not perfect: a tail with wide bends will not fit onto a small screen, and a tail with narrow bends will look unworthy of a fine mouse on a wide screen.

What would be nice to have then is a tail which can vary the spread of its bends depending on the screen width, getting more strongly curved on the bigger screens, though not beyond some reasonable maximum. That isn’t at all hard when we have all the features of XHTML and CSS at our service (and whether we do always have them at our service we will discuss a bit later). Here are two known things which, put together, can do this trick for us:

It is possible to define both width in percents and max-width in units for a div element, expressing the idea ‘100% of the screen width, but not wider than e.g. 20em’. It is possible to define a fixed width for only one cell in a one-row table, leaving the others (with ‘auto’ width) to fight for the remaining space. Do not forget to make the cells non-empty, with an   inside at least. Otherwise they will not get their share of screen space.”

(Via ePub Books Blog.)

Leave a comment

Your email address will not be published.


wordpress analytics