Hinzufügen von RTL-Unterstützung zu Flexbox und CSS Grid

German (Deutsch) translation by Zhang Xiang Liang (you can also view the original English article)

Logische Eigenschaften definieren einen neuen Ansatz, der die Art und Weise ändert, wie wir mit Layouts in CSS arbeiten. Neben vielen anderen Vorteilen ermöglichen sie uns, Layouts, die auf logischen Eigenschaften basieren, eine RTL-Sprachunterstützung (von rechts nach links) hinzuzufügen: Flexbox und CSS-Grid.

In diesem Tutorial verwenden wir zwei Tuts+ Demos aus früheren Tutorials und konvertieren sie, um zu sehen, wie einfach es ist, logischen Layouts RTL-Unterstützung hinzuzufügen:

Lassen Sie uns zunächst kurz sehen, wie logische Eigenschaften in CSS funktionieren.

1. Logische Layouts und Inhaltsausrichtung

Das Hauptziel der logischen CSS-Eigenschaften besteht darin, Entwicklern das einfache Umblättern von Layouts zu ermöglichen, wenn sich die Eigenschaften des writing-mode oder der direction ändern. Angenommen, Sie haben eine LTR-Website (von links nach rechts) und möchten diese in ein RTL-Skript übersetzen, wie es mit Arabisch oder Hebräisch verwendet wird. Wenn Sie in Ihrem CSS konsistent logische Eigenschaften verwendet haben, müssen Sie nur die direction: rtl; Regel auf der Seite hinzufügen und das Layout wird automatisch umgedreht.

Logische Eigenschaften verwenden eher logische als physikalische Anweisungen, um Layouts zu definieren. Beispielsweise entspricht das Schlüsselwort start in LTR-Skripten wie Latin left, während es in RTL-Skripten right entspricht. In ähnlicher Weise entspricht end in LTR right und in RTL-Skripten left. Aus diesem Grund ist es einfach, Layouts, die auf logischen Dimensionen basieren, RTL-Unterstützung hinzuzufügen.

Die logischen CSS-Eigenschaften haben drei Hauptanwendungsfälle:

Flexbox (z.B. flex-start, flex-end)
CSS-Grid (z.B. grid-row-start, grid-row-end, grid-column-start, grid-column-end)
logische Entsprechungen häufig verwendeter Eigenschaften wie margin, padding, border, text-align und andere.

Wenn Sie Codebeispiele für die oben genannten Anwendungsfälle anzeigen möchten, lesen Sie meinen aktuellen Artikel über logische CSS-Eigenschaften.

CSS

Verwenden der logische CSS-Eigenschaften zur Steuerung des Layouts

Anna Monus

Lassen Sie uns nun sehen, wie wir die logischen Eigenschaften nutzen können, um der Flexbox und dem CSS-Grid RTL-Unterstützung hinzuzufügen.

2. Hinzufügen von RTL-Unterstützung zu Flexbox

Im folgenden Beispiel wird mit Flexbox ein Layout für eine Nachrichtenwebsite erstellt (hier finden Sie das vollständige Tutorial). Es hat eine zentrierte Überschrift und enthält ein paar Karten unterschiedlicher Größe. Die Demo verwendet zwei Medienabfragen: 800px und 1000px. Die Anordnung der Karten hängt davon ab, welche Größe des Ansichtsfensters Sie in der Demo sehen:

Um eine RTL-Version des CSS zu erstellen, müssen wir nur eine Regel hinzufügen:

* {
  direction: rtl;
}

Und wie Sie unten sehen können, wurde die Demo bei jeder Ansichtsfenstergröße perfekt umgedreht - nicht nur der Text, sondern auch das Layout:

Warum war es so einfach dies zu tun?

Wenn in CSS-Layouts physische Anweisungen verwendet werden, können diese Ihre RTL-Bemühungen häufig durcheinander bringen. Wenn Sie sich das unten stehende CSS ansehen, werden Sie feststellen, dass keine physischen Anweisungen verwendet werden. Daher war es so einfach, das Layout umzudrehen (Textdekorationsregeln wie Schriftarten und Farben wurden aus Gründen der besseren Lesbarkeit aus dem Code entfernt):

.header {
  padding: 40px 0 20px;
  text-align: center;
}

.header h2 a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.main {
  margin: 0 auto;
  max-width: 1040px;
  padding: 10px;
}

.column {
  flex: 1;
  flex-direction: column;
}

.article {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-basis: auto;
  margin: 10px;
}

.article-image {
  display: block;
  padding-top: 75%;
  position: relative;
  width: 100%;
}

