Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
В этой статье я покажу вам, как расположить текст на веб-странице сверху вниз, вместо слева-направо (или справа-налево). Есть два способа, один лучше другого, так что погнали!
Как использовать CSS правило “writing-mode”
Способ №1: преобразования в CSS
Если вы знакомы с CSS, то можете подумать, что transform — это лучший способ решения этого вопроса, но позвольте мне показать вам, почему он не идеален. Начнём с некоего содержимого (заголовки и параграф), затем применим transform, вместе с transform-origin, таким образом оно повернётся относительно правильной точки, затем отступ, чтобы оно не выходило за пределы экрана.
Такой подход работает для поворота текста, но не воздействует на положение в документе, поэтому у нас h2, залез на содержимое под ним. Хотя, у нас получился прикольный абстрактный результат.
Способ №2: CSS writing-mode
Второй способ, поддерживает положение в документе, таким образом h2 останется истинных размеров, независимо от направления текста. Мы будем использовать свойство write-mode, например:
1 |
h2 { |
2 |
writing-mode: vertical-rl; |
3 |
}
|
В этом случае, мы задаём значение vertical-rl, что придаёт направление отображения на вертикальное и направление текста справа-налево.
Так намного лучше. Ещё вы заметите, что курсор тоже изменится, чего не было при использовании преобразований CSS transform.
Block Flow Direction (направление положения блока)
Вы, наверно, заметили, что мы использовали значение rl (справа-налево), хотя мы привыкли читать слева-направо. А это потому, что мы изменили направление положения блока (Block Flow Direction). Если мы зададим h2 значение высоты, вы увидите, что текст сгруппируется и вы поймёте, что в данном случае, действительно нужно, чтобы строки располагались от правой стороны страницы к левой:
Это подводит нас к тому, что нам необходимо определить какие из этих выравниваний и в каких направлениях должны пойти. Написанное латинскими буквами пойдёт от верха к низу (это и есть Block Flow Direction). Текст читается слева-направо (и это Inline Flow Direction). И базовая линия выравнивания символов по нижнему краю, хотя направлена наверх (это Character Direction). Вот так:
Другие написания, вроде арабскиого, на основе Хан (на китайском и японском) или монгольское, могут отображать текст, используя эти три положения в любой комбинации направлений.
Написания и режим письма (Writing Mode)
Режим письма разработан для поддержки всех в мире вариантов написания и систем письма. Мы упомянули монгольскую систему, например, все они отображаются вертикально, но располагаются слева-направо.
Другие варианты writing-mode, которые вы можете использовать уже сегодня, включают:
-
vertical-lr— когда, текст располагается вертикально, но идёт слева контейнера направо. -
horizontal-tb— когда текст остаётся горизонтальным, но располагается сверху вниз. Это (вы заметили) направление по умолчанию.
Направление текста
Вот ещё на что стоит взглянуть: китайская поэма, использован режим vertical-rl. Содержимое направлено справа, так что вы начинаете читать с права страницы и читаете в левом направлении. Но, что вы ещё, должно быть, заметили — символы всё-таки направлены наверх. Латинские символы с теми же правилами, были бы направлены по-другому. Это сделано специально:
«Стандарт Unicode присваивает свойство каждому символу, и браузеры могут использовать его для определения ориентации по умолчанию для данного символа». — W3C
Дальше вы можете подгонять ориентацию символов, используя свойство text-orientation.
Вывод
На момент написания, браузеры отлично поддерживают режим написания CSS, хотя он всё ещё в разработке. Всё, что вы видели я делал в этом уроке, уже можно использовать для рабочего сайта.
Не важно, используете ли вы это в практических или эстетических целях, давайте посмотрим на то, как вы это используете в комментариях!
Полезные ссылки
