Режим письма - CSS-хитрости

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

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

См. Раздел Pen writing-mode: vertical-rl от CSS-Tricks (@ css-tricks) на CodePen.

Это наиболее полезно для таких языков, как китайский, японский или корейский, где текст часто располагается вертикально. На английском языке более вероятно, что вы захотите использовать это свойство из эстетических соображений, например, для выравнивания заголовка в блоке текста следующим образом:

См. Pen YWBWGA от CSS-Tricks (@ css-tricks) на CodePen.

Значения

В приведенных ниже примерах я сделал первую букву текста красной, чтобы было легче увидеть, в каком направлении вам нужно начать чтение.

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

Это значение свойства по умолчанию: текст читается слева направо и сверху вниз.

См. Раздел Pen writing-mode: horizontal-tb от CSS-Tricks (@ css-tricks) на CodePen.

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

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

См. Раздел Pen writing-mode: vertical-rl от CSS-Tricks (@ css-tricks) на CodePen.

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

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

См. Раздел Pen writing-mode: vertical-rl от CSS-Tricks (@ css-tricks) на CodePen.

Ссылки по теме

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

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.