Макет потока и режимы написания

Спецификация CSS Writing Modes Level 3 определяет влияние изменения режима написания документа на макет потока. В введении к режимам написания, спецификация говорит,

"Режим написания в CSS определяется свойствами writing-mode, direction и text-orientation. Он определяется в первую очередь базовым направлением выравнивания по строке и направлением потока блоков."

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

Направление потока блоков — это направление, в котором блоки, например, абзацы, выстраиваются в этом режиме написания. Свойство CSS writing-mode управляет направлением потока блоков. Если вы хотите изменить свою страницу или часть вашей страницы, чтобы vertical-lr то вы можете установить writing-mode: vertical-lr на элемент, и это изменит направление блоков, а следовательно, и направление выравнивания по строке.

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

<div class="box">
  <h1>A heading</h1>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
h1 {
  writing-mode: vertical-lr;
  float: left;
}

Свойство writing-mode принимает значения horizontal-tb, vertical-rl и vertical-lr. Эти значения управляют направлением потока блоков на странице. Начальное значение — horizontal-tb,, которое представляет собой направление потока блоков сверху вниз с горизонтальным направлением выравнивания по строке. Языки слева направо, такие как английский, и языки справа налево, такие как арабский, — все horizontal-tb.

Следующий пример показывает блоки с использованием начального значения horizontal-tb явно:

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: horizontal-tb;
}

Сравните это со значением vertical-rl, которое дает вам направление потока блоков справа налево с вертикальным направлением выравнивания по строке, как показано в следующем примере.

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

Наконец, пример демонстрирует третье возможное значение для writing-mode — vertical-lr. Это дает вам направление потока блоков слева направо и вертикальное направление выравнивания по строке.

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-lr;
}

Когда вложенному блоку присваивается другой режим написания по отношению к его родителю, то элемент уровня выравнивания по строке отображается так, как будто у него display: inline-block.

<div class="box">
  <p>
    One <span>November</span> night in the year 1782, so the story runs, two
    brothers sat over their winter fire in the little French town of Annonay,
    watching the grey smoke-wreaths from the hearth curl up the wide chimney.
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box span {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}

Блок-элемент создаст новый контекст форматирования блоков, что означает, что если его внутренний тип отображения будет flow, ему будет присвоен вычисленный тип отображения flow-root. Это показано в следующем примере, где блок, отображаемый как horizontal-tb содержит элемент float, который находится внутри, так как его родитель создаёт новый BFC.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <div>
    <div class="float"></div>
    This box should establish a new BFC.
  </div>

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box > div {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}
.float {
  width: 100px;
  height: 150px;
  background-color: rebeccapurple;
  float: left;
}

Элементы замещения, такие как изображения, не будут изменять своё ориентацию на основе свойства writing-mode. Однако элементы замещения, такие как элементы управления формами, которые включают текст, должны соответствовать используемому режиму написания.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <img
    alt="a colorful hot air balloon against a clear sky"
    src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" />

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

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

<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  width: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  width: 100px;
  margin: 10px;
}

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

<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  inline-size: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  inline-size: 100px;
  margin: 10px;
}

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

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

• Режимы написания
• Режимы написания и макет CSS на Smashing Magazine (2019)
• Режимы написания CSS на 24ways.org (2016)