Режимы написания и макет CSS

Это не статья о практическом или творческом применении этого свойства. Вместо этого я хочу продемонстрировать, почему понимание режимов письма так важно — даже для тех из нас, кому редко нужно менять режим написания страницы или компонента. Поддержка нескольких режимов письма является ключом к тому, как были разработаны наши новые методы макета Flexbox и Grid Layout. Понимание этого может помочь лучше понять, как работают эти методы компоновки.

Что такое режимы письма?

Режим письма документа или компонента относится к направлению, в котором течет текст. В CSS для работы с режимами письма мы используем свойство writing-mode . Это свойство может принимать следующие значения:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Если вы читаете эту статью в журнале Smashing Magazine на английском языке, то способ написания этого документа — horizontal-tb или Horizontal Top To Bottom . В английском предложения пишутся горизонтально — первая буква каждой строки начинается слева.

Такой язык, как арабский, также имеет режим письма по horizontal-tb . Он пишется горизонтально сверху вниз, однако арабский шрифт пишется справа налево, поэтому предложения на арабском языке начинаются справа.

Китайский, японский и корейский пишутся вертикально, при этом первый символ первого предложения находится вверху справа. Следующие предложения добавляются слева. Поэтому используется режим записи vertical-rl . Вертикальный режим письма, работающий справа налево.

Монгольский тоже пишется вертикально, но слева направо. Поэтому, если вы хотите набрать монгольский шрифт, вы должны использовать режим записи vertical-lr .

Два других значения режима writing-mode предназначены больше для творческих целей, чем для набора вертикальных шрифтов. Использование sideways-lr и sideways-rl переворачивает текст — даже символы, обычно написанные вертикально и вертикально. К сожалению, на данный момент значения поддерживаются только в Firefox. Следующий CodePen показывает все различные значения режима writing-mode , вам нужно будет использовать Firefox, если вы хотите увидеть sideways-* в действии.

Режимы письма можно использовать при создании документа, использующего язык, написанный с использованием этого режима письма. Их также можно использовать творчески, например, чтобы установить заголовок вертикально вниз сбоку от некоторого контента. Однако в этой статье я хочу взглянуть на влияние поддержки вертикальных языков и возможности вертикального текста на макет CSS и на CSS в целом.

Прежде чем я это сделаю — если вас интересует использование режимов письма для вертикального текста — вот несколько полезных ресурсов:

• Сайт интернационализации W3C содержит множество полезной информации. Прочтите о RTL-скриптах и ​​вертикальном тексте.
• Джен Симмонс написала отличную статью о режимах написания CSS, которая также включает несколько примеров использования этих режимов.
• Мысли о мире и наших системах письма - Чэнь Хуэй Цзин
• Вертикальный набор текста с новым режимом письма — Чен Хуэй Цзин
• Свойство режима записи на MDN

Блочные и встроенные размеры

Когда мы меняем режим записи документа, мы меняем направление потока блоков . Поэтому нам быстро становится очень полезно понять, что подразумевается под блочным и встроенным.

Одна из первых вещей, которые мы узнаем о CSS, это то, что некоторые элементы являются блочными элементами, например, абзац. Эти элементы отображаются один за другим в направлении блока. Строковые элементы, такие как слово в предложении, отображаются один за другим в линейном направлении. Работая в режиме горизонтального письма, мы привыкаем к тому, что блочный размер идет сверху вниз по вертикали, а встроенный размер — слева направо по горизонтали.

Однако, поскольку блочные и встроенные элементы относятся к режиму письма нашего документа, встроенный размер является горизонтальным, только если мы находимся в горизонтальном режиме письма. Это относится не к ширине, а к встроенному размеру. Размер блока вертикальный только в режиме горизонтального письма. Поэтому это относится не к высоте, а к размеру блока.

Логические свойства, связанные с потоком

