CSS Writing Mode: Путешествие через ориентацию текста

Здравствуйте,野心勃勃 веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир CSS Writing Mode. Как ваш добрый сосед по компьютеру учитель, я здесь, чтобы помочь вам ознакомиться с этим fascynating свойством, которое можетliterally перевернуть ваш текст с ног на голову! Так что, пристегнитесь и погружаемся!

Что такое CSS Writing Mode?

Прежде чем мы начнем программировать, давайте поймем, что такое режим письма. Представьте, что вы читаете книгу. На английском языке мы обычно читаем слева направо и сверху вниз. Но что, если вы читаете традиционную японскую книгу? Текст идет вертикально сверху вниз и справа налево. Вот где CSS writing-mode comes в handy!

Свойство writing-mode в CSS позволяет нам контролировать направление, в котором мы отображаем текст и другие inline контент. Это как иметь magic wand, который может сделать ваш текст танцевать в разных направлениях!

Возможные значения

Давайте посмотрим на различные значения, которые мы можем использовать с writing-mode свойством:

Значение	Описание
horizontal-tb	Текст течет горизонтально слева направо, сверху вниз
vertical-rl	Текст течет вертикально сверху вниз, справа налево
vertical-lr	Текст течет вертикально сверху вниз, слева направо
sideways-rl	Текст течет вертикально сверху вниз, все символы повернуты на 90° по часовой стрелке
sideways-lr	Текст течет вертикально сверху вниз, все символы повернуты на 90° против часовой стрелки

Применяется к

Свойство writing-mode может быть применено ко всем элементам, включая ::first-letter и ::first-line pseudoelements. Это как universal remote control для текстового направления!

DOM Синтаксис

Теперь давайте посмотрим, как мы можем использовать writing-mode в нашем CSS:

element {
writing-mode: value;
}

Просто, правда? Давайте погрузимся в каждое значение и увидим их в действии!

CSS writing-mode - horizontal-tb Значение

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

<div class="horizontal-tb">
<p>Этот текстhorizontal слева направо, сверху вниз.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

Этот текст будет отображаться так же, как вы читаете эту статью. Ничего особенного, но это наш отправной пункт!

CSS writing-mode - vertical-rl Значение

Теперь давайте изменим направление:

<div class="vertical-rl">
<p>Этот текст вертикальный, справа налево!</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

Вот и все! Ваш текст теперь течет вертикально сверху вниз, и несколько строк начнутся справа и пойдут налево. Это как чтение традиционной японской или китайской свитка!

CSS writing-mode - vertical-lr Значение

Давайте попробуем вертикальный режим слева направо:

<div class="vertical-lr">
<p>Этот текст вертикальный, слева направо!</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

Теперь ваш текст вертикальный, но он начинается с левой стороны. Это как чтение монгольского скрипта!

CSS writing-mode - sideways-rl Значение

Готовы к акробатике? Давайте попробуем sideways-rl:

<div class="sideways-rl">
<p>Этот текст сбоку, справа налево!</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

Это вращает каждый символ на 90° по часовой стрелке. Это как ваш текст делает кувырок!

CSS writing-mode - sideways-lr Значение

И теперь для последнего переворота:

<div class="sideways-lr">
<p>Этот текст сбоку, слева направо!</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

На этот раз каждый символ вращается на 90° против часовой стрелки. Это как ваш текст делает сальто назад!

CSS writing-mode - Эстетическое использование (английский язык)

Хотя эти различные режимы письма crucial для поддержки различных языков, они также могут быть использованы creativelly в английском языке. Вот fun пример:

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

Это создает вертикальный текст, который выглядит как обложка книги на полке. Круто, правда?

CSS writing-mode - Связанные свойства

Чтобы полностью контролировать ориентацию текста, вы можете использовать эти свойства alongside writing-mode:

Свойство	Описание
text-orientation	Определяет ориентацию символов текста
direction	Устанавливает направление текста, inline элементов и столбцов таблицы
unicode-bidi	Override bidirectional алгоритм для текста

Вот быстрый пример:

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

Это позволяет для вертикального текста, где некоторые символы (например,拉丁ские буквы) вращаются, а другие (например, китайские символы) остаются вертиканными.

И вот и все,folks! Мы отправились в fascynating мир CSS Writing Mode. Помните, что интернет - это global платформа, и эти свойства помогают сделать его доступным и красивым для всех, независимо от их языка или скрипта.

В следующий раз, когда вы создаете веб-сайт, почему бы не попробовать поиграть с этими свойствами? Вы можете создать что-то неожиданно awesome! Счастливого кодирования, и пусть ваш текст всегда течет в правильном направлении!

Credits: Image by storyset