Направления блочного и строчного потока

Блочное направление — это направление, в котором располагаются друг на друге блоки. В системах письма с горизонтальным направлением (LTR/RTL) блочное направление идёт сверху вниз. В режимах письма с вертикальным направлением оно меняется на слева направо или справа налево.

Строчное направление — это направление, в котором текст идёт внутри строки. В языках LTR строчное направление идёт слева направо. В RTL — справа налево. В режимах письма с вертикальным направлением оно становится направлением сверху вниз.

writing-mode задаёт основную ориентацию потока текста:

• horizontal-tb — горизонтальный текст, сверху вниз (по умолчанию)
• vertical-rl — вертикальный текст, столбцы справа налево
• vertical-lr — вертикальный текст, столбцы слева направо

В режиме writing-mode: horizontal-tb (по умолчанию):

• Блочное направление = вертикальное (сверху → вниз)
• Строчное направление = горизонтальное (слева → направо в LTR, справа → налево в RTL)
• Block-start = сверху, block-end = снизу
• Inline-start = слева (LTR) или справа (RTL)

В режиме writing-mode: vertical-rl:

• Блочное направление = горизонтальное (справа → налево)
• Строчное направление = вертикальное (сверху → вниз)
• Block-start = справа, block-end = слева
• Inline-start = сверху, inline-end = снизу

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

В режимах письма с вертикальным направлением свойство text-orientation управляет ориентацией отдельных символов:

• mixed: латинские символы поворачиваются, а CJK остаются вертикальными
• upright: все символы остаются вертикальными (для вертикального CJK)
• sideways: все символы поворачиваются боком

Практический пример: повёрнутые подписи на боковой панели или подписи осей диаграммы в контексте с горизонтальным письмом:

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

Логические эквиваленты ширины и высоты:

• inline-size = ширина в horizontal-tb (размер по строчной оси)
• block-size = высота в horizontal-tb (размер по блочной оси)

Для вертикального текста, содержащего числа или сокращения, свойство text-combine-upright (tcy) сохраняет короткие последовательности символов вертикальными и сжимает их в одной ячейке вертикального текста.

В режиме writing-mode: horizontal-tb с языком LTR какая ось является «блочной»?

Блочная ось — это направление расположения блочных элементов; строчная ось — направление потока текста. В системах письма с горизонтальным направлением блочная ось = вертикальная, строчная = горизонтальная. При вертикальном письме они меняются местами. Свойство writing-mode управляет основной ориентацией осей. Логические свойства адаптируются к текущим блочной и строчной осям.