Schreibmodi und CSS-Layout

Dies ist kein Artikel über die praktische oder kreative Anwendung dieser Eigenschaft. Stattdessen möchte ich zeigen, warum das Verständnis der Schreibmodi so wichtig ist – selbst für diejenigen von uns, die selten den Schreibmodus einer Seite oder Komponente ändern müssen. Die Unterstützung mehrerer Schreibmodi ist der Schlüssel zu der Art und Weise, wie unsere neuen Layoutmethoden Flexbox und Grid Layout entworfen wurden. Wenn Sie dies verstehen, können Sie besser verstehen, wie diese Layoutmethoden funktionieren.

Was sind Schreibmodi?

Der Schreibmodus eines Dokuments oder einer Komponente bezieht sich auf die Richtung, in der Text fließt. Um mit Schreibmodi zu arbeiten, verwenden wir in CSS die Eigenschaft writing-mode . Diese Eigenschaft kann die folgenden Werte annehmen:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Wenn Sie diesen Artikel im Smashing Magazine auf Englisch lesen, dann ist der Schreibmodus dieses Dokuments horizontal-tb oder Horizontal Top To Bottom . Im Englischen werden Sätze horizontal geschrieben – der erste Buchstabe jeder Zeile beginnt links.

Eine Sprache wie Arabisch hat auch einen horizontal-tb Schreibmodus. Es wird horizontal von oben nach unten geschrieben, die arabische Schrift wird jedoch von rechts nach links geschrieben, sodass arabische Sätze rechts beginnen.

Chinesisch, Japanisch und Koreanisch werden vertikal geschrieben, wobei das erste Zeichen des ersten Satzes oben rechts steht. Folgende Sätze werden links hinzugefügt. Daher ist der verwendete Schreibmodus vertical-rl . Ein vertikaler Schreibmodus, der von rechts nach links verläuft.

Mongolisch wird auch vertikal geschrieben, aber von links nach rechts. Wenn Sie also mongolische Schrift setzen möchten, verwenden Sie den Schreibmodus vertical-lr .

Die anderen beiden Werte von writing-mode sind eher für kreative Zwecke gedacht als für das Setzen vertikaler Schriften. Die Verwendung von sideways-lr und sideways-rl dreht Text seitwärts – sogar Zeichen, die normalerweise vertikal und aufrecht geschrieben werden. Die Werte werden derzeit leider nur in Firefox unterstützt. Der folgende CodePen zeigt alle verschiedenen Werte von writing-mode , Sie müssen Firefox verwenden, wenn Sie die sideways-* in Aktion sehen möchten.

Schreibmodi können beim Erstellen eines Dokuments verwendet werden, das eine Sprache verwendet, die mit diesem Schreibmodus geschrieben wurde. Sie können auch kreativ verwendet werden, um beispielsweise eine Überschrift vertikal an der Seite eines Inhalts zu setzen. In diesem Artikel möchte ich jedoch einen Blick auf die Auswirkungen werfen, die die Unterstützung vertikaler Sprachen und die Möglichkeit von vertikalem Text auf das CSS-Layout und auf CSS im Allgemeinen hat.

Bevor ich dies tue – wenn Sie an der Verwendung von Schreibmodi für vertikalen Text interessiert sind – hier sind einige nützliche Ressourcen:

• Die W3C-Website zur Internationalisierung bietet eine Fülle nützlicher Informationen. Lesen Sie mehr über RTL-Skripte und vertikalen Text.
• Jen Simmons hat einen ausgezeichneten Artikel über CSS-Schreibmodi geschrieben, der auch mehrere Druckbeispiele dieser verwendeten Modi enthält.
• Gedanken über die Welt und unsere Schriftsysteme - Chen Hui Jing
• Vertikaler Satz mit überarbeitetem Schreibmodus - Chen Hui Jing
• Die Eigenschaft writing-mode auf MDN

Die Block- und Inline-Dimensionen

Wenn wir den Schreibmodus eines Dokuments ändern, ändern wir die Richtung des Blockflusses . Daher wird es für uns schnell sehr nützlich zu verstehen, was mit Block und Inline gemeint ist.

