Режим написання - CSS-хитрощі

writing-modeВластивість змінює вирівнювання тексту таким чином , щоб його можна було читати зверху вниз або зліва направо, в залежності від мови. Наприклад, скажімо, ми хочемо додати текст, який читається зверху вниз і справа наліво, наприклад:

.vertical-rl ( writing-mode: vertical-rl; )

Див. Режим писання ручки: vertical-rl від CSS-Tricks (@ css-tricks) на CodePen.

Це найбільш корисно для таких мов, як китайська, японська чи корейська, де текст часто встановлюється вертикально. В англійській мові, швидше за все, ви захочете використовувати цю властивість з естетичних міркувань, наприклад, вирівнюючи заголовок у блоці тексту таким чином:

Дивіться Pen YWBWGA від CSS-Tricks (@ css-tricks) на CodePen.

Цінності

У наведених нижче прикладах я зробив першу літеру тексту червоною, щоб було легше зрозуміти, в якому напрямку вам потрібно почати читати.

горизонтальна-tb

Це значення властивості за замовчуванням: текст читається зліва направо та зверху вниз.

Див. Режим написання пера: horizontal-tb від CSS-Tricks (@ css-tricks) на CodePen.

вертикально-рл

Текст читається справа наліво і зверху вниз:

Див. Режим писання ручки: vertical-rl від CSS-Tricks (@ css-tricks) на CodePen.

вертикальний-лр

Текст читається зліва направо і зверху вниз:

Див. Режим писання ручки: vertical-rl від CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані посилання

Вертикальний текст із режимами написання CSS3
Ахмад Шейд в режимі письма

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.