Эти термины, встроенный размер и размер блока также используются в качестве названий новых свойств CSS, разработанных, чтобы отразить наш новый мир, основанный на режиме письма. Если в горизонтальном режиме записи вы используете свойство inline-size вместо width , оно будет действовать точно так же, как и ширина — до тех пор, пока вы не переключите режим записи вашего компонента. Если вы используете width , которая всегда будет физическим размером, она всегда будет размером компонента по горизонтали. Если вы используете inline-size , это будет размер во встроенном измерении, как показано в приведенном ниже примере.

То же верно и для height . Свойство height всегда будет размером по вертикали. Это связано с высотой предмета. Однако свойство block-size дает размер в блочном измерении по вертикали, если мы находимся в горизонтальном режиме письма, и по горизонтали — в вертикальном.

Как я описал в своей статье «Понимание логических свойств и значений», существуют отображения для всех физических свойств, которые привязаны к размерам экрана. Как только вы начинаете думать об этом, очень много CSS определяется в отношении физического макета экрана. Мы устанавливаем позиционирование, поля, отступы и границы, используя верхнюю, правую, нижнюю и левую части. Мы плаваем вещи влево и вправо. Иногда привязка вещей к физическому измерению будет тем, что нам нужно, однако все чаще мы думаем о наших макетах без привязки к физическому местоположению. Спецификация логических свойств и значений реализует этот независимый от режима записи способ работы прямо через CSS.

Режимы записи, сетка и флексбокс

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

Когда я впервые начал рассказывать о CSS Grid, мои первые презентации представляли собой краткое изложение всех свойств спецификации. Я упомянул, что свойство grid-area можно использовать для установки всех четырех линий для размещения элемента сетки. Однако порядок этих строк не был привычным сверху, справа, снизу и слева, который мы используем для установки всех четырех полей. Вместо этого нам нужно использовать верхний, левый, нижний, правый — в обратном порядке! Пока я не понял связь между сеткой и режимами письма, это казалось очень странным решением. Я пришел к выводу, что мы устанавливаем обе стартовые линии, а затем обе конечные линии. Использование верхнего, правого, нижнего и левого будет работать нормально, если бы мы были в режиме горизонтального письма, однако поверните сетку на бок, и это не имеет смысла. Если мы используем grid-area: 1 / 2 / 3 / 5; как и в ручке ниже линии установлены следующим образом:

• grid-row-start: 1; - блокировка запуска
• grid-column-start: 2 - встроенный старт
• grid-row-end: 3 - конец блока
• grid-column-end: 5 - встроенный конец

Строки и столбцы Flexbox

Если вы используете Flexbox и добавляете display: flex в контейнер, ваши элементы будут отображаться в виде строки, поскольку начальное значение свойства flex-direction равно row . Строка будет следовать встроенному размеру используемого режима письма. Поэтому, если ваш режим письма — horizontal-tb , строка будет располагаться горизонтально. Если направление текста текущего скрипта слева направо, то элементы будут выстраиваться в линию, начиная слева, если справа налево, они выстраиваются в линию, начиная справа.

Однако используйте вертикальный режим записи, например, vertical-rl и flex-direction: row заставит элементы располагаться вертикально, так как направление строки является вертикальным. В следующем CodePen все примеры имеют flex-direction: row , изменился только режим или направление записи.

Добавьте flex-direction: column и расположение элементов в блочном измерении вашего режима письма. В горизонтальном режиме письма размер блока сверху вниз, поэтому столбец вертикальный. При режиме записи vertical-rl столбец горизонтален. Как и в предыдущем примере, единственная разница между приведенными ниже гибкими макетами заключается в используемом режиме записи.

Автоматическое размещение сетки

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

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

Размещение по линии сетки

Размещение на основе строки также учитывает режим письма. Строки нашей сетки начинаются с 1, как для строк, так и для столбцов. Если мы поместим элемент из строки столбца 1 в строку столбца 3 и находимся в режиме горизонтального письма с направлением слева направо, этот элемент будет растягиваться от крайней левой строки столбца по двум дорожкам сетки по горизонтали. Таким образом, охватывая две колонки.

