Witryny międzynarodowe – kilka porad dla webdeveloperów
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.
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.
