Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Die Sprache CSS, mit der das Internet gestaltet wird, wurde in Ihren Anfängen einseitig aus westlicher Perspektive entwickelt. Somit haben sich u.a. Befehle für räumliche Anordnungen durchgesetzt (z.B. float:left, margin-right usw.) die in westlicher Leserichtung sinnvoll und schlüssig erscheinen. Doch die Leserichtung von links oben nach rechts unten gilt nicht für alle Menschen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Leserichtung vs. visuelles Layout

CSS-Befehle, die räumliche Eigenschaften abbilden, führen schnell in Sprachen, die nicht von links nach rechts laufen, zu Unlogiken. Diese werden mit den logischen Eigenschaften von CSS (Logical Properties) behoben. Besonders positiv wirkt sich das bei Websites aus, die in mehreren Leserichtungen konsumiert werden sollen. Wobei streng genommen auch schon zwischen Smartphone (Layout-Flow von oben nach unten) und Desktop (Layout-Flow von links nach rechts) ein Unterschied besteht.

Ein Beispiel

Das Layout besteht aus einer Navigationsleiste links und einem Inhaltsbereich rechts. Dieses Layout ist so definiert, dass die Navigation rechts ein margin-right erhalten hat, um den Abstand zum Inhalt herzustellen. Nun soll die Seite auch in Arabisch verfügbar gemacht werden – also gespiegelt werden. Das wird dazu führen, dass der Abstand auf der falschen Seite der Navigation ist.

Die Grafik zeigt den Vergleich zwischen einem Layout mit Leserichtung links nach recht und einem Layout mit Leserichtung rechts nach links. Da der Abstand zwischen Navigation und Hauptinhalt mit margin-right bestimmt wurde, ergebt sich im RTL-Layout ein Fehler. Das Abstand ist auf der falschen Seite.
Beispiel für ein mögliches Problem in allen Sprachen, die keine Leserichtung von links nach rechts haben.

Block- und Inline-Achsen

Es ist wahrscheinlich bekannt, dass es in HTML Block und Inline-Elemente gibt: Inline-Elemente stehen nebeneinander, Block-Elemente werden gestapelt. Die Begriffe aus diesem Bereich sind bei den Logical Properties wieder anzutreffen.

Anstelle von Breite und Höhe definieren wir nun anhand von Block- und Inline-Achsen. Die horizontale Ausrichtung ist die Inline-Achse, die vertikale die Block-Achse. Wohlgemerkt in unserer westlichen Leserichtung.

Block- und Inline-Achse am Beispiel eines LTR (Left to right)-Layouts, z.B. in deutscher oder englischer Sprache

Aus einem Befehl wie margin-right wird somit margin-inline-end. Bei dem simplen Layout aus unserem vorherigen Beispiel führt dies dann zu folgendem Ergebnis. Der Abstand ist nicht mehr rechts neben dem Objekt definiert, sondern nach dem Objekt entsprechend der Leserichtung bzw. des Layout-Flows.

Leserichtungen mit Logical Properties

Neue CSS-Eigenschaften für Logical Properties

Da es eine Reihe von CSS Befehlen gibt, die räumliche Begriffe beinhalten, führen die Logical Properties auch eine größere Anzahl neuer Befehle ein. Die folgenden Tabellen zeigen die bisherigen Befehle – in einem Left-To-Right-Layout – im Vergleich zu den neuen Logical Propoerties.

Übrigens: Flexbox und Grid sind als Layouttechniken so neu, dass hier gar nicht erst »falsche« Formulierungen entstanden sind. Es gibt in der Flexbox beispielsweise nicht flex-right sondern flex-end. Die Logical Properties sind hier bereits mitgedacht.

height, width
heightblock-size
widthinline-size
max-heightmax-block-size
max-widthmax-inline-size
margin
margin-topmargin-block-start
margin-bottommargin-block-end
margin-leftmargin-inline-start
margin-rightmargin-inline-end
padding
padding-toppadding-block-start
padding-bottompadding-block-end
padding-leftpadding-inline-start
padding-rightpadding-inline-end
border
border-topborder-block-start
border-bottomborder-block-end
border-leftborder-inline-start
border-rightborder-inline-end
position
topinset-block-start
bottominset-block-end
leftinset-inline-start
rightinset-inline-end
float & text-align
float: leftfloat: inline-start
float: rightfloat: inline-end
text-align: righttext-align: start
text-align: righttext-align: end

Achtung: U.a. bei float: inline-start etc. ist nicht die Eigenschaft neu, sondern der Wert. In solchen Fällen müsst ihr mit größeren Kompatibilitätsproblemen rechnen als bei neuen Eigenschaften. Auch zeigt u. a. die Tabelle von caniuse nur die Unterstützung für Eigenschaften an – nicht für neue Werte alter Eigenschaften.

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-logical-props feature across the major browsers from caniuse.com

Mit writing-mode und direction die Leserichtung festlegen

Wenn das Layout mit modernen Layouttechniken (Flexbox, Grid) und/oder mit Logical Properties aufgebaut ist, dann kann die Leserichtung mit writing-mode und die Flow-Direction des Layouts mit direction festgelegt werden.

writing-mode: horizontal-tb;Von oben nach unten (z.B. wie Deutsch)
writing-mode: vertical-rl;Von rechts nach links (z. B. wie Japanisch)
writing-mode: vertical-lr;Von links nach rechts (z.B. wie Mongolisch)
html{
    /* right to left – von rechts nach links, z.B. Arabisch. Alternativ: ltr; */
    direction: rtl; 
}

Das Beispiel mit arabischer Sprache zeigt anschaulich, dass die Flow-Direction von rechts nach links verläuft, die Leserichtung aber trotzdem horizontal von oben nach unten ist.

CSS-Eigenschaft inset

Die Eigenschaft inset ist die Kurzschreibweise für top, right, bottom, left. Sie ist Teil der Logical Properties-Spezifikation, definiert aber dennoch räumliche Positionen.

/* Alter Code */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Neuer Code */
.overlay {
  position: fixed;
  inset: 0;
}

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →