Raster, logische Werte und Schreibrichtungen
Eine der wichtigsten Funktionen des CSS-Rasterlayouts ist die Unterstützung verschiedener Schreibrichtungen, die in die Spezifikation integriert sind. In diesem Leitfaden betrachten wir diese Funktion des CSS-Rasterlayouts und anderer moderner Layoutmethoden und lernen dabei etwas über Schreibrichtungen und logische vs. physische Eigenschaften.
Logische und physische Eigenschaften und Werte
CSS ist voll von physischen Positionierungseigenschaften und Schlüsselwörtern – left und right, top und bottom. Im folgenden Codebeispiel positionieren wir ein Element mithilfe der absoluten Positionierung und verwenden die physischen inset properites als Offset-Werte, um das Element zu verschieben. Das Element befindet sich 20 Pixel vom oberen Rand und 30 Pixel vom linken Rand des Containers entfernt:
.container {
position: relative;
}
.item {
position: absolute;
top: 20px;
left: 30px;
}
<div class="container">
<div class="item">Item</div>
</div>
Dieses Beispiel verwendet die Eigenschaften left und right; dies sind nur zwei der vielen physische Eigenschaften in CSS. Wir können auch Ränder, Innenabstände und Rahmen mit physischen Eigenschaften hinzufügen, zum Beispiel margin-left und padding-left. Sie könnten auch die Verwendung physischer Schlüsselwörter sehen, z. B. wenn text-align: right verwendet wird, um Text nach rechts auszurichten.
Wir nennen diese Schlüsselwörter und Eigenschaften physisch, weil sie sich auf den Bildschirm beziehen, auf den Sie schauen. Links ist immer links, egal in welcher Richtung Ihr Text verläuft.
Probleme mit physischen Eigenschaften
Physische Eigenschaften können Probleme verursachen, wenn eine Website entwickelt wird, die in mehreren Sprachen funktionieren muss, einschließlich Sprachen, bei denen der Text von rechts nach links oder von oben nach unten fließt. Browser sind so konzipiert, dass sie Inhalte unabhängig von der Sprache korrekt anzeigen. Einige CSS-Funktionen können jedoch die Standardwerte des Browsers überschreiben und dazu führen, dass Inhalte weniger optimal angezeigt werden.
In diesem Beispiel wurde die Eigenschaft direction auf rtl gesetzt, was den Schreibmodus von der Standardeinstellung eines englischen Dokuments ltr umschaltet. Wir haben zwei Absätze. Diese sollten beide von rechts nach links fließen, weil der direction-Wert auf einem übergeordneten Element (<body>) gesetzt ist. Der erste Absatz hat text-align auf left gesetzt, sodass er sich am linken Rand seines Containers ausrichtet. Der zweite Absatz richtet sich nach rechts aus und fließt von rechts nach links.
body {
direction: rtl;
}
.left {
text-align: left;
}
Dies ist eine grundlegende Demonstration der Probleme, die auftreten können, wenn physische Werte und Eigenschaften in CSS verwendet werden. Wenn wir CSS mit physischen Eigenschaften und Schlüsselwörtern schreiben, teilt es dem Browser unsere Annahme darüber mit, wie der Text fließen wird, und verhindert, dass er alternative Schreibmodi behandelt.
Logische Eigenschaften und Werte
Logische Eigenschaften und Werte setzen keine Textrichtung voraus. Aus diesem Grund verwenden wir das Schlüsselwort start im CSS-Rasterlayout, um etwas mit dem Anfang eines Containers auszurichten. Bei der Arbeit mit englischen Inhalten wird start links sein, es muss jedoch nicht so sein. Das Wort start weist keinen physischen Ort auf, was es Websites ermöglicht, den Inhalt auf der rechten Seite zu beginnen, wenn Sprachen mit Schreibrichtung von rechts nach links, wie Arabisch, verwendet werden.
Block und Inline
Wenn wir logische statt physische Eigenschaften verwenden, sehen wir die Welt nicht als links nach rechts und von oben nach unten. Wir haben einen anderen Bezugspunkt. Dies ist der Punkt, an dem das Verständnis der Block- und Inline-Achsen, die im Leitfaden zur Rasterausrichtung eingeführt wurden, sehr nützlich wird. Wenn Sie das Layout in Bezug auf Block und Inline denken, wird der Arbeitsablauf im CSS-Rasterlayout verständlich.
CSS-Schreibrichtungen
Das Modul CSS-Schreibrichtungen beschreibt, wie Schreibrichtungen in CSS funktionieren. Diese Funktionen dienen nicht nur zur Unterstützung von Sprachen mit einer anderen Schreibrichtung als Englisch; sie können auch für kreative Zwecke verwendet werden. Die Beispiele in diesem Abschnitt verwenden die Eigenschaft writing-mode, um Änderungen am angewendeten Schreibrichtung auf unseren Raster vorzunehmen und dabei zu demonstrieren, wie logische Werte funktionieren.
writing-mode
Schreibrichtungen sind mehr als nur links nach rechts und rechts nach links Text, und die Eigenschaft writing-mode hilft uns, Text in anderen Richtungen darzustellen. Die Eigenschaft writing-mode kann folgende Werte haben:
horizontal-tbvertical-rlvertical-lrsideways-rlsideways-lr
Der Wert horizontal-tb, steht für "horizontal, von oben nach unten", ist der Standard für Text im Web. Es ist die Richtung, in die Sie diesen Leitfaden lesen. Die anderen Werte ändern, wie Text in unserem Dokument fließt und entsprechen den verschiedenen Schreibrichtungen weltweit.
Als Beispiel haben wir unten zwei Absätze. Der erste verwendet den Standardwert horizontal-tb, und der zweite verwendet vertical-rl. Im zweiten Schreibrichtung verläuft der Text weiterhin von links nach rechts, jedoch ist die Richtung des Textes jetzt vertikal — Inline-Text verläuft jetzt entlang der Seite, von oben nach unten.
<div class="wrapper">
<p class="horizontal-tb">
I have writing mode set to the default <code>horizontal-tb</code>
</p>
<p class="vertical-rl">I have writing mode set to <code>vertical-rl</code></p>
</div>
.horizontal-tb {
writing-mode: horizontal-tb;
}
.vertical-rl {
writing-mode: vertical-rl;
}
Schreibmodi in Rasterlayouts
Wenn dies auf ein Rasterlayout angewendet wird, können wir sehen, wie sich unser Verständnis der Block- und Inline-Achsen ändert, wenn der Schreibrichtung geändert wird.
Standard-Schreibmodus
In diesem Beispiel hat das Raster drei Spalten und zwei Reihenspuren. Dies bedeutet, dass es drei Spuren entlang der Blockachse gibt. Im Standardschreibmodus platziert das Raster automatisch Elemente beginnend oben links, entlang der Inline-Achse nach rechts bewegend, und füllt die drei Zellen der Inline-Achse aus. Es bewegt sich dann zur nächsten Zeile, erstellt eine neue Reihenspur und füllt weitere Elemente aus:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
Schreibmodus festlegen
Wenn wir writing-mode: vertical-lr zum Rastercontainer im vorherigen Beispiel hinzufügen, können wir sehen, dass die Block- und Inline-Achsen nun in eine andere Richtung verlaufen. Die Block- oder Column-Achse verläuft nun über die Seite von links nach rechts, während die Inline-Achse entlang der Seite verläuft und Zeilen von oben nach unten erstellt.
.wrapper {
writing-mode: vertical-lr;
}
Logische Werte für die Ausrichtung
Da sich die Block- und Inline-Achsen ändern können, beginnen die logischen Werte für die Ausrichtungseigenschaften mehr Sinn zu machen.
In diesem Beispiel verwenden wir die Ausrichtung (die Eigenschaften align-self und justify-self), um Elemente innerhalb eines Rasters auszurichten, das auf writing-mode: vertical-lr gesetzt ist. Die Eigenschaften start und end funktionieren genau so wie im Standardschreibmodus und bleiben logisch, während die Verwendung von links und rechts, oben und unten zur Ausrichtung von Elementen es nicht tun würde. Dies geschieht, nachdem wir das Raster sozusagen auf die Seite gedreht haben, wie hier:
.wrapper {
writing-mode: vertical-lr;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item1 {
grid-column: 1 / 4;
align-self: start;
}
.item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
align-self: start;
}
.item3 {
grid-column: 3;
grid-row: 2 / 4;
align-self: end;
justify-self: end;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
Wenn Sie sehen möchten, wie diese mit einer Schreibrichtung von rechts nach links sowie von oben nach unten funktionieren, ändern Sie vertical-lr zu vertical-rl, das eine vertikale Schreibrichtung von rechts nach links darstellt.
Automatische Platzierung und Schreibrichtungen
Wie wir in den vorherigen Beispielen gesehen haben, kann der Schreibrichtung die visuelle Richtung ändern, in der Elemente auf das Raster gesetzt werden. Elemente werden standardmäßig entlang der Inline-Achse platziert, wobei neue Zeilen in der Blockrichtung hinzugefügt werden. Wir haben jetzt gesehen, dass die Inline-Achse nicht immer von links nach rechts verläuft und die Block-Achse nicht immer von oben nach unten.
Zeilenbasierte Platzierung und Schreibrichtungen
Der Schlüsselpunkt, den Sie sich merken sollten, wenn Sie Elemente anhand von Zeilen nummer platzieren, ist, dass Zeile 1 die Startzeile und Zeile -1 die Endzeile ist, egal in welchem Schreibrichtung Sie sich befinden.
Zeilenbasierte Platzierung mit Text von links nach rechts
In diesem Beispiel haben wir ein Raster im Standard-ltr-Stil mit drei Elementen, die mit zeilenbasierter Platzierung positioniert sind.
- Element 1 beginnt bei Spaltenzeile 1 und spannt sich über eine Spur.
- Element 2 beginnt bei Spaltenzeile -1 und spannt sich bis -3.
- Element 3 beginnt bei Spaltenzeile 1 und spannt sich bis Spaltenzeile 3.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: -1 / -3;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
Zeilenbasierte Platzierung mit Text von rechts nach links
Wenn wir die Eigenschaft direction mit dem Wert rtl zum Raster-Container im vorherigen Beispiel hinzufügen, befindet sich Zeile 1 auf der rechten Seite des Rasters und Zeile -1 auf der linken Seite.
.wrapper {
direction: rtl;
}
Wenn Sie die Richtung Ihres Textes ändern, entweder für ganze Seiten oder für Teile von Seiten, und Zeilen verwenden, möchten Sie möglicherweise Ihre Zeilen benennen, um zu vermeiden, dass das Layout vollständig die Richtung wechselt. Für einige Dinge, zum Beispiel, wenn ein Raster Textinhalte enthält, könnte diese Umstellung genau das sein, was Sie wollen. Für andere Verwendungen möglicherweise nicht.
Die seltsame Reihenfolge der Werte in der grid-area-Eigenschaft
Sie können die Eigenschaft grid-area verwenden, um alle vier Zeilen eines Rasterbereichs als einen Wert anzugeben. Wenn Menschen dies zum ersten Mal sehen, sind sie oft überrascht, dass die Werte nicht in der gleichen Reihenfolge wie die Kurzschreibweise von margin sind – welche im Uhrzeigersinn läuft: oben, rechts, unten, links.
Die Reihenfolge der grid-area-Werte lautet:
grid-row-startgrid-column-startgrid-row-endgrid-column-end
Was im Englischen in der Schreibrichtung von links nach rechts bedeutet:
obenlinksuntenrechts
Das ist gegen den Uhrzeigersinn! Es ist das Gegenteil von dem, was wir für Ränder und Abstände tun. Wenn wir bedenken, dass grid-area die Welt als "Block und Inline" sieht, werden Sie feststellen, dass wir zuerst die beiden Startpunkte und dann die beiden Endpunkte setzen, was viel logischer erscheint, wenn man es weiß!
Gemischte Schreibrichtungen und Rasterlayout
Neben der Darstellung von Dokumenten in der richtigen Schreibrichtung für die Sprache können Schreibrichtungen kreativ in Dokumenten verwendet werden, die sonst ltr sind. In diesem Beispiel haben wir ein Rasterlayout mit einer Reihe von Links an einer Seite. Wir verwenden Schreibrichtungen (writing-mode: vertical-lr), um diese in der Spurenachse auf ihre Seite zu drehen:
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr auto;
font:
1em "Helvetica",
"Arial",
sans-serif;
}
nav {
writing-mode: vertical-lr;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em;
display: flex;
justify-content: space-between;
}
nav a {
text-decoration: none;
}
<div class="wrapper">
<div class="content">
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
bean chickweed potato bell pepper artichoke.
</p>
<p>
Nori grape silver beet broccoli kombu beet greens fava bean potato
quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
turnip greens parsnip. Sea lettuce water chestnut eggplant winter purslane
fennel azuki bean earthnut pea sierra leone bologi leek soko chicory
celtuce parsley jícama salsify.
</p>
</div>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
</div>
Physische Werte und logische Eigenschaften
Wenn Sie logische Rastereigenschaften mit physischen Eigenschaften kombinieren, denken Sie daran, dass physische Eigenschaften sich nicht entsprechend der Schreibrichtung ändern. In unserem Ausrichten von Elementen im CSS-Rasterlayout Leitfaden verwenden wir automatische Ränder, um ein Element von den anderen wegzuschieben; das verwendet physische Eigenschaften. Es gibt für die meisten physischen Eigenschaften logische Äquivalente, die Schreibrichtungen auf die gleiche Weise respektieren wie die Platzierungs- und Ausrichtungseigenschaften und -werte im Raster.
Ebenso können Sie beim Verwenden von absoluter Positionierung innerhalb eines Rasterbereichs logische inset properties verwenden, um Elemente innerhalb des Rasterbereichs zu platzieren. Beim Mischen von logischen und physischen Eigenschaften oder Werten sollten Sie die Spannung zwischen ihnen beachten. Beispielsweise müssen Sie möglicherweise Ihr CSS ändern, um eine Umstellung von ltr auf rtl zu bewältigen. Ihr Verständnis von Block und Inline durch Raster wird Ihnen helfen, CSS logische Eigenschaften und Werte zu verstehen.