Измените режим записи на vertical-rl и строка столбца 1 будет в верхней части сетки, а элемент будет занимать две дорожки по вертикали. По-прежнему охватывает две колонки, но теперь колонки располагаются горизонтально.

Выравнивание в сетке и флексбоксе

Одно из первых мест, где многие люди соприкоснутся с тем, как Flexbox справляется с режимами письма, будет при выравнивании элементов в гибком макете. Если мы возьмем приведенный выше пример flex-direction: row и воспользуемся свойством justify-content для выравнивания всех элементов по flex-end , элементы переместятся в конец своей строки. Это означает, что в режиме горизонтального письма с направлением слева направо все элементы перемещаются вправо, так как конец этого ряда находится справа. Если направление справа налево, то все они движутся влево.

В режиме вертикального письма они перемещаются вниз, если для этого есть место. Я установил inline-size для компонентов в этом примере, чтобы убедиться, что у нас есть свободное место в наших гибких контейнерах, чтобы увидеть выравнивание в действии.

Выравнивание немного легче понять в макете сетки, так как у нас всегда есть две оси для игры. Сетка двумерная, эти два измерения блочные и встроенные. Поэтому вы можете запомнить одно правило, если хотите знать, использовать ли свойства, которые начинаются с align- или те, которые начинаются с justify- . В компоновке сетки align- properties:- align-content , align-items , align-self используются для выравнивания оси блока. В горизонтальном режиме письма это означает вертикально, а в вертикальном режиме письма горизонтально.

Опять же, мы не используем левое и правое или верхнее и нижнее, так как мы хотим, чтобы наша сетка работала точно так же, независимо от режима письма. Итак, мы выравниваем с помощью start и end . Если мы выровняем start по блочному измерению, оно будет top , когда находится в horizontal-tb , но будет right , когда в vertical-rl . Взгляните на приведенный ниже пример, значения выравнивания идентичны в обеих сетках, единственная разница заключается в используемом режиме записи.

Свойства justify-content , justify-items , justify-self всегда используются для встроенного выравнивания в макете сетки. Это будет горизонтально в режиме горизонтального письма и вертикально в режиме вертикального письма.

Выравнивание Flexbox несколько усложняется тем, что главную ось можно переключать со строки на столбец. Поэтому во Flexbox нам нужно думать о методе выравнивания как о главной оси по сравнению с поперечной осью. Свойства align- используются на поперечной оси. На главной оси все, что у вас есть, — это justify-content , потому что мы работаем с элементами как с группой во Flexbox. На поперечной оси вы можете использовать align-content в тех случаях, когда у вас есть несколько гибких строк и пространство во гибком контейнере для их разделения. Вы также можете использовать align-items и align-self для перемещения flex-элементов по поперечной оси относительно друг друга и их flex-линии.

Дополнительную информацию о выравнивании в макете CSS см. в моих предыдущих статьях Smashing Magazine:

• Как выровнять элементы в CSS
• Все, что вам нужно знать о выравнивании во Flexbox

Осведомленность о режиме написания и старый CSS

Не весь CSS полностью соответствует этому относительному потоку и независимому от режима написания способу работы. Места, где он не начинался, выделяются как необычные, чем больше вы думаете о вещах с точки зрения блока и строки, начала и конца. Например, в макете с несколькими столбцами мы указываем column-width , что на самом деле означает встроенный размер столбца, поскольку он не сопоставляется с физической шириной при работе в режиме вертикального письма.

Как видите, режимы письма лежат в основе большей части того, что мы делаем в CSS, даже если мы никогда не используем другой режим письма, кроме horizontal-tb .

Я нахожу невероятно полезным думать о макете CSS в таком независимом от режима написания виде. Хотя, возможно, еще немного рано переключать все наши свойства и значения на логические, мы уже находимся в мире потоков, когда имеем дело с новыми методами компоновки. Когда ваша ментальная модель состоит из блоков и строк, начала и конца, а не привязана к четырем углам экрана, это проясняет многие вещи, с которыми мы сталкиваемся при использовании FlexBox и сетки.