Vertical Chinese Text

Back to Vertical Layout

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.

View the HTML

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

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.

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
照片:台北市立動物園提供

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
照片:台北市立動物園提供

Top of Page