Umgang mit verschiedenen Schreibrichtungen

Was sind Schreibmodi?

Ein Schreibmodus in CSS bezieht sich darauf, ob der Text horizontal oder vertikal verläuft. Die writing-mode-Eigenschaft ermöglicht es uns, von einem Schreibmodus in einen anderen zu wechseln. Sie müssen nicht in einer Sprache arbeiten, die einen vertikalen Schreibmodus verwendet, um dies zu tun — Sie könnten den Schreibmodus auch aus kreativen Gründen für Teile Ihres Layouts ändern.

Im folgenden Beispiel haben wir eine Überschrift, die mit writing-mode: vertical-rl angezeigt wird. Der Text verläuft jetzt vertikal. Vertikaler Text ist in der Grafikdesign-Welt üblich und kann eine Möglichkeit sein, Ihrem Webdesign ein interessanteres Aussehen und Gefühl zu verleihen.

<h1>Play with writing modes</h1>

body {
  font-family: sans-serif;
  height: 300px;
}
h1 {
  writing-mode: vertical-rl;
  color: white;
  background-color: black;
  padding: 10px;
}

Die drei möglichen Werte für die writing-mode-Eigenschaft sind:

• horizontal-tb: Oben-nach-unten-Blockflussrichtung. Sätze verlaufen horizontal.
• vertical-rl: Rechts-nach-links-Blockflussrichtung. Sätze verlaufen vertikal.
• vertical-lr: Links-nach-rechts-Blockflussrichtung. Sätze verlaufen vertikal.

Die writing-mode-Eigenschaft legt in Wirklichkeit die Richtung fest, in der Blocklevel-Elemente auf der Seite angezeigt werden — entweder von oben nach unten, von rechts nach links oder von links nach rechts. Dies bestimmt dann die Richtung, in der Text in Sätzen fließt.

Schreibmodi und Block- und Inline-Layout

Wir haben bereits das Block- und Inline-Layout besprochen und die Tatsache, dass einige Dinge als Blockelemente und andere als Inline-Elemente angezeigt werden. Wie oben beschrieben, sind Block und Inline an den Schreibmodus des Dokuments gebunden und nicht an den physischen Bildschirm. Blöcke werden nur von oben nach unten auf der Seite angezeigt, wenn Sie einen Schreibmodus verwenden, der Text horizontal anzeigt, wie im Englischen.

Wenn wir uns ein Beispiel ansehen, wird dies klarer. In diesem nächsten Beispiel habe ich zwei Boxen, die eine Überschrift und einen Absatz enthalten. Die erste verwendet writing-mode: horizontal-tb, einen Schreibmodus, der horizontal und von oben nach unten verläuft. Die zweite verwendet writing-mode: vertical-rl; dies ist ein Schreibmodus, der vertikal und von rechts nach links verläuft.

<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
  </div>
  <div class="box vertical">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
  </div>
</div>

body {
  font-family: sans-serif;
  height: 300px;
}
.wrapper {
  display: flex;
}

