One issue of international text that hadn’t made much progress until recently was support of vertical text for scripts that were originally written vertically. One of these was Chinese, but there have been recent developments and adoption of the CSS3 Writing Mode property that make vertical Chinese text possible in most modern desktop browsers (except Safari).

### Writing Mode

The writing-mode property is where the W3C wants writing direction (horizontal or vertical) to be specified. By default, a text will be written horizontally top to bottom or writing-mode:horizontal-tb. For vertical Chinese though, you can use writing-mode:vertical-rl within a div tag so that text flows from top to bottom and right to left.

For your vertical div you can also add constraints on the height with the height, max-height or min-height properties. To obtain vertical text in Microsoft’s Internet Explorer, you can also add the deprecated tag -ms-writing-mode:tb-rl. Note that Microsoft Edge has switched to the newer writing-mode properties.

You can see example code and results at the Chinese vertical text page.

### White Listing

If you are developing/testing content on a content management system, you may find that it either rejects or strips the writing-mode attribute. This could be due to whitelisting, a security protocol which strips any HTML or CSS NOT found in a list of accepted elements. The writing-mode attribute isn’t necessarily dangerous, but it is so new that it is recognized as being an acceptable element on a Web site.

If you are experiencing a whitelisting issue, you can contact the organization maintaining the whitelist for their system and ask them to include the writing-mode if it is a critical issue. Or you can create a version of the page outside the site.

### Other Vertical Scripts

There are other vertical scripts such as Mongolian and Ogham (Ireland), but support for them is not as robust. Mongolian is theoretically written left-to-right top to bottom (writing-mode:vertical-lr), but the local browser also needs access to a Mongolian font. Ogham also requires a special font and the correct specification for the vertical orientation is not entirely clear in the writing-mode specification.

Share →