Direction and Writing Modes

writing-mode sets how lines stack: horizontal-tb (default), vertical-rl (traditional Chinese and Japanese) or vertical-lr. In vertical text, text-orientation: upright stands Latin letters up, and text-combine-upright: all squeezes a short run such as a two-digit number into one character cell. Once text turns, size boxes with logical properties such as inline-size and block-size (Margin, Border and Padding).

Right-to-left direction belongs in the markup, dir="rtl", rather than CSS direction, because it must survive without styles. Wrap embedded opposite-direction snippets such as user names in <bdi>, which isolates them.

<style>
  body { display: flex; align-items: start; gap: 24px; font: 20px system-ui; margin: 8px; }
  div, p { border: 1px solid #90a4ae; padding: 4px; margin: 0; }
  .v { writing-mode: vertical-rl; inline-size: 130px; }  .v b { text-combine-upright: all; }
</style>
<div class="v">第<b>12</b>章　竖排文字从右向左排列</div>
<p dir="rtl" style="inline-size: 300px">مرحبا <bdi>Ada Lovelace</bdi> ، أهلا بك في الدورة</p>