.box {
  border: 1px solid #cccccc;
  padding: 0.5em;
  margin: 10px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Wenn wir den Schreibmodus wechseln, ändern wir, welche Richtung Block und welche Inline ist. In einem horizontal-tb-Schreibmodus verläuft die Blockrichtung von oben nach unten; in einem vertical-rl-Schreibmodus verläuft die Blockrichtung horizontal von rechts nach links. Die Blockdimension ist also immer die Richtung, in der Blöcke auf der Seite im verwendeten Schreibmodus angezeigt werden. Die Inlinedimension ist immer die Richtung, in der ein Satz verläuft.

Diese Abbildung zeigt die beiden Dimensionen in einem horizontalen Schreibmodus.

Diese Abbildung zeigt die beiden Dimensionen in einem vertikalen Schreibmodus.

Sobald Sie beginnen, sich mit CSS-Layouts zu befassen, insbesondere mit den neueren Layoutmethoden, wird diese Idee von Block und Inline sehr wichtig. Wir werden darauf später noch einmal zurückkommen.

Richtung

Neben dem Schreibmodus haben wir auch die Textrichtung. Wie oben erwähnt, werden einige Sprachen wie Arabisch horizontal, aber von rechts nach links geschrieben. Dies ist wahrscheinlich nichts, was Sie kreativ nutzen würden — wenn Sie etwas rechtsbündig ausrichten möchten, gibt es andere Möglichkeiten, dies zu tun — aber es ist wichtig, dies als Teil der Natur von CSS zu verstehen. Das Web ist nicht nur für Sprachen, die von links nach rechts angezeigt werden!

Da sich Schreibmodus und Textrichtung ändern können, beziehen sich neuere CSS-Layout-Methoden nicht auf links und rechts sowie oben und unten. Stattdessen sprechen sie von Start und Ende zusammen mit diesem Konzept von Inline und Block. Machen Sie sich darüber jetzt noch nicht zu viele Sorgen, aber behalten Sie diese Ideen im Hinterkopf, wenn Sie anfangen, sich mit Layouts zu beschäftigen; Sie werden es wirklich hilfreich finden, um CSS zu verstehen.

Logische Eigenschaften und Werte

Der Grund, warum wir an diesem Punkt Ihres Lernens über Schreibmodi und Richtung sprechen, ist der, dass wir bereits viele Eigenschaften betrachtet haben, die an die physischen Dimensionen des Bildschirms gebunden sind, und diese machen mehr Sinn bei einem horizontalen Schreibmodus.

Schauen wir uns unsere beiden Boxen noch einmal an — eine mit einem horizontal-tb-Schreibmodus und eine mit vertical-rl. Ich habe beiden Boxen eine width zugeordnet. Sie können sehen, dass, wenn sich die Box im vertikalen Schreibmodus befindet, sie immer noch eine Breite hat, was dazu führt, dass der Text überläuft.

<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
    <p>These boxes have a width.</p>
  </div>
  <div class="box vertical">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
    <p>These boxes have a width.</p>
  </div>
</div>

body {
  font-family: sans-serif;
  height: 300px;
}
.wrapper {
  display: flex;
}

.box {
  border: 1px solid #cccccc;
  padding: 0.5em;
  margin: 10px;
  width: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Was wir in diesem Szenario wirklich wollen, ist im Wesentlichen, die Höhe mit der Breite gemäß dem Schreibmodus zu tauschen. Wenn wir uns in einem vertikalen Schreibmodus befinden, möchten wir, dass sich die Box in der Blockdimension ausdehnt, genau wie im horizontalen Modus.

Um dies zu erleichtern, hat CSS kürzlich eine Reihe von zugeordneten Eigenschaften entwickelt. Diese ersetzen im Wesentlichen physische Eigenschaften — Dinge wie width und height — durch logische oder flussrelativierte Versionen.

Die Eigenschaft, die width im horizontalen Schreibmodus zugeordnet ist, wird inline-size genannt — sie bezieht sich auf die Größe in der Inlinedimension. Die Eigenschaft für height heißt block-size und ist die Größe in der Blockdimension. Sie können sehen, wie dies im folgenden Beispiel funktioniert, in dem wir width durch inline-size ersetzt haben.

<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
  <div class="box vertical">
    <h2>Heading</h2>
    <p>A paragraph demonstrating writing modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
</div>

.wrapper {
  display: flex;
}

.box {
  border: 1px solid #cccccc;
  padding: 0.5em;
  margin: 10px;
  inline-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Logische Rand-, Rahmen- und Auffülleigenschaften

In den letzten beiden Lektionen haben wir das CSS-Boxmodell und CSS-Rahmen gelernt. Bei den Rand-, Rahmen- und Auffülleigenschaften finden Sie viele Fälle von physischen Eigenschaften, zum Beispiel margin-top, padding-left und border-bottom. Genau wie wir Zuordnungen für Breite und Höhe haben, gibt es auch Zuordnungen für diese Eigenschaften.

Die margin-top-Eigenschaft wird margin-block-start zugeordnet — dies bezieht sich immer auf den Rand am Anfang der Blockdimension.

Die padding-left-Eigenschaft wird zu padding-inline-start zugeordnet, der Auffüllung, die zu Beginn der Inlinerichtung angewendet wird. Dies wird dort sein, wo Sätze in diesem Schreibmodus beginnen. Die border-bottom-Eigenschaft wird zu border-block-end zugeordnet, was dem Rahmen am Ende der Blockdimension entspricht.

Sie können unten einen Vergleich zwischen physischen und logischen Eigenschaften sehen.

Wenn Sie den Schreibmodus der Boxen ändern, indem Sie die writing-mode-Eigenschaft auf .box auf vertical-rl umschalten, werden Sie sehen, wie die physischen Eigenschaften an ihrer physischen Richtung bleiben, während die logischen Eigenschaften mit dem Schreibmodus wechseln.

Sie können auch sehen, dass die h2 ein schwarzes border-bottom hat. Können Sie herausfinden, wie dieser untere Rahmen immer unter dem Text in beiden Schreibmodi verlaufen kann?

<div class="wrapper">
  <div class="box physical">
    <h2>Physical Properties</h2>
    <p>A paragraph demonstrating logical properties in CSS.</p>
  </div>
  <div class="box logical">
    <h2>Logical Properties</h2>
    <p>A paragraph demonstrating logical properties in CSS.</p>
  </div>
</div>

.wrapper {
  display: flex;
  border: 5px solid #cccccc;
}

.box {
  margin-right: 30px;
  inline-size: 200px;
  writing-mode: horizontal-tb;
}

.logical {
  margin-block-start: 20px;
  padding-inline-end: 2em;
  padding-block-start: 2px;
  border-block-start: 5px solid pink;
  border-inline-end: 10px dotted rebeccapurple;
  border-block-end: 1em double orange;
  border-inline-start: 1px solid black;
}

.physical {
  margin-top: 20px;
  padding-right: 2em;
  padding-top: 2px;
  border-top: 5px solid pink;
  border-right: 10px dotted rebeccapurple;
  border-bottom: 1em double orange;
  border-left: 1px solid black;
}

h2 {
  border-bottom: 5px solid black;
}

Es gibt eine große Anzahl von Eigenschaften, wenn Sie alle einzelnen Rahmen-Langschreibweisen betrachten, und Sie können alle zugeordneten Eigenschaften auf der MDN-Seite für Logische Eigenschaften und Werte sehen.

Logische Werte

Wir haben uns bisher logische Eigenschaftsnamen angeschaut. Es gibt auch einige Eigenschaften, die physische Werte von top, right, bottom und left nehmen. Diese Werte haben ebenfalls Zuordnungen zu logischen Werten — block-start, inline-end, block-end und inline-start.

Zum Beispiel können Sie ein Bild nach links fließen lassen, um den Text um das Bild herum verlaufen zu lassen. Sie könnten left durch inline-start ersetzen, wie im folgenden Beispiel gezeigt.

Ändern Sie den Schreibmodus in diesem Beispiel auf vertical-rl, um zu sehen, was mit dem Bild passiert. Ändern Sie inline-start zu inline-end, um das Float zu ändern:

<div class="wrapper">
  <div class="box logical">
    <img
      alt="star"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
    <p>
      This box uses logical properties. The star image has been floated
      inline-start, it also has a margin on the inline-end and block-end.
    </p>
  </div>
</div>

.wrapper {
  display: flex;
}

.box {
  margin: 10px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  inline-size: 200px;
  writing-mode: horizontal-tb;
}

img {
  float: inline-start;
  margin-inline-end: 10px;
  margin-block-end: 10px;
}

Hier verwenden wir auch logische Randwerte, um sicherzustellen, dass der Rand an der richtigen Stelle ist, egal welcher Schreibmodus verwendet wird.

Sollten Sie physische oder logische Eigenschaften verwenden?

Die logischen Eigenschaften und Werte sind neuer als ihre physischen Entsprechungen und wurden daher erst kürzlich in Browsern implementiert. Sie können jede Eigenschaftsseite auf MDN überprüfen, um zu sehen, wie weit die Browserunterstützung zurückgeht. Wenn Sie nicht mehrere Schreibmodi verwenden, bevorzugen Sie möglicherweise vorerst die physischen Versionen. Letztendlich erwarten wir jedoch, dass die Leute zu den logischen Versionen für die meisten Dinge übergehen werden, da sie viel Sinn machen, wenn Sie auch beginnen, sich mit Layoutmethoden wie Flexbox und Grid zu beschäftigen.

Zusammenfassung

Die in dieser Lektion erklärten Konzepte werden in CSS immer wichtiger. Ein Verständnis der Block- und Inlinerichtung — und wie sich der Textfluss mit einem Wechsel des Schreibmodus ändert — wird in Zukunft sehr nützlich sein. Es wird Ihnen beim Verständnis von CSS helfen, selbst wenn Sie nie einen anderen Schreibmodus als einen horizontalen verwenden.