Chinese Vertical Text

It is possible to for many browsers to display vertical Chinese text correctly using CSS. The W3C CSS 3 standard includes a writing-mode property which can specifiy vertical text.

For Chinese, the property is writing-mode:vertical-rl which means that text flows from top to bottom and right to left.This property is supported in updated versions of Firefox, Google Chrome and Microsoft Edge, but not yet in Safari or Internet Explorer.

To add support for Internet Explorer, you use the deprecated CSS attribute -ms-writing-mode:tb-rl.

Chinese Test

View the HTML

<div style="writing-mode:vertical-rl; -ms-writing-mode:tb-rl; height:15em;" lang="zh-Hant"; >

Text Here

</div>

Note: Designers can also add a height property to control how much vertical space is taken by the text. On this page the height is set to 15em.

Chinese Horizontal Text

The following bilingual text was from the Taipei Times.

Debbie, a white-handed gibbon at the Taipei Zoo, rests on a branch with her infant Bibo in an undated photo.

台北市立動物園的白手長臂猿「黛比」帶著孩子「比波」坐在樹枝上休息,拍攝日期不明。

Photo courtesy of Taipei Zoo
照片:台北市立動物園提供

Chinese Vertical Text

Note: If text is vertical, the English letters will be rotated, but not the Chinese characters.

Debbie, a white-handed gibbon at the Taipei Zoo, rests on a branch with her infant Bibo in an undated photo.

台北市立動物園的白手長臂猿「黛比」帶著孩子「比波」坐在樹枝上休息,拍攝日期不明。

Photo courtesy of Taipei Zoo
照片:台北市立動物園提供

Transform: Rotate (Decorative Use Only)

The transform:rotate
property is available in CSS, but is not really meant for vertical-script languages. It should be used for decorative use only.

For instance, transform:rotate(90deg) results in vertical text, but also causes the characters to rotate as well. For vertical Chinese text this is incorrect because characters remain in the same orientation whether written horizontally or vertically.

However, if you need to flip text upside down, then transform:rotate(180deg) would be the solution.

Other Vertical Scripts

Other vertical scripts include Mongolian and Ogam, but there is no consistent support yet for these scripts. For now, displaying text in a horizontal version of the script or a translteration may be the best option.

If you need to display text vertically (e.g. for historical accuracy), you can also use a PDF file or an image with horizontal transcript. This can be paired with a horizontal version of the same text.

Writing Mode

Ruby Standard

The RUBY XML standard is a vertical text schema which will allow developers
to display annotations to CJK text on the Web.

Top of Page

Skip to toolbar