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

tutoriale

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



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ż

Flexbox – właściwość justify-content Właściwość justify-content służy do wyrównywania elementów kontenera elastycznego (flexbox), właściwość jest wykorzystywana w sytuacji gdy elementy ni...
Figury geometryczne z użyciem CSS Pojawienie się CSS3 dało bardzo duże możliwości twórcą stron internetowych (ale nie tylko) a w połączenia z HTML5 zmieniło kodowanie stron w prawdziwe...
Zmiana koloru zaznaczenia właściwość CSS ::selecti... Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski (w zależn...
Umieszczanie grafiki jako tła strony Standardowo każda strona internetowa posiada białe tło. To czy budując stronę zatrzymamy ten kolor lub czy go zmienimy zależy tylko od nas. Jako nowe...