Kierunek pisania tekstu właściwość direction / unicode-bidi [CSS]

tutoriale

Kategoria wpisu Kurs CSS, PHP, HTML, CSS, Tekst Tagi: , , on przez .



Reading Time: 2 minutes

Własność direction służy do ustawiana kierunku pisania tekstu.
Przydatna jest np. w przypadku kiedy chcemy napisać, stworzyć stronę w innym języku takim jak arabskim lub hebrajskim – w językach tych piszemy od prawej do lewej. Zachowuje przy tym możliwość formatowania tekstu.

direction przyjmuje wartości:

  • ltr – jest to domyślna. Tekst i inne elementy wyświetlają się od lewej do prawej,
  • rtl – tekst i inne elementy wyświetlają się od prawej do lewej czyli inaczej niż w języku polskim.
  • inherit – dziczy wartość z elementu nadrzędnego

Przykładowa deklaracja

Jak to działa – przykłady

Tekst przesunięty do prawej

Przykładowy tekst

Tekst przesunięty do lewej

Przykładowy tekst

Przykładowy tekst

Zmiana kierunku pisania liter unicode-bidi

Zmieniliśmy już kierunek pisania z pomocą CSS jednak litery nie są w dokładnie takim samym układzie jak wcześniej. W celu uzyskania również efektu lustrzanego odbicia wykorzystamy właściwość unicode-bidi.

Przykładowe użycie

Przyjmuje ona wartości:

  • normal – nie zmieniony tekst
  • embed – tworzy dodatkowy poziom osadzania
  • bidi-override – odwrócenie kolejności liter
  • initial – ustawia domyślną wartość
  • inherit – dziczy wartość z elementu nadrzędnego

Przykładowe użycia:

Przykładowy tekst

Przykładowy tekst

Przykładowy tekst

– unicode-bidi:normal; direction: ltr;

Przykładowy tekst

Przykładowy tekst

Przykładowy tekst

Jak pokazują powyższe przykłady odwrócenie kolejności liter działa tylko dla „direction: rtl;”.

Obsługa przez przeglądarki

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
direction / unicode-bidi2.05.51.01.39.2

Zmiana kierunku tekstu z pomocą HTML

Dużo popularniejszą metodą zmiany kierunku tekstu jest właściwość dir. W przeciwieństwie do właściwości CSS ma ona wpływ na kierunek tekstu w całym dokumencie.

Źródła:
https://www.w3schools.com/cssref/pr_text_direction.asp
https://developer.mozilla.org/pl/docs/Web/CSS/direction

Przeczytaj również

Pudełkowy model strony CSS – box-sizing Model pudełkowy jest jednym z najpopularniejszych sposobów budowania stron. Jak sama nazwa mówi składa się on z pudełek czyli mamy np. jeden duży kont...
Budujemy prostą stronę internetową cz. 2 W poprzedniej części kursu, która stanowiła coś w rodzaju wprowadzenia napisałam z jakiej technologi będę korzystać do zbudowania strony. http://ww...
Właściwość CSS – resize Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea). Właściwość resize jest ściśle powiąza...
Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...