Grundkonzepte der logischen Eigenschaften und Werte

CSS 2.1 und frühere Versionen haben Größen gemäß den physischen Dimensionen des Bildschirms zugewiesen. Deshalb beschreiben wir Kästen als eine width und height habend, positionieren Elemente von top und left, weisen Rahmen, Rand und Auffüllung dem top, right, bottom, left zu, usw. Das Modul für logische Eigenschaften und Werte definiert Zuordnungen für diese physikalischen Eigenschaften und Werte zu ihren logischen, oder fluss-relativen, Gegenstücken — z.B. start und end anstelle von left und right/top und bottom.

Diese Zuordnungen sind sehr nützlich für Websites, die in Sprachen mit einem anderen Schreibmodus als dem ursprünglichen Layout übersetzt werden. Beispielsweise bei einem CSS-Grid-Layout, wenn der Grid-Container eine Breite mit den Eigenschaften align-self und justify-self zum Ausrichten der Grid-Elemente erhält, da diese Eigenschaften fluss-relativ sind, so richtet justify-self: start das Element am Anfang in der Inline-Dimension aus, und align-self: start tut dasselbe in der Block-Dimension.

Wenn der Schreibmodus dieser Komponente mit der Eigenschaft writing-mode in vertical-rl geändert wird, funktioniert die Ausrichtung weiterhin auf die gleiche Weise. Die Inline-Dimension verläuft vertikal und die Block-Dimension horizontal. Das Raster sieht jedoch nicht gleich aus, da die zugewiesene Breite des Containers eine horizontale Maßeinheit, eine Maßeinheit ist, die an das Physische und nicht das Logische oder fluss-relative Verlaufen des Textes gebunden ist.

Wenn statt der width-Eigenschaft die logische Eigenschaft inline-size verwendet wird, funktioniert die Komponente unabhängig vom verwendeten Schreibmodus auf die gleiche Weise.

Sie können dies im folgenden Live-Beispiel ausprobieren. Ändern Sie writing-mode von vertical-rl zu horizontal-tb auf .grid, um zu sehen, wie die verschiedenen Eigenschaften das Layout ändern.

<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
}

.grid > * {
  border-radius: 5px;
  border: 2px solid rgb(96 139 168 / 0.4);
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
}

.grid :nth-child(1) {
  align-self: start;
}

.grid :nth-child(2) {
  justify-self: end;
}

.grid {
  writing-mode: vertical-rl;
  inline-size: 400px;
}

Wenn man mit einer Seite in einem anderen Schreibmodus als einem horizontalen von oben nach unten arbeitet, oder wenn Schreibmodi aus kreativen Gründen verwendet werden, macht es viel Sinn, sich auf den Fluss des Inhalts beziehen zu können.

Ein Schlüsselkonzept beim Arbeiten mit fluss-relativen Eigenschaften und Werten ist die Unterscheidung der zwei Dimensionen von Block und Inline. CSS-Layoutmethoden wie Flexbox und Grid-Layout verwenden die Konzepte von block und inline anstelle von right und left/top und bottom beim Ausrichten von Elementen.

Die inline-Dimension ist die Dimension, entlang der eine Textzeile im verwendeten Schreibmodus verläuft. Daher ist in einem englischen Dokument, bei dem der Text horizontal von links nach rechts verläuft, oder in einem arabischen Dokument, bei dem der Text horizontal von rechts nach links verläuft, die Inline-Dimension horizontal. Wechselt man in einen vertikalen Schreibmodus (z.B. ein japanisches Dokument), ist die Inline-Dimension nun vertikal, da Zeilen in diesem Schreibmodus vertikal verlaufen.

Die Block-Dimension ist die andere Dimension und die Richtung, in der Blöcke — wie Absätze — nacheinander angezeigt werden. Im Englischen und Arabischen verlaufen diese vertikal, während in jedem vertikalen Schreibmodus diese horizontal verlaufen.

Das folgende Diagramm zeigt die Inline- und Blockrichtungen in einem horizontalen Schreibmodus:

Dieses Diagramm zeigt Block und Inline in einem vertikalen Schreibmodus:

• Box-Ausrichtung im Grid-Layout
• Box-Ausrichtung im Flex-Layout
• Fluss-Layout und Schreibmodi
• Verständnis von logischen Eigenschaften und Werten auf Smashing Magazine (2018)