Vertical text in ePub/CSS: not there yet

by Liza Daly

Languages aren’t just written right-to-left or left-to-right, of course. They can also be written top-to-bottom, as in Chinese. How can you indicate that a block of text should be rendered vertically rather than horizontally?

In ePub, you can’t.

I was surprised to discover that the subset of CSS supported by ePub only includes the rtl or ltr values in the CSS 2 direction property. Rendering vertical text is covered in the CSS3 Text Layout module, which is still in the editorial draft stage. But it does have some unusual browser support already.

There are multiple methods to specify directionality, but the simplest is the shorthand writing-mode property:

writing-mode: tb-rl; /* Chinese */
writing-mode: lr-tb; /* English */

Curiously, writing-mode is only supported by one browser: Internet Explorer. I doubt any other ePub rendering systems besides Bookworm viewed with IE will actually display such content properly (nor are they required to, as writing-mode isn’t in the specification).

Here’s a modified Project Gutenberg book with the English boilerplate and Chinese content rendered with different writing-mode values, as shown above:

chinese

I’d like to see future revisions of ePub specifically support writing-mode, even if the CSS Text Layout module isn’t fully ratified at that time. (I may add an issue to the EPUB Maintenance list if that seems warranted.)