tutoriale
by: Aurelia SypniewskaPosted on:

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

Czas czytania: 3 minut

Dzisiaj zajmiemy się tematyką zmiany kierunku wyświetlania tekstu na stronie internetowej. Domyślnie w Europie wyświetla się on od strony lewej do prawej. 

W tym monecie zastanawiacie się po co w ogóle to komu. Spokojnie odpowiedz jest prosta:

Dlaczego zmienia się kierunek pisania?

Jest tak dlatego, że nie wszystkie języki na świecie zapisuje się i czyta w tym samym kierunku. Polski język podobnie jak większość z alfabetem Łacińskim bądź potomny pisze się od lewej do prawej. Podczas gdy sprawa wygląda inaczej np. dla krajów Arabskich (tekst pisze się od prawej do lewej). 

Aktualnie do wyboru mamy kilka metod wpływania na kierunek tekstu. Poniżej omówię kilka z nich.

Jakie wartości przyjmuje direction

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 dla <div> wygląda następująco:

div {
    direction: rtl;
}

Deklaracja ta będzie działać również na inne obiekty blokowe jak <p>

Jak to działa w praktyce – przykłady

See the Pen ZEOBMjR by Aura (@Julka85) on CodePen.

Zmiana kierunku pisania liter unicode-bidi

Teraz kiedy już wiemy jak zmienić kierunek teksty zajmiemy się czymś bardziej skomplikowanym. Dodamy do właściwości direction właściwość CSS unicode-bidi. Połączenie razem tych właściwości pomoże nam zmienić sposób obsługi tekstu w dokumencie. 

Przykładowe użycie:

div {
  direction: rtl;
  unicode-bidi:normal;
}

Właściwość unicode-bidi przyjmuje wartości:

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

Przykładowe użycia:

See the Pen unicode-bidi by Aura (@Julka85) on CodePen.

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 w HTML z pomocą DIR

Atrybut „dir” służy do ustawiania kierunku wyświetlania tekstu. Jest on niezbędny do wyświetlania HTML w skryptach pisanych od prawej do lewej, czyli odwrotnie do tego jak pisze się w języku Polskim czy Angielskim. Takimi językami są np.

  • arabski,
  • hebrajski,
  • syryjski.

Atrybut „dir” posiada kilka ustawień

  • ltr – domyślny, kierunek wyświetlania tekstu od lewej do prawej
  • rtl  – kierunek od prawej do lewej
  • auto – pozwala przeglądarce ustalić kierunek tekstu na podstawie treści (zalecane tylko, jeśli kierunek tekstu jest nieznany)

W zależności od tego czy chcemy aby cała strona bądź tylko jej fragment podlegał działaniu atrybutu umieszczamy go w innym miejscu.

Cała strona od prawej do lewej

Jeżeli chcemy by cała strona była pisana od prawej do lewej to możemy atrybut umieścić przy znaczniku np:

<!DOCTYPE html>
 <html dir="rtl" lang="ar">
 <head>
 <meta charset="utf-8">
 ...

Dodanie w tym miejscu dir = „rtl” spowoduje, że elementy blokowe (np. div, p) i kolumny tabeli będą się zaczynać od prawej strony. A ich zawartość  będzie się wyświetlać od prawej do lewej. Czyli w przeciwnym kierunku niż „normalnie”. Oczywiście będzie to dotyczyć wszystkich elementów blokowych, chyba że kierunek zostanie w którymś nich zastąpiony.

Zmiana kierunku pisania tekstu dla elementu blokowego

Kierunek tekstu możemy także zmieniać bezpośrednio na elementach blokowych np:

Dodanie w tym miejscu dir = „rtl” spowoduje, że elementy blokowe (np. div, p) i kolumny tabeli będą się zaczynać od prawej strony. A ich zawartość  będzie się wyświetlać od prawej do lewej. Czyli w przeciwnym kierunku niż „normalnie”. Oczywiście będzie to dotyczyć wszystkich elementów blokowych, chyba że kierunek zostanie w którymś nich zastąpiony.

Zmiana kierunku pisania tekstu dla elementu blokowego

Kierunek tekstu możemy także zmieniać bezpośrednio na elementach blokowych np:

See the Pen Untitled by Aura (@Julka85) on CodePen.

W tym przypadku dodałam atrybut bezpośrednio w strukturę div

Źródła:
https://www.w3schools.com/cssref/pr_text_direction.asp
https://developer.mozilla.org/pl/docs/Web/CSS/direction
https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp
https://www.w3.org/International/questions/qa-html-dir
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi