Własność CSS writing-mode

Własność CSS writing-mode określa sposób rozmieszczenia wierszy tekstu – pionowo lub poziomo – oraz czy zawarty w nich tekst ma być pisany od lewej czy od prawej. Inaczej mówiąc, własność ta określa kierunek rozmieszczenia elementów blokowych oraz kierunek układania zawartej w nich treści śródliniowej.

Wartości i składnia

Własność writing-mode jako wartość przyjmuje jedno z następujących słów kluczowych.

horizontal-tb

Rozmieszczenie bloków poziome, treść śródliniowa układana od lewej.

vertical-rl

Rozmieszczenie bloków pionowe, treść śródliniowa układana od prawej.

vertical-lr

Rozmieszczenie bloków pionowe, treść śródliniowa układana od lewej.

sideways-rl

W przypadku typów pisma pisanych od lewej (ltr) treść jest układana pionowo od góry, a w przypadku typów pisma pisanych od prawej (rtl) treść jest układana pionowo od dołu. Wszystkie znaki są rozmieszczane do prawej.

sideways-lr

W przypadku typów pisma pisanych od lewej (ltr) treść jest układana pionowo od dołu, a w przypadku typów pisma pisanych od prawej (rtl) treść jest układana pionowo od góry. Wszystkie znaki są rozmieszczane do lewej.

Przykłady

Poniższe akapity będą rozmieszczone w orientacji pionowej od dołu, a ich zawartość będzie ułożona od prawej do lewej.

<style>
p {
  writing-mode: vertical-lr;
  width: 60px;
  height: 20px;
  outline: 1px solid black;
  margin: 10px;
  padding: 5px;
}
</style>
...
<p>A B C</p>
<p>D E F</p>
<p>G H I</p>
<p>J K L</p>

Efekt:

Podsumowanie