Логические свойства для плавания и позиционирования

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

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

Физические значения, используемые со свойствами float и clear, это left, right и both. Модуль CSS логических свойств и значений определяет значения inline-start и inline-end как сопоставления для left и right.

На примере ниже первый блок смещён с помощью float: left, а второй — с помощью float: inline-start. Если вы примените direction: rtl к селектору .inner, то слева-смещённый блок всегда будет слева, а блок, смещённый по inline-start, будет следовать за direction текста. Вы можете объединить это с writing-mode: vertical-rl чтобы увидеть разницу в макете блоков в сочетании со значениями direction.

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
  <div class="inner">
    <div class="logical box"></div>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale.
  </div>
</div>

.inner {
  /* direction: rtl; */
  /* writing-mode: vertical-rl; */
}

.physical {
  float: left;
}

.logical {
  float: inline-start;
}

CSS позиционирование, как правило, позволяет позиционировать элемент относительно его содержащего блока — мы фактически вставляем элемент относительно того места, где он должен находиться в соответствии с обычным потоком. Чтобы позиционировать элемент относительно области просмотра, используйте физические свойства top, right, bottom и left. Если вам нужно, чтобы позиционирование относилось к потоку текста в вашем режиме написания, используйте inset-block-start, inset-block-end, inset-inline-start и inset-inline-end вместо них.

Эти свойства принимают длину или процент в качестве значения и относятся к размерам экрана пользователя.

В примере ниже свойства inset-block-start и inset-inline-end используются для позиционирования синего блока с помощью абсолютного позиционирования внутри области с пунктирной серой границей, которая имеет position: relative. Измените свойство writing-mode на vertical-rl, или добавьте direction: rtl, и вы увидите, как позиционируемый относительно потока блок останется вместе с направлением текста.

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
  </div>
  <div class="inner">
    <div class="logical box"></div>
  </div>
</div>

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

.physical {
  position: absolute;
  top: 20px;
  right: 0;
}

.logical {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 0;
}

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

• inset — устанавливает все четыре стороны вместе с физическим сопоставлением.
• inset-inline — устанавливает обе логические строчные вставки.
• inset-block — устанавливает обе логические блочные вставки.

Свойство text-align имеет логические значения, которые соотносятся с направлением текста — вместо использования left и right вы можете использовать start и end. В примере ниже text-align: right установлено в первом блоке, а text-align: end — во втором.

Если вы измените значение direction на rtl, вы увидите, что выравнивание по-прежнему справа для первого блока, но переходит к логическому концу слева во втором.

<div class="container">
  <div class="inner physical">Aligned text</div>
  <div class="inner logical">Aligned text</div>
</div>

.inner {
  direction: ltr;
}

.physical {
  text-align: right;
}

.logical {
  text-align: end;
}

Это работает более последовательно при использовании выравнивания блоков, которое использует начало и конец, а не физические направления для выравнивания.