Сетки, логические значения и режимы написания

CSS полон физических ключевых слов позиционирования — слева и справа, сверху и снизу. Если мы позиционируем элемент с помощью абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы переместить элемент. В фрагменте кода ниже элемент размещен на расстоянии 20 пикселей от верха и 30 пикселей слева от контейнера:

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 20px;
  left: 30px;
}

<div class="container">
  <div class="item">Item</div>
</div>

Еще одно место, где вы можете увидеть физические ключевые слова, — это при использовании text-align: right для выравнивания текста по правому краю. Также существуют физические свойства в CSS. Мы добавляем отступы, внутренние отступы и границы, используя эти физические свойства margin-left, padding-left и так далее.

Мы называем эти ключевые слова и свойства физическими, потому что они относятся к экрану, который вы смотрите. Слева всегда слева, независимо от направления вашего текста.

Это может стать проблемой при разработке сайта, который должен работать с несколькими языками, включая языки, в которых текст начинается справа, а не слева. Браузеры довольно хорошо справляются с направлением текста, и вам даже не нужно работать с языком RTL, чтобы взглянуть. В примере ниже у меня есть два абзаца. В первом абзаце text-align установлено значение left, а во втором абзаце свойство text-align не задано. Я добавил dir="rtl" к элементу html, что изменяет режим написания с по умолчанию для английского документа ltr. Вы можете видеть, что первый абзац остается слева направо, поскольку значение text-align равно left. Однако во втором абзаце направление меняется, и текст идет справа налево.

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

Логические свойства и значения не предполагают направление текста. Именно поэтому в макете сетки мы используем ключевое слово start при выравнивании чего-либо по началу контейнера. Для меня, работающего с английским языком, start может быть слева, однако это необязательно, и слово start не подразумевает никакого физического расположения.

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

Я собираюсь представить здесь еще одну спецификацию, которую буду использовать в своих примерах: спецификацию CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти различные режимы написания в CSS, не только для поддержки языков, которые имеют другой режим написания, чем английский, но и в творческих целях. Я буду использовать свойство writing-mode, чтобы внести изменения в режим написания, примененный к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите глубже изучить режимы написания, я рекомендую вам прочитать отличную статью Джен Симмонс о CSS Writing Modes. Это более подробно рассматривает эту спецификацию, чем мы здесь.

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

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

Значение horizontal-tb является значением по умолчанию для текста в веб-документах. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ потока текста в нашем документе, соответствуя различным режимам написания, встречающимся во всем мире. В качестве простого примера ниже приведены два абзаца. Первый использует значение по умолчанию horizontal-tb, а второй использует vertical-rl. В этом режиме текст по-прежнему идет слева направо, но направление текста вертикальное — строчный текст теперь идет по странице сверху вниз.

<div class="wrapper">
  <p style="writing-mode: horizontal-tb">
    I have writing mode set to the default <code>horizontal-tb</code>
  </p>
  <p style="writing-mode: vertical-rl">
    I have writing mode set to <code>vertical-rl</code>
  </p>
</div>

Если теперь взглянуть на пример макета сетки, мы увидим, как изменение режима написания означает изменение нашего представления о том, где находятся оси Блок и Строка.

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

Если мы добавим writing-mode: vertical-lr к контейнеру сетки, мы увидим, что оси Блок и Строка теперь идут в другом направлении. Ось Блок или столбец теперь идет по странице слева направо, а Строка идёт по странице сверху вниз, создавая строки сверху вниз.

.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

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

В следующем примере я использую выравнивание для выравнивания элементов внутри сетки, установленной в writing-mode: vertical-lr. Свойства start и end работают точно так же, как и в режиме написания по умолчанию, и остаются логичными, в отличие от использования слева и справа, сверху и снизу для выравнивания элементов. Это происходит, когда мы поворачиваем сетку на бок, как это:

.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item1 {
  grid-column: 1 / 4;
  align-self: start;
}

.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: start;
}

.item3 {
  grid-column: 3;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: end;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

Если вы хотите увидеть, как они работают с режимом написания справа налево и сверху вниз, измените vertical-lr на vertical-rl, который является вертикальным режимом написания справа налево.

В уже показанном примере вы можете увидеть, как режим написания меняет направление, в котором элементы размещаются в сетке. По умолчанию элементы размещаются вдоль оси Строки, а затем переходят на новую строку. Однако эта ось Строки не всегда идет слева направо.

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

В этом примере у меня есть сетка, которая находится в стандартном ltr направлении. Я расположил три элемента, используя размещение по линиям.

• Элемент 1 начинается на линии колонки 1, занимая одну дорожку.
• Элемент 2 начинается на линии колонки -1, занимая до -3.
• Элемент 3 начинается на линии колонки 1, занимая до линии колонки 3.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

Если я теперь добавлю свойство direction со значением rtl в контейнер сетки, линия 1 станет правой стороной сетки, а линия -1 — левой.

.wrapper {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

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

Вы можете использовать свойство grid-area, чтобы указать все четыре линии области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются, что значения не следуют тому же порядку, что и сокращённая запись для отступов — которая идёт по часовой стрелке: верх, право, низ, лево.

Порядок значений grid-area:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Что для английского языка, слева направо, означает порядок:

• top
• left
• bottom
• right

Против часовой стрелки! Иначе, чем для отступов и полей. Как только вы поймёте, что grid-area видит мир как «блок и инлайн», вы сможете запомнить, что мы устанавливаем два начальных значения, а затем два конечных. Это становится намного логичнее, как только вы это поймёте!

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

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto;
  font:
    1em Helvetica,
    Arial,
    sans-serif;
}
.wrapper nav {
  writing-mode: vertical-lr;
}
.wrapper ul {
  list-style: none;
  margin: 0;
  padding: 1em;
  display: flex;
  justify-content: space-between;
}
.wrapper a {
  text-decoration: none;
}

<div class="wrapper">
  <div class="content">
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
      shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
      Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
      beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
      bean chickweed potato bell pepper artichoke.
    </p>
    <p>
      Nori grape silver beet broccoli kombu beet greens fava bean potato
      quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
      turnip greens parsnip. Sea lettuce water chestnut eggplant winter purslane
      fennel azuki bean earthnut pea sierra leone bologi leek soko chicory
      celtuce parsley jícama salsify.
    </p>
  </div>
  <nav>
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </nav>
</div>

Мы часто сталкиваемся с физическими свойствами при создании веб-сайтов, и хотя свойства и значения размещения и выравнивания сетки учитывают режимы написания, есть вещи, которые вы можете захотеть сделать с сеткой, которые заставят вас использовать физические свойства и значения. В руководстве по Выравнивание блоков и сетки я продемонстрировал, как работают автоматические отступы в области сетки. Использование автоматического отступа для отодвигания одного элемента от других — распространённый приём с использованием flexbox, однако это также связывает макет с физическим пространством.

Если вы используете абсолютное позиционирование внутри области сетки, вы снова будете использовать физические смещения для перемещения элемента внутри области сетки. Важно понимать баланс между физическими и логическими свойствами и значениями. Например, имейте в виду, что вам может потребоваться внести изменения в свой CSS, чтобы справиться со сменой с ltr на rtl.

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

Спецификация CSS Logical Properties означает, что вы можете использовать логически эквивалентные свойства, такие как margin-left и margin-right, в вашем CSS. Эти свойства и значения хорошо поддерживаются современными браузерами. Ваше понимание блоков и инлайновых элементов через сетку поможет вам понять, как их использовать.