Autor publikacji
Virtual Patriot - Administrator

text-orientation

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości text-orientation

Za pomocą właściwości text-orientation możemy określić orientację znaków tworzących pionowy tekst interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne 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

pozycja

dowolna

dziedziczenie

tak

wartość initial

mixed

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

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

Zobacz więcej informacji o interpretacji właściwości .

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

mixed

Wyjaśnienie

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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

upright

Wyjaśnienie

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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

sideways

Wyjaśnienie

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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>