Ostatnio edytowany:

text-orientation

Autor: Virtual Patriot

Opis właściwości text-orientation

Za pomocą właściwości text-orientation możemy określić orientację znaków tworzących tekst interesującego nas elementu HTML. Mowa tu o elemencie HTML posiadającym pionowy tryb zapisu treści.

Dodatkowe techniczne informacje o właściwości text-orientation

przeznaczenie

element HTML każdego typu posiadający pionowy tryb zapisu treści, lecz nie element HTML typu table-header-group, table-row-group, table-footer-group, table-row, table-column-group, table-column

dziedziczenie

tak

wartość initial

mixed

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości text-orientation

Firefox

tak

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak

Internet Explorer

nie

Edge

tak

Opis wartości właściwości text-orientation

mixed

Opis

Wartość mixed jest domyślną wartością właściwości text-orientation.

Domyślnie znaki tworzące tekst elementu HTML, który posiada pionowy tryb zapisu treści obrócone są o 90 stopni zgodnie z ruchem wskazówek zegara, lecz zasada ta nie tyczy się znaków tworzących tekst azjatycki.

Przykład

  text-orientation:mixed;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報

Znaki (nieazjatyckie) tworzące tekst przykładowego elementu "div", który posiada pionowy tryb zapisu treści zostały obrócone o 90 stopni zgodnie z ruchem wskazówek zegara.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        writing-mode:vertical-lr;
        -webkit-writing-mode:vertical-lr;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報
    </div>

  </body>
</html>

upright

Opis

Za pomocą wartości upright właściwości text-orientation możemy sprawić, że znaki tworzące tekst interesującego nas elementu HTML, który posiada pionowy tryb zapisu treści nie zostaną obrócone o 90 stopni zgodnie z ruchem wskazówek zegara.

Przykład

  text-orientation:upright;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報

Znaki tworzące tekst przykładowego elementu "div", który posiada pionowy tryb zapisu treści nie zostały obrócone o 90 stopni zgodnie z ruchem wskazówek zegara, ponieważ do wspomnianego elementu "div" została dodana właściwość "text-orientation" wraz z wartością "upright".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-orientation:upright;
        -webkit-text-orientation:upright;
        writing-mode:vertical-lr;
        -webkit-writing-mode:vertical-lr;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報
    </div>

  </body>
</html>

sideways

Opis

Za pomocą wartości sideways właściwości text-orientation możemy sprawić, że wszystkie znaki tworzące tekst interesującego nas elementu HTML, który posiada pionowy tryb zapisu treści zostaną obrócone o 90 stopni zgodnie z ruchem wskazówek zegara.

Przykład

  text-orientation:sideways;
to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報

Wszystkie znaki tworzące tekst przykładowego elementu "div", który posiada pionowy tryb zapisu treści zostały obrócone o 90 stopni zgodnie z ruchem wskazówek zegara, ponieważ do wspomnianego elementu "div" została dodana właściwość "text-orientation" wraz z wartością "sideways".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-orientation:sideways;
        -webkit-text-orientation:sideways;
        writing-mode:vertical-lr;
        -webkit-writing-mode:vertical-lr;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      to jest jakiś przykładowy tekst znajdujący się w obszarze zawartości tego elementu "div" 電報碼碼電報碼電報碼電報碼電報電報電報電報電報電報電報電報電報
    </div>

  </body>
</html>