dir='rtl'Wiele serwisów internetowych występuje w więcej niż jednym języku. Należy zwrócić uwagę, że budowa witryny obsługującej kilka języków nie polega tylko na tłumaczeniu czy lokalizacji. Taka konstrukcja witryny wymaga dodatkowych działań związanych z internacjonalizacją.

W swojej pracy dość często spotykamy się z serwisami wielojęzycznymi, które potrafią przyprawić o ból głowy specjalistów SEO i webdeveloperów. Dlatego warto wypracować sobie wytyczne projektowania oraz optymalizowania witryn międzynarodowych.

Wskazówki zawarte w artykule są uzupełnieniem wytycznych optymalizacji witryn multiregionalnych i wielojęzycznych dla wyszukiwarek internetowych.

Internacjonalizacja a lokalizacja serwisu internetowego

Różnica między internacjonalizacją a lokalizacją jest następująca. Internacjonalizacja (I18N) polega na takim zaprojektowaniu serwisu internetowego, aby możliwa była jego adaptacja dla różnych języków i regionów bez konieczności zmian technicznych. Lokalizacja (L10N) zaś to sam proces dostosowywania zinternacjonalizowanej witryny internetowej do konkretnego regionu lub języka.

Wskazówki dla witryn międzynarodowych

Zapewniaj lokalizację stron w znacznikach, a nie w arkuszach stylów

Język i kierunek wyświetlania tekstu są nierozłącznie związane z zawartością dokumentu. Dlatego zawsze kiedy to możliwe, zamiast arkuszy stylów, należy używać znaczników HTML w celach internacjonalizacji serwisu internetowego. Atrybuty lang i dir powinny zostać wykorzystane przynajmniej w elemencie html: <html lang="ar" dir="rtl">

Należy unikać własnych rozwiązań polegających na tworzeniu specjalnych klas czy identyfikatorów. Specyfikacja CSS określa, iż zgodne z wymaganiami mogą być ignorowane właściwości takie, jak direction czy unicode-bidi.

Sytuacja wygląda inaczej w przypadku języka XML. XML nie dostarcza specjalnych znaczników internacjonalizacji, więc w tym przypadku zalecane jest wykorzystanie w tym celu CSS.

Używaj jednego arkusza stylów dla wszystkich lokalizacji

Zamiast tworzyć oddzielne arkusze stylów dla kierunków wyświetlania tekstu LTR (od lewej do prawej) i RTL (od prawej do lewej) czy nawet dla każdego języka z osobna, należy zebrać wszystko w jednym arkuszu stylów. Dzięki temu reguły internacjonalizacji są łatwiejsze do zrozumienia i konfigurowania.

Wykorzystuj selektor atrybutu dir=’rtl’

Aby możliwe było zebranie wszystkich reguł w jednym arkuszu stylów, należy stosować odpowiedni sposób określania elementów, których formatowanie zależy od kierunku wyświetlania tekstu. W większości współczesnych przeglądarek internetowych wystarczy użycie [dir=’rtl’], jak w przykładzie:


#sidebar {
float: right;
margin: 0 0 1em 1em;
}

[dir='rtl'] #sidebar {
float: left;
margin: 0 1em 1em 0;
}

Stosuj pseudoklasę :lang()

W celu określenia formatowania dokumentów w określonym języku, należy wykorzystywać pseudoklasę :lang(). Na przykład jeśli okaże się, że pogrubienie czcionki w dokumentach w języku chińskim nie wygląda dobrze, można wyłączyć je w następujący sposób:


:lang(zh) strong,
:lang(zh) b {
font-weight: normal;
}

Odzwierciedlaj wszystkie wartości związane z kierunkiem tekstu

Należy zwrócić uwagę, aby stworzyć lustrzane odbicie wszystkich wartości związanych z kierunkiem tekstu. Są to właściwości związane z obramowaniami (border), marginesami (margin), dopełnieniami (padding) oraz pozycjonowaniem elementów (float, text-align). Istnieją narzędzia ułatwiające to zadanie, takie jak CSSJanus.

Zwracaj uwagę na szczegóły

1. W zależności od kierunku wyświetlania tekstu, zmiany mogą wymagać: obrazki (np. strzałki, tło), wartości box-shadow i text-shadow, animacje JavaScript.

2. Domyślny zestaw czcionki (a czasem także jej krój) należy dostosować do zestawu znaków (alfabetu).

3. Korzystanie z wyspecjalizowanych selektorów [dir='rtl'] i [dir='ltr'] wymaga dużej ostrożności.

 
Źródło: 6 Quick Tips for International Websites