Logische Eigenschaften

margin-left, padding-top und border-bottom stehen im ganzen Kurs. Das funktioniert, solange der Text von links nach rechts läuft. Es gibt aber Sprachen, in denen er das nicht tut. Dort ist links nicht der Anfang, sondern das Ende.

CSS kennt deshalb einen zweiten Satz derselben Eigenschaften, der nicht in Himmelsrichtungen denkt, sondern in Schreibrichtungen.

01 / 05Zwei Achsen mit anderen Namen

Die Inline-Achse ist die, in der die Zeile läuft. Im Deutschen waagerecht von links nach rechts, im Arabischen waagerecht von rechts nach links.

Die Block-Achse ist die, in der die Zeilen gestapelt werden. Im Deutschen senkrecht von oben nach unten.

Daraus werden die Namen. margin-inline-start und margin-inline-end statt links und rechts, margin-block-start und margin-block-end statt oben und unten. Dasselbe gibt es für padding, border und inset. Statt width und height heißt es inline-size und block-size.

Dazu kommen die Shorthands für beide Seiten einer Achse. padding-inline: 24px setzt Anfang und Ende, margin-block: 16px 32px setzt oben und unten mit verschiedenen Werten.

02 / 05Was dabei herauskommt

<article class="karte">
  <h3>Von links nach rechts</h3>
  <p>Die Linie liegt am Anfang der Zeile.</p>
</article>

<article class="karte" dir="rtl">
  <h3>Von rechts nach links</h3>
  <p>Und hier ebenfalls, nur ist der Anfang jetzt rechts.</p>
</article>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.karte {
  /* Anfang und Ende statt links und rechts. */
  padding-inline-start: 24px;
  padding-block: 16px;
  padding-inline-end: 16px;
  margin-block-end: 16px;
  border-inline-start: 4px solid #2563eb;
  background-color: #f4f4f5;
}

.karte h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  text-align: start;
}

.karte p {
  margin: 0;
}

Beide Karten teilen sich eine Regel. Die zweite hat nur ein dir="rtl" im Markup, und die farbige Linie wandert von allein auf die andere Seite. Ihr Rahmen heißt eben nicht “links”, sondern “am Anfang”.

Ablesen kannst du das mit dem Inspector, erst auf der oberen Karte und dann auf der unteren. Im Reiter „Regeln“ steht beide Male dieselbe Regel mit padding-inline: 24px 16px und border-inline-start: 4px solid rgb(37, 99, 235). Im Reiter „Werte“ stehen zwei verschiedene Ergebnisse, an der oberen Karte padding: 16px 16px 16px 24px und eine Zeile border-left, an der unteren padding: 16px 24px 16px 16px und eine Zeile border-right. Eine geschriebene Regel, zwei gerechnete Kästen, und dazwischen liegt nichts als das dir im Markup.

Eine Angabe macht das nicht mit. text-align steht unter den Werten weiterhin als start da und nicht als left oder right. Abstände und Rahmen rechnet der Browser auf die Himmelsrichtung um, die Textausrichtung reicht er unverändert durch. Im nächsten Beispiel steht an derselben Stelle left, und das ist der Unterschied.

<article class="karte">
  <h3>Von links nach rechts</h3>
  <p>Hier stimmt es noch.</p>
</article>

<article class="karte" dir="rtl">
  <h3>Von rechts nach links</h3>
  <p>Die Linie bleibt links kleben, obwohl der Text rechts anfängt.</p>
</article>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.karte {
  /* Dieselbe Absicht, physisch notiert. Die
     zweite Karte dreht sich nicht mit. */
  padding-left: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 16px;
  margin-bottom: 16px;
  border-left: 4px solid #2563eb;
  background-color: #f4f4f5;
}

.karte h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  text-align: left;
}

.karte p {
  margin: 0;
}

Hier ist dasselbe physisch notiert. Die Linie bleibt links kleben, obwohl der Text rechts anfängt, und die Überschrift richtet sich gegen die Leserichtung aus. Kaputt sieht das nicht aus. Deshalb fällt es kaum auf.

Bei text-align ist es genauso. start und end folgen der Sprache, left und right nicht.

03 / 05Der Grund im Alltag

Die Sprachen sind das gute Argument, aber nicht das, weshalb man umsteigt. Im Alltag zählt etwas anderes, nämlich kürzerer und lesbarerer Code.

margin-inline: auto ist eine Zeile statt margin-left: auto; margin-right: auto. padding-block: 24px sagt, was gemeint ist, nämlich “oben und unten”, statt zwei Zeilen mit derselben Zahl. Bei margin-block-end ist der Gewinn kleiner, denn bei waagerecht laufendem Text ist es immer unten, auch in einer Flex-Reihe. Anders wird es erst bei senkrechter Schrift, und die kommt in diesem Kurs nicht vor.

Zwei davon standen schon im Kurs. padding-inline-start kam in Lektion 14.3 als der Einzug vor, den ein ul von Haus aus mitbringt, und margin-inline: auto in 4.3 als Muster für den zentrierten Inhaltsbereich.

04 / 05Wo die Himmelsrichtung richtig bleibt

<div class="kachel schatten">Ein Schatten fällt nach unten rechts, in jeder Sprache.</div>
<div class="kachel verlauf">Ein Verlauf läuft dorthin, wo du ihn hinschickst.</div>
<div class="kachel mitte">margin-inline: auto ist eine Zeile statt zwei.</div>

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.kachel {
  margin-block-end: 16px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f4f4f5;
}

/* Der Schatten hängt an einer gedachten
   Lichtquelle, nicht an der Schreibrichtung. */
.schatten {
  box-shadow: 4px 6px 16px rgb(0 0 0 / 18%);
}

/* Ein Verlauf auch: to right heißt nach rechts. */
.verlauf {
  background-image: linear-gradient(to right, #dbeafe, #f4f4f5);
}

/* Das hier ist der Alltagsgewinn: eine Zeile. */
.mitte {
  max-width: 320px;
  margin-inline: auto;
  text-align: center;
}

Nicht alles hat mit Schreibrichtung zu tun. Ein Schatten fällt dorthin, wohin die gedachte Lichtquelle ihn wirft, und die dreht sich nicht mit der Sprache. box-shadow bleibt deshalb bei x und y.

Bei einem Verlauf ist es genauso, linear-gradient(to right, ...) meint wirklich nach rechts. Eine logische Schreibweise gibt es dafür nicht. to inline-end ist kein gültiger Wert, und der Browser wirft dann die ganze Zeile weg.

Soll ein Verlauf der Leserichtung folgen, drehe ich ihn von Hand um, in einer Regel mit :dir(rtl). Die Pseudoklasse trifft jedes Element, das von rechts nach links läuft, auch wenn das dir an einem Vorfahren steht, und alle großen Browser kennen sie seit Dezember 2023.

Und alles, was an einer echten Bildschirmkante hängt, bleibt physisch. Ein Element, das unten rechts kleben soll, klebt unten rechts.

05 / 05Umsteigen, Stück für Stück

Ich steige nicht auf einmal um. Neue Komponenten schreibe ich logisch, und wenn ich eine alte anfasse, schreibe ich ihre Abstände dabei um. Der Browser mischt beides ohne Murren, denn physisch und logisch stehen in derselben Kaskade. Bei einem Widerspruch gewinnt schlicht die spätere Deklaration.

In der Aufgabe teilen sich zwei Karten eine Regel, und die untere läuft von rechts nach links.