Eines der ersten Dinge, die wir über CSS lernen, ist, dass einige Elemente Blockelemente sind, zum Beispiel ein Absatz. Diese Elemente werden in Blockrichtung nacheinander angezeigt. Inline-Elemente, wie z. B. ein Wort in einem Satz, werden nacheinander in Inline-Richtung angezeigt. Wenn wir in einem horizontalen Schreibmodus arbeiten, gewöhnen wir uns daran, dass die Blockdimension vertikal von oben nach unten und die Inline-Dimension horizontal von links nach rechts verläuft.

Da sich Block- und Inline-Elemente auf den Schreibmodus unseres Dokuments beziehen, ist die Inline-Dimension jedoch nur dann horizontal, wenn wir uns in einem horizontalen Schreibmodus befinden. Es bezieht sich nicht auf die Breite, sondern auf die Inline-Größe. Die Blockabmessung ist nur im horizontalen Schreibmodus vertikal. Es bezieht sich also nicht auf die Höhe, sondern auf die Blockgröße.

Logische, flussbezogene Eigenschaften

Diese Begriffe, Inline-Größe und Blockgröße, werden auch als Namen neuer CSS-Eigenschaften verwendet, die entworfen wurden, um unsere neue Schreibmodus-bewusste Welt widerzuspiegeln. Wenn Sie in einem horizontalen Schreibmodus die Eigenschaft inline-size anstelle von width verwenden, verhält sie sich genauso wie width - bis Sie den Schreibmodus Ihrer Komponente umschalten. Wenn Sie width verwenden, die immer eine physikalische Abmessung ist, entspricht sie immer der horizontalen Größe der Komponente. Wenn Sie inline-size verwenden, ist dies die Größe in der Inline-Dimension, wie das folgende Beispiel zeigt.

Dasselbe gilt für die height . Die height ist immer die vertikale Größe. Es bezieht sich darauf, wie hoch der Gegenstand ist. Die Eigenschaft block-size hingegen gibt die Größe in der Blockdimension an, vertikal wenn wir uns in einem horizontalen Schreibmodus befinden und horizontal in einem vertikalen.

Wie ich in meinem Artikel „Logische Eigenschaften und Werte verstehen“ beschrieben habe, gibt es Mappings für alle physikalischen Eigenschaften, die an die Abmessungen des Bildschirms gebunden sind. Sobald Sie darüber nachdenken, wird so viel CSS in Bezug auf das physische Layout eines Bildschirms spezifiziert. Wir legen Positionierung, Ränder, Polsterung und Ränder mit oben, rechts, unten und links fest. Wir schweben Dinge nach links und rechts. Manchmal möchten wir Dinge an die physische Dimension binden, aber wir denken zunehmend über unsere Layouts ohne Bezug auf den physischen Ort nach. Die Logical Properties and Values-Spezifikation führt diese Schreibmodus-agnostische Arbeitsweise quer durch CSS ein.

Schreibmodi, Raster und Flexbox

Als unsere neuen Layout-Methoden auf den Markt kamen, brachten sie eine agnostische Sichtweise auf den Schreibmodus der Komponente mit sich, die als Flex- oder Grid-Layout ausgelegt wurde. Zum ersten Mal wurden die Leute gebeten, über Anfang und Ende nachzudenken, anstatt über links und rechts, oben und unten.

Als ich anfing, zum Thema CSS Grid zu präsentieren, waren meine frühen Präsentationen ein Überblick über alle Eigenschaften in der Spezifikation. Ich habe erwähnt, dass die Eigenschaft grid-area verwendet werden kann, um alle vier Zeilen so einzustellen, dass sie ein Rasterelement platzieren. Die Reihenfolge dieser Zeilen war jedoch nicht die bekannte oben, rechts, unten und links, die wir verwenden, um alle vier Ränder festzulegen. Stattdessen müssen wir oben, links, unten, rechts verwenden – in umgekehrter Reihenfolge! Bis ich die Verbindung zwischen Raster und Schreibmodus verstanden hatte, schien dies eine sehr seltsame Entscheidung zu sein. Mir wurde klar, dass wir beide Startlinien setzen, dann beide Endlinien. Die Verwendung von oben, rechts, unten und links würde gut funktionieren, wenn wir uns in einem horizontalen Schreibmodus befinden, das Gitter jedoch auf die Seite drehen, und das macht keinen Sinn. Wenn wir grid-area: 1 / 2 / 3 / 5; Wie im Stift unten sind die Linien wie folgt gesetzt:

• grid-row-start: 1; - Blockstart
• grid-column-start: 2 - Inline-Start
• grid-row-end: 3 - Blockende
• grid-column-end: 5 - Inline-Ende

Flexbox-Zeilen und -Spalten

Wenn Sie Flexbox verwenden und display: flex zu einem Container hinzufügen, werden Ihre Elemente als Zeile angezeigt, da der Anfangswert der Eigenschaft flex-direction row ist. Eine Zeile folgt der Inline-Dimension des verwendeten Schreibmodus. Wenn Ihr Schreibmodus also horizontal-tb ist, verläuft eine Zeile horizontal. Wenn die Textrichtung des aktuellen Skripts von links nach rechts ist, werden die Elemente von links beginnend ausgerichtet, wenn es von rechts nach links ist, werden sie rechts beginnend ausgerichtet.

Verwenden Sie jedoch einen vertikalen Schreibmodus, z. B. vertical-rl und flex-direction: row bewirkt, dass die Elemente vertikal angeordnet werden, da die Inline-Richtung vertikal ist. In diesem nächsten CodePen haben alle Beispiele flex-direction: row , nur der Schreibmodus oder die Schreibrichtung hat sich geändert.

Fügen Sie flex-direction: column und das Elementlayout in der Blockdimension Ihres Schreibmodus hinzu. In einem horizontalen Schreibmodus verläuft die Blockabmessung von oben nach unten, sodass eine Spalte vertikal ist. Bei einem Schreibmodus von vertical-rl ist eine Spalte horizontal. Wie beim vorherigen Beispiel besteht der einzige Unterschied zwischen den folgenden Flex-Layouts im verwendeten Schreibmodus.

Automatische Rasterplatzierung

Wenn Sie die automatische Platzierung im Raster verwenden, sehen Sie ein ähnliches Verhalten wie im Flex-Layout. Rasterelemente werden automatisch entsprechend dem Schreibmodus des Dokuments platziert. Standardmäßig werden Elemente in Reihen platziert, was die Inline-Richtung ist – horizontal in einem horizontalen Schreibmodus und vertikal in einem vertikalen.

Versuchen Sie, den Fluss der Elemente wie im folgenden Beispiel in eine column zu ändern. Die Items fließen nun in der Blockdimension – vertikal in einem horizontalen Schreibmodus und horizontal in einem vertikalen.

Rasterlinienplatzierte Platzierung

Die zeilenbasierte Platzierung berücksichtigt auch den Schreibmodus. Die Zeilen unseres Rasters beginnen bei 1, sowohl für Zeilen als auch für Spalten. Wenn wir ein Element von Spaltenzeile 1 bis Spaltenzeile 3 positionieren und uns in einem horizontalen Schreibmodus mit einer Richtung von links nach rechts befinden, erstreckt sich dieses Element von der äußersten linken Spaltenzeile horizontal über zwei Gitterspuren. Also zwei Spalten überspannend.

Ändern Sie den Schreibmodus auf vertical-rl und die Spaltenlinie 1 befindet sich oben im Raster, das Element erstreckt sich vertikal über zwei Spuren. Überspannt immer noch zwei Säulen, aber die Säulen verlaufen jetzt horizontal.

Ausrichtung in Raster und Flexbox

Einer der ersten Orte, an denen viele Leute mit der Art und Weise in Kontakt gekommen sind, wie Flexbox mit Schreibmodi umgegangen ist, wäre das Ausrichten von Elementen in einem Flex-Layout. Wenn wir das obige Beispiel für flex-direction: row nehmen und die Eigenschaft justify-content verwenden, um alle Elemente an flex-end auszurichten, werden die Elemente an das Ende ihrer Zeile verschoben. Das bedeutet, dass in einem horizontalen Schreibmodus mit Richtung von links nach rechts alle Elemente nach rechts verschoben werden, da das Ende dieser Reihe auf der rechten Seite ist. Wenn die Richtung von rechts nach links ist, bewegen sie sich alle nach links.

