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.
Let us consider, for example, the following piece of code:
<table width="100%">
<tr>
<td style="width: auto"> </td>
<td style="width: 9em; text-align: center;">mouse</td>
<td style="width: auto"> </td>
<td style="width: auto"> </td>
</tr>
</table>
After the second cell gets its fixed portion of width, the rest is divided into three equal parts, one for each of the tree cells with “auto” width and (importantly!) identical content. As a result, the cell with text will be closer to the left edge of the table then to the right.
So, here goes the demo! Open it and play with the browser window width, very narrow window being of particular interest.
Some browsers do not allow you to make the window very narrow; that’s why we need these wide gray margins in the demo: they occupy part of the screen space, making the “page” narrower (if you still can’t make the window narrow enough, then just zoom in a little to make the text bigger).
To get a more detailed idea of how that actually works, have a look on this version of the demo where the borders of tables and cells are left visible. For even more details you may want to look into the demo’s source HTML.
Some technical problems may be encountered along this way currently. This piece of HTML is rendered uniformly in all the browsers I tried so far (four on Windows and three on Mac), Calibre is doing fine as well, and I was told the same about Azardi and Bookle. However, some other ebook-readers do not join this unanimity of browsers and get puzzled, producing a dull straight tail with no cheerful bends (not a totally unbearable rendering, but apparently inconsistent with the code, and much much worse than the one seen in the browsers). In particular, there is a known problem with ‘auto’ margins, and some inconsistent behaviours related to table formatting.
Download “Anton Mouse Poetry EPUB” mouse.epub – Downloaded 692 times – 9 KB
If you’re an eReader-developers then I encourage you to download this little sample EPUB file (click the button above), generated from the same demo code (without the gray margins, but with the colored borders, to see more precisely what actually happens), and check whether their tools agree with the popular browsers. This one-poem ebook may act, apparently, as a nice and rather untrivial table-formatting test.
If (or when) everything works, you will be rewarded with a nice twisting tail on the page.