Logische Eigenschaften

The CSS Podcast – 012: Logische Eigenschaften

Ein sehr gängiges Benutzeroberflächenmuster ist eine Textbeschriftung mit einem unterstützenden Inline-Symbol.

Das Symbol befindet sich links neben dem Text mit einer kleinen Lücke zwischen den beiden, bereitgestellt von margin-right auf dem Symbol. Es gibt jedoch ein Problem. da dies nur funktioniert, wenn die Textrichtung von links nach rechts ist. Wenn sich die Textrichtung in linksläufig ändert, also z. B. in Sprachen wie Arabisch, wird das Symbol am Text platziert.

Wie wird das im Preisvergleichsportal berücksichtigt? Mit logischen Eigenschaften können Sie solche Situationen beheben. Neben vielen weiteren Vorteilen wird die Internationalisierung durch das Tool kostenlos und automatisch unterstützt. Sie helfen Ihnen, ein widerstandsfähigeres, inklusiveres Frontend zu erstellen.

Terminologie

Die physischen Eigenschaften von oben, rechts, unten und links beziehen sich auf die physischen Abmessungen des Darstellungsbereichs. Sie können sich diese wie eine Kompassrose auf einer Karte vorstellen. Logische Eigenschaften hingegen beziehen sich auf die Ränder einer Box, da sie sich auf den Inhaltsfluss beziehen. Daher können sie sich ändern, wenn sich die Textrichtung oder der Schreibmodus ändert. Das ist ein großer Wandel von Richtungsstile, und gibt uns bei der Gestaltung unserer Benutzeroberflächen viel mehr Flexibilität.

Ablauf blockieren

Der Blockfluss ist die Richtung, in der Inhaltsblöcke platziert werden. Wenn es beispielsweise zwei Absätze gibt, wird der zweite Absatz in den Blockablauf eingefügt. In einem englischen Dokument verläuft der Blockablauf von oben nach unten. Stellen Sie sich dies im Kontext von Textabsätzen vor, die aufeinander folgen, von oben nach unten.

Drei Blöcke, div-Elemente, mit einem Abwärtspfeil und der Bezeichnung „Blockablauf“

Inline-Ablauf

Der Inline-Ablauf bestimmt den Textfluss in einem Satz. In einem englischen Dokument ist der Inline-Ablauf von links nach rechts dargestellt. Wenn Sie die Dokumentsprache Ihrer Webseite in Arabisch (<html lang="ar">) ändern, wäre der Inline-Flow von rechts nach links.

Aus drei Worten: „Sie verkauft Muscheln“, zusammen mit einem Pfeil von links nach rechts und dem Label „Inline-Flow“.

Der Text fließt in die vom Schreibmodus des Dokuments vorgegebene Richtung. Mit der Eigenschaft writing-mode können Sie die Richtung ändern, in der Text dargestellt wird. Dies kann auf das gesamte Dokument oder auf einzelne Elemente angewendet werden.

Fluss relativ

Früher haben wir in CSS konnten wir Eigenschaften wie den Rand nur relativ zur Seitenrichtung anwenden. Beispielsweise wird margin-top auf die physische Oberseite des Elements angewendet. Mit logischen Attributen wird margin-top zu margin-block-start. Das bedeutet, dass unabhängig von Sprache und Textrichtung Der Blockfluss hat geeignete Randregeln.

Ein Diagramm, das die verschiedenen Größen einer Box zeigt und wo jeder Abschnitt der Größen beginnt und endet

Größe

Um zu verhindern, dass ein Element eine bestimmte Breite oder Höhe überschreitet, schreiben Sie eine Regel wie diese:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

Die flussrelativen Entsprechungen sind max-inline-size und max-block-size. Sie können auch min-block-size und min-inline-size anstelle von min-height und min-width verwenden.

Bei logischen Attributen würde diese Regel für maximale Breite und Höhe so aussehen:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

Start und Ende

Anstatt Richtungen wie oben, rechts, unten und links zu verwenden, „start“ und „end“. Dies gibt Ihnen die Optionen block-start, Inline-end, block-end und inline-start. Damit können Sie CSS-Eigenschaften anwenden, die auf Änderungen des Schreibmodus reagieren.

Um Text rechtsbündig auszurichten, können Sie beispielsweise diesen CSS-Code verwenden:

p {
  text-align: right;
}

Wenn Ihr Ziel nicht darin besteht, sich mit dem physischen Recht abzugleichen, sondern am Anfang der Leserichtung. ist das nicht hilfreich. Bei logischen Werten gibt es hilfreichere start- und end-Werte, die der Textrichtung zugeordnet sind. Die Textausrichtungsregel sieht jetzt so aus:

p {
  text-align: end;
}

Abstände und Positionierung

