Robust Vertical Text Layout

by fantasai
Table of Contents

This is still a work-in-progress. The gist of the content is written, but I'm still adding details and examples.

Appendix: Vertical Scripts in Horizontal Flow

To be fair, the same flexibility offered to horizontal scripts in vertical layout should be defined for vertical scripts in horizontal layout as well. This requires defining a text-orientation-horizontal property that handles the layout of vertical scripts in a horizontal-flow block.

Defining text-orientation-horizontal


Glyph orientation scheme to use in horizontal text. Only affects layout of non-horizontal scripts. Can take the following values

Non-horizontal scripts are laid out using their canonical Unicode-defined directionality. E.g. Mongolian and Manchu would be left-to-right. This is the default value.
Non-horizontal scripts are laid out left to right. Glyphs are oriented accordingly.
Non-horizontal scripts are laid out right to left. Glyphs are oriented accordingly.
Same as left if the block's directionality has a ltr horizontal component; same as right otherwise.
Non-horizontal scripts' characters are laid out using their canonical Unicode-defined horizontal directionality but each grapheme cluster oriented is oriented as it would be in vertical layout. Character shaping does not occur; use only isolated forms.
If it were defined, this would depend on extra information about the usual block progression used in traditional layout for the primary script. In practice, there's no significant use case.

The values for text-orientation-horizontal are direction-based rather than glyph-orientation-based as for text-orientation-vertical. This asymmetry is because of

  • Vertical flow having two viable block progression directions (right to left and left to right) whereas horizontal flow only has one (top to bottom).
  • Common use of two direcitonalities in horizontal scripts vs. the almost exclusive use of top-to-bottom directionality in vertical scripts.

(It is an attempt to design each property, text-orientation-vertical and text-orientation-horizontal, to be better suited to its own circumstances.)

Use Cases

Mongolian Samples in Arabic Text

Traditional Mongolian is strongly vertical, but fragments of it may be set horizontally when they appear in the context of a horizontal script block. As most horizontal scripts are left-to-right, Mongolian's designated horizontal directionality in Unicode is left-to-right. It is not, however, a strongly left-to-right script, and an Arabic typesetter could decide to set it right-to-left, in line with the Arabic. Avoiding bidirectionality makes a mixed text easier to read, so using text-orientation-horizontal: context would make inline Mongolian adapt to the direction of the primary script.

Horizontal Mongolian

Most systems don't support vertical text, especially not left-to-right columns. Mongolian computer typesetting systems often work around this problem by laying out the text in horizontal lines from right to left, using an upside-down font, then rotating the page 90° to get vertical text. This technique wouldn't work quite well in a Unicode-based system, however, because a) Mongolian is designated left-to-right b) Unicode character shaping assumes this c) it requires using an upside-down font.

The way text-orientation-horizontal: right is defined, the layout system would take care of shaping the characters properly, ordering them from right to left, and flipping the glyphs. A system that only supports horizontal text layout could thus take standard Unicode text and, using regular Monoglian fonts, print out correctly-set Mongolian. Because it does not use font, encoding, or directionality hacks, the same text can be transferred without change to a different Unicode-based typesetting system that has full vertical text support and still render correctly.

Right-to-left Chinese

Historically, Chinese was not written horizontally, only vertically, in columns ordered right to left. Over the course of the twentieth century, Chinese (and Japanese and Korean) became bi-orientational, acquiring a strong left-to-right directionality in horizontal text. However, there still remains some use of what appears to be right-to-left Chinese in single-line banners and the like. This is generally viewed as a logical extension of vertical text layout: it is Chinese in vertical columns, ordered right to left—except the columns are only one character tall.

The effect can be achieved, without using a right-to-left override, by stripping the Chinese text of its horizontal directionality with a top-to-bottom (ttb) override and styling it with text-orientation-horizontal: context or text-orientation-horizontal: right. Because it still retains the property of being a vertical script, it will still render as top-to-bottom text when placed in a vertical layout.