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.

Hearthstone

developer.mozilla.org/en-US/docs/Web/CSS/writing-mode – Ceramic

could you post your Japanese text? – Rumney

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>

Emera

Thank you! Worked great! – Hearthstone

By the way (to any future readers), vertical text support in browsers, while widespread now, is not very good and you may need to use hacks to get it to work correctly in some situations (e.g. furigana). – Emera

With a long text, this simply runs off the left side of the page and you have to scroll to the left to read it. How do you get it to stop at the edge of the page and then continue in a new row below? This needs to be responsive. That is, if the page is in a computer it will be wide and automatically "wrap" down to the next row, if it is in a smartphone it will be narrow and automatically "wrap" down to the next row. – Kvass

@Kvass You mean you want it to be right-to-left yet have top-to-bottom pagination? That would be strange, I don't know if there's a simple way to do that in CSS. – Emera

I want Japanese text in an English-language page, which no one ever thinks of. So "XXXX" in English, then Japanese "YYYY", then English "XXXX". If the Japanese is short, no problem. But if it is long it will run off the page to the left. Of course you can cut the Japanese up, so: YYYY (new section) YYYY (new section) YYYY, never running off the page. But that would not be responsive. Text would have to be cut into short sections to match the width of smart phones, which would look silly on a computer. Perhaps flexbox would work (each box a short section, wrapping when it meets the edge)? – Kvass

For an example (but using only with very short sections of Japanese), see cjvlang.com/parsesnips/ishigamiletterseng.html I would like to embed longer texts in Japanese and have them wrap automatically to the row below when they reach the edge of the browser window. Nobody has ever asked this question because no one appears to have ever tried to do this in a live web page! Any solutions? – Kvass

I've done this with Mongolian traditional text, but it's not such a problem because Mongolian runs off the RIGHT edge of the browser window. Scrolling to the right to read the whole Mongolian text seems reasonably natural. But with text that runs off the LEFT edge of the browser window, it feels very awkward scrolling to the left. But even with Mongolian, Google search results note that the page isn't optimised for mobile devices! Google have never considered the consequences of mixing different text orientations on the same page. (Sorry for long comments) – Kvass

Mm. I am wondering if CSS columns can work here, but I don't know if they can be used vertically. – Emera

I've found an alternative treatment. Rather than let the text go off the edge of the window, the text can be enclosed in some kind of box (fixed-width div) and read by scrolling (to the right or left, depending on the script). One problem with this is that the reader may be unaware that only part of the text is visible, particularly on Mac OSX, which likes to hide the scroll bar in the interest of 'looking nice'. Another problem might be printing the page out. My understanding is that overflow text will be ignored when printing (unfortunately I don't have a functioning printer). – Kvass

@Kvass you can use @media print {} to change the overflow behaviour for print and test with Print Preview – Emera

Linux, FireFox 126, the sample vertical text looks correctly. What I wonder is... can HTML textarea boxes have vertical Japanese write mode? – Vibration