Im vertikalen Schreibmodus bewegen sie sich nach unten, sofern Platz dafür vorhanden ist. Ich habe für die Komponenten in diesem Beispiel eine inline-size festgelegt, um sicherzustellen, dass wir in unseren Flex-Containern freien Platz haben, um die Ausrichtung in Aktion zu sehen.

Die Ausrichtung ist im Rasterlayout etwas einfacher zu verstehen, da wir immer mit den beiden Achsen spielen müssen. Grid ist zweidimensional, diese beiden Dimensionen sind Block und Inline. Daher können Sie sich eine Regel merken, wenn Sie wissen möchten, ob Sie die Eigenschaften verwenden sollen, die mit align- oder die mit justify- beginnen. Im Grid-Layout werden die align- -Eigenschaften:- align-content , align-items , align-self verwendet, um die Blockachsenausrichtung durchzuführen. Bei einem horizontalen Schreibmodus bedeutet das vertikal und bei einem vertikalen Schreibmodus horizontal.

Auch hier verwenden wir nicht links und rechts oder oben und unten, da wir möchten, dass unser Rasterlayout unabhängig vom Schreibmodus genau gleich funktioniert. Also richten wir uns mit start und end aus. Wenn wir ausrichten, start mit der Blockdimension zu beginnen, ist das top , wenn es in horizontal-tb ist, aber es ist right , wenn es in vertical-rl . Schauen Sie sich das Beispiel unten an, die Ausrichtungswerte sind in beiden Rastern identisch, der einzige Unterschied ist der verwendete Schreibmodus.

Die Eigenschaften justify-content , justify-items , justify-self werden immer für die Inline-Ausrichtung im Grid-Layout verwendet. Das ist horizontal in einem horizontalen Schreibmodus und vertikal in einem vertikalen Schreibmodus.

Die Flexbox-Ausrichtung wird etwas dadurch erschwert, dass die Hauptachse von Zeile zu Spalte umgeschaltet werden kann. Daher müssen wir in Flexbox über die Ausrichtungsmethode als Hauptachse im Vergleich zur Querachse nachdenken. Die align- Eigenschaften werden auf der Querachse verwendet. Auf der Hauptachse haben Sie nur justify-content da wir Elemente als Gruppe in Flexbox behandeln. Auf der Querachse können Sie align-content in Fällen verwenden, in denen Sie mehrere Flex-Linien und Platz im Flex-Container haben, um sie zu verteilen. Sie können auch align-items und align-self verwenden, um die Flex-Items auf der Querachse im Verhältnis zueinander und zu ihrer Flex-Linie zu verschieben.

Weitere Informationen zur Ausrichtung im CSS-Layout finden Sie in meinen vorherigen Smashing Magazine-Artikeln:

• So richten Sie Dinge in CSS aus
• Alles, was Sie über die Ausrichtung in Flexbox wissen müssen

Schreibmodus-Bewusstsein und älteres CSS

Nicht das gesamte CSS hat diese flussbezogene, schreibmodusagnostische Arbeitsweise vollständig eingeholt. Die Stellen, an denen es nicht auffällt, fallen umso mehr auf, je mehr man an Block und Inline, Start und Ende denkt. In einem mehrspaltigen Layout geben wir beispielsweise column-width an, was wirklich Spalten-Inline-Größe bedeutet, da es nicht auf die physische Breite abgebildet wird, wenn in einem vertikalen Schreibmodus gearbeitet wird.

Wie Sie sehen können, untermauern Schreibmodi vieles, was wir in CSS tun, auch wenn wir nie einen anderen Schreibmodus als horizontal-tb verwenden.

Ich finde es unglaublich hilfreich, über CSS-Layout auf diese schreibmodusunabhängige Weise nachzudenken. Während es vielleicht noch ein wenig früh ist, alle unsere Eigenschaften und Werte auf logische umzustellen, befinden wir uns bereits in einer flussbezogenen Welt, wenn wir uns mit neuen Layoutmethoden befassen. Wenn Ihr mentales Modell eines von Block und Inline, Start und Ende ist, anstatt an die vier Ecken Ihres Bildschirms gebunden zu sein, werden viele der Dinge verdeutlicht, auf die wir stoßen, wenn wir FlexBox und Grid verwenden.