Create Vertical Japanese Text

Question

Can someone tell me html / css to print Japanese text from top to bottom, from right to left (e.g. in books) without changing the actual character of the characters? I use UTF-16 if this helps.

Answer 1

As @Michael_B noted in his comment above, you can use the CSS writing-mode property with vertical-rl mode for this. For example:

 .vertical { -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; } 

 <p class=vertical lang=ja>これはテストテキスト。日本語は楽しいです。</p> 

You might want to apply this throughout the page by setting up html instead of individual elements if you want everything to align to the right of the page:

 html { -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; } 

 <p lang=ja>これはテストテキスト。日本語は楽しいです。</p>