tutoriale
Dzisiaj zajmiemy się tematyką zmiany kierunku wyświetlania tekstu na stronie internetowej z pomocą direction i unicode-bidi. 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:
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.
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:
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>
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:
Przykładowe użycia:
Jak pokazują powyższe przykłady odwrócenie kolejności liter działa tylko dla „direction: rtl;”.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
| direction / unicode-bidi | 2.0 | 5.5 | 1.0 | 1.3 | 9.2 |
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.
Atrybut „dir” posiada kilka ustawień
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.
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.
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.
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…