Zum Hauptinhalt springen
HAWK GT1191

CSS Logical Properties: Die Leserichtung bestimmt, was oben ist

Physische Abmessungen in CSS waren gestern. Damit wir auch andere Sprachen und Kulturen unterstützen können, gibt es die logischen Eigenschaften und Werte.
Von David Maciejewski
2 Min. (418 Wörter)
Zwei Stundeniernde blicken fragend in Richtung Kamera.
Die Umstellung auf logische Eigenschaften in CSS kann anfangs verwirrend sein.

Hintergründe

Seit der Entwicklung von CSS1 im Jahr 1996 durch das World Wide Web Consortium (W3C), wird die Größe von Elementen einer Website traditionell nach den physischen Abmessungen des Bildschirms bemessen. Boxen haben eine Breite (width) und Höhe (height) und dessen Abstände, Position oder Ränder werden über top, right, bottom oder left bestimmt.

.box {
  max-width: 200px; /* maximale Breite */
  padding: 1em; /* Innenabstand */
  margin-bottom: 1rem; /* Abstand nach unten */
  border-left: 5px solid blue; /* Linker Rand */
}
Auch das die Kurzschreibweise padding verwendet physische Abmessungen.

Leserichtung

Das funktioniert in den Sprachen und Kulturen gut, in denen die Leserichtung von links nach rechts und von oben nach unten verläuft – wie bei uns. Im Japanischen, Chinesischen und Koreanischen beginnen die Zeilen jedoch am rechten Rand und verlaufen nach links. Text in lateinischer Schrift verläuft in der Regel von unten nach oben, wobei die Buchstaben im Uhrzeigersinn gedreht werden, während die Han-Zeichen aufrecht stehen. In Mongolisch beginnen die Zeilen am linken Rand und verlaufen nach rechts.

Mit der Eigenschaft writing-mode: vertical-rl können wir den Text in CSS vertikal von rechts nach links und mit writing-mode: vertical-lr von links nach rechts fließen lassen, um die Leserichtung zu ändern und die oben genannten Sprachen zu unterstützen.

Wenn wir wie im Beispiel oben den blauen Rand aber weiterhin mit border-left festlegen, bleibt dieser stets links und nicht jedoch am Anfang des Textes, wie wir uns gedacht haben. Deshalb wurden logische Eigenschaften und Werte in CSS eingeführt. Diese basieren nicht mehr auf den physikalischen Eigenschaften, sondern auf der Leserichtung.

Demo

Auf der folgenden Seite habe ich dir ein Beispiel vorbereitet, wie sich physische und Flow-basierte Eigenschaften auf andere Sprachen auswirken.

Öffne den Codepen.

Logische Eigenschaften und Werte

Logische Eigenschaften und Werte verwenden die abstrakten Begriffe block und ìnline, um die Richtung zu beschreiben. Die physische Bedeutung dieser Begriffe hängt vom Schreibmodus ab.

block
Die Dimension senkrecht zum Textfluss. Im horizontalen Schreibmodus entspricht dies der vertikalen Richtung, im vertikalen Schreibmodus der horizontalen Richtung.
inline
Die Dimension parallel zum Textfluss. Im horizontalen Schreibmodus entspricht dies der horizontalen Richtung, im vertikalen Schreibmodus der vertikalen Richtung.

Statt top, right, bottom und left verwenden wir block-start, inline-end, block-end und inline-start.

Das Beispiel von oben sähe mit logischen Eigenschaften so aus:

.box {
  max-inline-size: 100px;
  padding-block: 1em;
  padding-inline: 1em;
  margin-block-end: 1rem;
  border-inline-start: 5px solid blue;
}
Hier könnte ebenfalls die Kurzschreibweise padding verwendet werden, sofern alle Seite gleich sind. Andernfalls ist diese Schreibweise zu bevorzugen.

Auf der Seite Dokumentation habe ich dir die Referenz zu den logischen Eigenschaften und Werten verlinkt. Das hilft anfangs, wenn du für eine physische Eigenschaft die logische Entsprechung suchst.

Merkhilfe: Im Supermarkt stehen wir am Anfang oder am Ende der Schlange, nicht oben oder unten.

Fußnoten

  1. CSS ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen einer Website zu definieren. Sie definiert die Farben, Schriftarten, Layouts und andere visuelle Aspekte einer Website. ↩

  • Verwendete Tags:
  • css

Lese als Nächstes