writing-mode & Writing Modes

writing-mode & Direction

CSS supports vertical text for CJK and creative titles.

writing-mode

p {
  writing-mode: horizontal-tb;  /* default: left-to-right lines */
}
p.vertical {
  writing-mode: vertical-rl;    /* top-to-bottom, right-to-left */
}
p.vertical2 {
  writing-mode: vertical-lr;    /* left-to-right vertical */
}

The common trio

• horizontal-tb: normal (left-right, top-bottom).
• vertical-rl: lines flow top-down, next line left. Used for Japanese/Chinese.
• vertical-lr: lines flow top-down, next line right.

text-orientation

In vertical mode, rotate letters:

p {
  writing-mode: vertical-rl;
  text-orientation: upright;   /* letters stay upright (CJK) */
  text-orientation: sideways;  /* rotate for English */
}

direction & unicode-bidi

p {
  direction: rtl;            /* right-to-left text */
  unicode-bidi: bidi-override;
}

TL;DR

• writing-mode flips the text flow: horiz- vs vertical.
• vertical-rl is how CJK vertical text reads.
• text-orientation rotates letters inside vertical modes.
• direction: rtl for Arabic/Hebrew.
• Use for fun titles and multilingual docs.