Logische Attribute für margin, padding und inset das Positionieren von Elementen zu erleichtern und zu bestimmen, wie diese Elemente in verschiedenen Schreibmodi miteinander interagieren. Die Eigenschaften für Rand und Padding sind immer noch direkte Zuordnungen zur Route. aber der Hauptunterschied besteht darin, dass sie sich mit dem Schreibmodus ändern, wenn sie sich ändern.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

Dadurch wird mit padding vertikal ein Innenraum hinzugefügt und mit margin von links nach außen geschoben. Das Attribut top verschiebt ihn auch nach unten. Mit Entsprechungen logischer Eigenschaften würde dies stattdessen so aussehen:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

Dadurch wird Inline-Bereich mit padding eingefügt und aus dem Inline-Start mit margin herausgegeben. Das Attribut inset-block verschiebt es vom Blockanfang nach innen.

Das Attribut inset-block ist nicht die einzige Kurzschreibweise mit logischen Attributen. Diese Regel kann noch weiter verdichtet werden, Kurzversionen der Eigenschaften margin und Padding.

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

Rahmen

Das Hinzufügen von border und border-radius kann auch über logische Attribute erfolgen. Um unten und rechts einen Rahmen mit einem Radius auf der rechten Seite hinzuzufügen, können Sie eine Regel wie diese schreiben:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

Oder Sie könnten logische Eigenschaften wie diese verwenden:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

Die end-end in border-end-end-radius ist das Blockende und das Inline-Ende.

Einheiten

Logische Attribute bringen zwei neue Einheiten mit sich: vi und vb. Eine vi-Einheit entspricht 1% der Größe des Darstellungsbereichs in Inline-Richtung. Das nicht logische Attributäquivalent ist vw. Die Einheit vb entspricht 1% des Darstellungsbereichs in Blockrichtung. Das nicht logische Attributäquivalent ist vh.

Diese Einheiten entsprechen immer der Leserichtung. Wenn ein Element beispielsweise 80% des verfügbaren Inline-Bereichs eines Darstellungsbereichs einnehmen soll, Wenn Sie die Einheit vi verwenden, wird die Schriftgröße automatisch von oben nach unten geändert, wenn der Schreibmodus vertikal ist.

Logische Attribute pragmatisch verwenden

Logische Eigenschaften und Schreibmodi dienen nicht nur der Internationalisierung. Damit lässt sich eine vielseitigere Benutzeroberfläche erstellen.

Wenn Sie ein Diagramm mit Beschriftungen auf der X-Achse und der Y-Achse haben, soll der Text auf dem Y-Label vertikal gelesen werden.

Da das Label der Y-Achse in der Demo den writing-mode vertical-rl hat, können Sie für beide Labels dieselben margin-Werte verwenden. Der Wert margin-block-start gilt für beide Labels da der Anfang des Blocks auf der Y-Achse rechts und auf der X-Achse oben ist. Die Seiten am Anfang des Blocks sind rot umrandet.

Symbolproblem lösen

Nachdem wir nun logische Eigenschaften behandelt haben, dieses Wissen auf das Designproblem anwenden können, mit dem wir angefangen haben.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

Der Rand wurde rechts neben dem Symbolelement angewendet. Damit der Abstand zwischen Symbol und Text alle Leserichtungen berücksichtigt, muss stattdessen das Attribut margin-inline-end verwendet werden.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

Unabhängig von der Leserichtung wird sich das Symbol positionieren und dementsprechende Abstände platzieren.

Wissen testen

Ihr Wissen über logische Eigenschaften testen

Wenn du mit deiner Hand schreibst, bewegt sich dein Handgelenk entlang welcher logischen Achse?

inline
Der Text fließt direkt in den Text. Sie müssen sich also beim Schreiben mit Ihrer Hand bewegen.
block
Der Inhalt fließt in Blöcken und dein Handgelenk bewegt sich entlang dieser Achse, wenn ein Inhaltstyp endet und ein anderer beginnt.

Alle Elemente auswählen, die von logischen Eigenschaften profitieren können

Farben
Die Farbe ändert sich im Schreibmodus für Dokumente nicht.
Ausrichtung
Beispiele: flex-start, block-end und inline-start
Schatten
Im Schreibmodus eines Dokuments ändern sich keine Schatten.
Kastenseiten
Beispiele: block-start und inline.
Größen
Beispiele: inline-size und max-block-size.
Rechtecke
Beispiele: border-end-end-radius.

Welche logische Seite eines Wortes wird unterstrichen?

Inline-Start
Dadurch würden Sie das englische Wort links unterstreichen.
Inline-Ende
Dadurch würde das englische Wort rechts unterstrichen.
Blockbeginn
Damit wird ein englisches Wort unterstrichen.
Blockende
Sehr schön, dass CSS diese Positionierung übernimmt.