Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Skip Menu

Vertical Text in HTML

Page Content

  1. Chinese Vertical Text
  2. Transform: Rotate (Decrorative Use Only)
  3. Other Vertical Scripts
  4. Links

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"; >

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

Transform: Rotate (Decorative Use Only)

The transform:rotate property is available in CSS, but is not really meant for vertical-script languages. 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

 

CSS 3 "writing-mode"

As of May 2016, this property is supported in updated versions of Firefox, Google Chrome and Microsoft Edge, but not yet in Safari or Internet Explorer.

Below are most of the the relevant standards

Writing Mode Specifations with Sample Scripts
writing-mode: Script Meaning
vertical-rl CJK: Chinese and Japanese Top to bottom text, right to left lines
vertical-lr Mongolian, Manchu Top to bottom text, left to right lines
sideways-lr Ogam (Ireland) Top to bottom, glyph rotated to the right
  TEST!  
  Yi??  

See the Vertical Text page for code examples.

Deprecated Microsoft Orientation CSS

The following -ms-writing-mode: CSS properties from Microsoft were implemented in Microsoft Explorer, but in no other browser. However, they can be used for backwards compatability.

Deprecated Microsoft Tabs
-ms-writing-mode: Script Meaning
tb-rl CJK: Chinese and Japanese Top to bottom text, right to left lines
tb-lr Mongolian, Manchu Top to bottom text, left to right lines
??? Ogam (Ireland) Top to bottom, glyph rotated to the right
  Yi??  
     

 

 

Transform:Rotate

The transform:rotate property is available in CSS, but is not really meant for vertical-script languages. These are more decorative and 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.

See the Vertical Text page for code examples.

See the Vertical Align Test page for details

Microsoft CSS Tags (Internet Explorer 5+/Windows Only)

Internet Explorer for Windows does support a style-sheet tag for vertical text, but other browsers render the text horizontally. Go to the links below for details.

Ruby Standard

The RUBY XML standard is a vertical text schema which will allow developers to display vertical text pages on the Web. However, very few browsers except Internet Explorer for Windows properly support vertical text at this time.

RUBY Links

 

Top of Page

Last Modified: Tuesday, 28-Mar-2017 14:58:41 EDT