How can I display English and CJK text sideways using CSS?

Question

This is a topic visited by How can I draw vertical text with CSS cross-browser? 14 years ago, and there doesn't seem to be any clear solutions.

Ideally, I want both the CJK and the latin characters to be vertical with their bottom facing the right side.

writing-mode: sideways-rl produces the following output that exactly matches what I want. The only problem is: It's Firefox exclusive and no other browsers support it as of 2023 (https://caniuse.com/?search=sideways)

Many people proposed the workaround of using vertical-rl then flipping the text using scale(-1) or rotate(180deg). This works totally fine for latin characters, but the CJK text will be upside-down.

writing-mode: vertical-rl
transform: rotate(180deg)

I also tried rotating the entire container of horizontal writing -90°, which leads to many alignment and text rendering issues since HTML alignment is computed before transform, and workarounds like margin: -100px; padding: 100px aren't very elegant and often lead to more issues such as pointer hitbox misalignment.

Answer 1

It is intended that CJK characters will remain upright instead of being rotated because of how they can be read in both directions. However, You can force the rotation using text-orientation: sideways, which is supported by most browsers.

(Note that text-orientation: sideways rotates the text 90 degrees clockwise, so you still need to keep the transform: rotate(180deg) to flip the text.)

.verticalbox {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg)
}

<div class="verticalbox">
  Oct 28 星期六
</div>

---

Note: Though might not matter in your case, for multiple lines with lr, we still need to replace it with rl and rotation(180deg), as described in this W3C article:

Note that the result of using this property-value pair with with writing-mode:vertical-lr is different from that seen when using writing-mode:sideways-lr since the text starts at the top of the block and glyphs lie on their right side. Note also that when a line breaks, lines progress in the opposite direction to what you would normally want, because lines read later appear to the right of (visually, above) those read earlier.