writing-mode și text-orientation în CSS

writing-mode: horizontal-tb;   /* implicit */
writing-mode: vertical-rl;
writing-mode: vertical-lr;
text-orientation: upright;

Ce face writing-mode și text-orientation

writing-mode definește direcția în care curg rândurile: orizontal de sus în jos (implicit) sau vertical, cu rândurile așezate de la dreapta la stânga (vertical-rl) ori de la stânga la dreapta (vertical-lr).

Spre deosebire de transform: rotate(), textul vertical ocupă locul corect în layout: lățimea și înălțimea elementului se calculează pe direcția nouă. Proprietățile logice (inline-size, margin-block) urmează și ele direcția.

text-orientation decide cum stau literele în modul vertical: rotite pe o parte (mixed, implicit) sau în picioare, una sub alta (upright). Valorile sideways-rl și sideways-lr sunt mai noi: Firefox 43, Chrome 132, Safari 18.4.

Valori uzuale

Valoare	Descriere
horizontal-tb	Text orizontal, rândurile de sus în jos (implicit).
vertical-rl	Text vertical, rândurile de la dreapta la stânga.
vertical-lr	Text vertical, rândurile de la stânga la dreapta.
sideways-lr	Tot textul rotit, citit de jos în sus.
text-orientation: mixed | upright	Litere latine culcate (implicit) / în picioare, una sub alta.

Exemple

Exemplul 1: Antet de coloană vertical într-un tabel îngust

Tabelul cu note pe materii are multe coloane înguste; titlurile verticale economisesc lățime.

.tabel-note th.materie {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 8px 4px;
}

Efect vizual în browser

Titlurile „Matematică”, „Română”, „Istorie” se citesc de jos în sus, fiecare coloană are lățimea unei note (de exemplu „9,50”), iar tabelul încape pe ecran.

Exemplul 2: Etichetă verticală cu litere în picioare

Un text scurt scris pe verticală, literă sub literă, pe marginea unui banner.

.eticheta-laterala {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.1em;
  font-weight: 700;
}

Efect vizual în browser

Cuvântul „NOU” apare scris pe verticală: N deasupra, O la mijloc, U dedesubt, toate literele drepte.

Greșeli frecvente

• Folosirea transform: rotate(-90deg) pentru text vertical; elementul își păstrează dimensiunile vechi și se suprapune peste vecini.
• text-orientation: upright pe texte lungi; literele una sub alta se citesc greu, păstrează această variantă pentru 2–5 caractere.
• Uitarea faptului că width și height par „inversate” în modul vertical; proprietățile logice (inline-size, block-size) evită confuzia.

Comenzi înrudite

• transform (translate, rotate, scale, skew): Modifică forma, poziția și unghiul unui element în spațiul 2D sau 3D, fără a deranja elementele vecine.
• text-align: Aliniază textul și elementele inline din interiorul unui bloc (la stânga, centrat, la dreapta sau justificat).
• white-space (nowrap, pre, pre-wrap, pre-line): Decide dacă spațiile și Enter-urile din text se păstrează și dacă textul trece singur pe rândul următor.