Making vertical Japanese text

Question

Can anybody tell me the html/css to have Japanese text print from top to bottom, right to left (like in books) without changing the actual ilgnment of the characters? I am using UTF-16, If it helps.

Answer 1

As @Michael_B pointed out in their comment above, you can use the writing-mode CSS property with the 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 to your whole page by targeting html rather than just individual elements, if you want things aligned 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>