.article-image img {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.article-image.is-3by2 {
  padding-top: 66.6666%;
}

.article-image.is-16by9 {
  padding-top: 56.25%;
}

.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.article-title {
  flex-shrink: 0;
}

.article-content {
  flex: 1;
  margin-top: 5px;
}

.article-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

Flexbox kümmert sich um das gesamte Layout, und Flexbox-Eigenschaften sind logische Eigenschaften. Größen- und Ausrichtungseigenschaften wie border, margin, padding und width können in bestimmten Fällen Probleme verursachen, da sie sich auf physikalische und nicht auf logische Richtungen stützen. In der Demo wird beispielsweise die padding-top Eigenschaft im alten Stil anstelle des brandneuen logischen Äquivalents padding-block-start,verwendet.

Da wir jedoch eine LTR-zu-RTL-Konvertierung durchführen möchten, müssen wir nur die horizontale (links-rechts) Achse umdrehen, nicht jedoch die vertikale (oben-unten). Der obige Code enthält nur Eigenschaften, die vertikale Richtungen definieren, z. B. padding-top und border-bottom. Diese bleiben in beiden Layouts gleich.

Da der Code keine Eigenschaften enthält, die horizontale Richtungen definieren (z. B. padding-left wäre so eine Eigenschaft ), müssen wir sie nicht an RTL-Skripte anpassen.

3. So fügen Sie dem CSS-Grid RTL-Unterstützung hinzu

Sehen wir uns nun die CSS-Grid-Demo an. Es definiert ein asymmetrisches Layout, das auf dem CSS-Raster basiert (hier ist das vollständige Tutorial):

Fügen wir dem CSS dieselbe direction Regel hinzu und sehen, wie das ursprüngliche Layout geändert wird:

* {
  direction: rtl;
}

So wurde die Demo umgedreht:

Obwohl die meisten Elemente wie erwartet umgedreht wurden, fehlt etwas. Wenn Sie die beiden Demos sorgfältig vergleichen, können Sie feststellen, dass das Kronenabzeichen zwischen den Bildern und der Überschrift "Gibraltar“ verschwunden ist.

Also, wo ist die Krone?

Das CSS gibt uns die Antwort, warum die Krone fehlt. Sie ist immer noch da, aber vor dem Hintergrund versteckt. Hier ist der CSS-Code der Demo (ohne Regeln für Farbe, Schriftart und andere Textdekorationen):

blockquote {
  margin: 0 0 2em 0;
}

.cta {
  padding: 100px 0 100px 20%;
}

.cta h1 {   
  margin: 0 0 20px 0;
  position: relative;
}

.button {
  display: inline-block;
  padding: .8em 1.5em;
}

.strapline {
  margin-top: 100px;
  position: relative;
}

.strapline::before {
  content: '';
  display: block;
  background: url(wavy.svg) repeat-x;
  background-size: cover;
  width: 20%;
  height: .5em;
  position: absolute;
  top: -3em;
  left: 40%;
}

.cta h1::before {
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  background: url(badge.svg) no-repeat center center;
  background-size: 80%;
  position: absolute;
  left: -120px;
  top: 0;
}

/* Grid layout */
.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

.img1 {  
  background: url(wooden.jpg);
  background-size: cover;
  
  grid-column: 1 / span 2;
  grid-row: 2 / span 3;
}

.img2 {  
  background: url(speaker.jpg);
  background-size: cover;
  
  grid-column: 2 / span 2;
  grid-row: 3 / span 3;
}

.img3 {  
  background: url(waves.jpg);
  background-size: cover;
  
  grid-column: 5 / span 2;
  grid-row: 4 / span 2;
}

.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;

  padding: 0 16%;
  text-align: center;
  margin: 0;
}

.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

Der obige Code verwendet zahlreiche CSS-Rastereigenschaften wie grid-row, grid-column, grid-template-rows, und grid-template-columns. Da das CSS-Grid jedoch auf logischen und nicht auf physischen Dimensionen basiert, können gitterbezogene Eigenschaften nicht das Problem sein.

Das Problem ergibt sich aus anderen Eigenschaften, mit denen Elemente physisch in der horizontalen Dimension (links-rechts) positioniert werden:

.cta {
  padding: 100px 0 100px 20%;
}
.strapline::before {
  left: 40%;
}
.cta h1::before {
  left: -120px;
}

Um RTL-Skripte zu unterstützen, müssen wir left und right wie folgt umkehren:

.cta {
  padding: 100px 20% 100px 0;
}
.strapline::before {
  right: 40%;
}
.cta h1::before {
  right: -120px;
}

Wenn Sie sich die modifizierte RTL-Demo ansehen, können Sie sehen, dass die Krone wieder aufgetaucht ist und jetzt alles perfekt ausgerichtet ist:

Sie haben wahrscheinlich bemerkt, dass wir im modifizierten CSS anstelle der entsprechenden logischen Eigenschaft right verwendet haben. Dies liegt daran, dass die logischen Eigenschaften noch nicht produktionsbereit sind, da die Browserunterstützung noch etwas lückenhaft ist.

So würde das geänderte CSS jedoch mit dem logischen Äquivalent der right Eigenschaft aussehen:

.cta {
  padding: 100px 20% 100px 0;
}
.strapline::before {
  inset-inline-start: 40%;
}
.cta h1::before {
  inset-inline-start: -120px;
}

Das Äquivalent von right ist inset-inline-start in RTL-Skripten, da dies der Anfang der Inline-Achse ist. In LTR-Skripten entspricht inset-inline-start jedoch left, da in diesem Fall die Zeilen links auf dem Bildschirm beginnen.

Wenn also die ursprüngliche Demo die logische Eigenschaft inset-inline-start anstelle der physischen left Richtung verwendet hätte, hätten wir das Layout von LTR in RTL konvertieren können, ohne Regeln anpassen zu müssen.

Unten sehen Sie dieselbe RTL-Demo mit logischen Eigenschaften. Ich habe auch aus Gründen der Konsistenz von top auf inset-block-start umgestellt.

Fazit

Mit den logischen CSS-Eigenschaften können wir Skripte von rechts nach links einfacher als je zuvor unterstützen. Wir können Seiten, die auf Flexbox und CSS-Grid basieren, schnell RTL-Unterstützung hinzufügen, da es sich um logische Layouts handelt, die nicht auf physischen Richtungen wie links, rechts, oben und unten beruhen.

Neben RTL-Sprachen können wir auch logische Eigenschaften verwenden, um Schreibmodi von oben nach unten in vertikale Sprachskripte wie Japanisch zu konvertieren. Weitere Informationen finden Sie in meinem vorherigen Tutorial!