Niedziela, 11 września 2011 r.
Podbijasz świat i chcesz, aby Twoja strona internetowa dotrzymała Ci kroku. To powinno być całkiem proste – wystarczy przetłumaczyć tekst i już, prawda? Chyba jednak nie. Zespół webmasterów Google często tworzy witryny tłumaczone na ponad 40 języków. Oto kilka kwestii, które bierzemy pod uwagę, uruchamiając strony w innych językach i regionach.
Nawet jeśli uważasz, że to Cię nie dotyczy, bo oferujesz treści tylko w języku polskim, jest całkiem możliwe, że użytkownicy, którzy go nie znają, wyświetlają te materiały w swoim języku, korzystając z narzędzi takich jak Tłumacz Google. Związany z tym ruch powinien być widoczny w panelu Analytics, co pozwoli Ci oszacować, ilu użytkowników przegląda Twoją witrynę w nieoczekiwany sposób.
Więcej języków != więcej szablonów HTML
Zdecydowanie zalecamy to rozwiązanie: używaj tego samego szablonu we wszystkich wersjach językowych i zawsze dbaj o to, aby kod HTML szablonu był prosty.
Stosowanie takiego samego kodu HTML dla wszystkich języków ułatwia konserwację. Usuwanie błędów z kodu HTML w poszczególnych wersjach językowych to gra niewarta świeczki. Dlatego zadbaj o to, aby kod strony był możliwie czysty, a wszystkie problemy ze stylami rozwiązuj w arkuszach CSS. Wystarczy wymienić tylko jedną zaletę czystego kodu: większość narzędzi tłumaczeniowych wyodrębnia treść do przetłumaczenia z dokumentu HTML, a dobrze skonstruowany i prawidłowy kod HTML bardzo ułatwia to zadanie.
Jak to jest z tą długością tekstu?
Jeśli zależy Ci na tym, aby tekst dobrze komponował się z elementami o stałym rozmiarze, to pamiętaj, że jego tłumaczenie może wprowadzić zamęt. Na przykład ciągi tekstowe do nawigacji umieszczone po lewej stronie po przetłumaczeniu na różne języki mogą być znacznie dłuższe. Sprawdź na przykład różnicę w długości niektórych linków do nawigacji w języku angielskim i niderlandzkim na tej samej stronie. Niektóre tytuły do nawigacji mogą zajmować więcej niż 1 wiersz, co trzeba zrekompensować, dostosowując odpowiednio wysokość wiersza. Warto wziąć to pod uwagę również podczas tworzenia tekstu do nawigacji w języku polskim.
Zmienna długość słów wywołuje pewne problemy w elementach sterujących i etykietach formularzy. Jeśli na przykład w formularzu etykiety znajdują się po lewej stronie, a pola po prawej, dłuższe etykiety mogą zostać podzielone na 2 wiersze, a krótsze mogą być oderwane od pól wprowadzania danych. W obu przypadkach ucierpi na tym wygląd i czytelność formularza. Weź też pod uwagę dodatkowe zmiany stylu wymagane w przypadku układów od prawej do lewej (więcej informacji na ten temat później). Dlatego projektujemy formularze z etykietami umieszczonymi nad polami, dzięki czemu po przetłumaczeniu na różne języki będą one czytelne i estetyczne.
Warto unikać też kolumn o stałej wysokości. Powiedzmy, że aby nadać estetyczny wygląd układowi, dodasz tło dopasowane do wysokości pól. Możliwe, że przetłumaczony tekst będzie zajmował więcej miejsca i nie zmieści się w obszarach, w których mieścił się tekst w języku polskim. Zastanów się, czy elementy interfejsu, których zamierzasz użyć, będą działać przy większej lub mniejszej ilości tekstu, na przykład w przypadku poziomych lub pionowych kart.
Z drugiej strony
Edycja źródła w przypadku dwukierunkowego kodu HTML może być trudna, ponieważ wiele edytorów nie obsługuje dwukierunkowego algorytmu Unicode (więcej informacji o problemach i rozwiązaniach). Krótko mówiąc, znaczniki mogą wyświetlać się nieprawidłowo:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>Z naszego doświadczenia wynika, że przyzwoite rozwiązania do edycji dwukierunkowej oferują obecnie te edytory: przede wszystkim Coda, a także Dreamweaver, IntelliJ IDEA i JEditX.
Podczas projektowania stron w językach pisanych od prawej możesz dodać niezbędne funkcje do podstawowego stylu CSS i użyć atrybutu kierunkowego elementu html (na potrzeby zgodności wstecznej) razem z klasą w elemencie body. Warto zapisać wszystkie style w jednym podstawowym arkuszu stylów, co ułatwia ich obsługę.
Główne problemy dotyczące stylu, o których trzeba pamiętać: elementy umieszczone po prawej stronie trzeba przesunąć w lewo i na odwrót, dodatkowe dopełnienie lub marginesy zastosowane po jednej stronie elementu należy przenieść na drugą stronę, a wszystkie atrybuty wyrównania tekstu trzeba odwrócić.
Ogólnie używamy tej metody, w tym klasy w tagu „body” zamiast selektora CSS html[dir=rtl], bo jest zgodna ze starszymi przeglądarkami:
Elementy:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>Styl od lewej do prawej (domyślny):
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}Styl od prawej do lewej:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}Zobacz, jak to działa w języku angielskim i arabskim.
Ostatnia uwaga: w większości przypadków treści przeznaczone na strony w językach pisanych od prawej będą dwukierunkowe, a nie wyłącznie pisane od prawej, ponieważ niektóre ciągi tekstowe będą musiały zachować kierunek pisania od lewej, np. nazwy firm zapisane alfabetem łacińskim czy numery telefonów. Aby sprawdzić, czy przeglądarka obsługuje tę funkcję prawidłowo w dokumencie pisanym głównie od prawej, umieść ciągi tekstowe w elemencie liniowym z atrybutem określającym kierunek:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
Jeśli nie masz kontenera HTML, do którego można dołączyć atrybut dir, na przykład elementów title lub kodu źródłowego wygenerowanego przez JavaScript na potrzeby wiadomości, do określenia kierunku możesz użyć tego odpowiednika, w którym ‫ i ‬ to znaki kontrolne Unicode do umieszczania tekstów pisanych od prawej:
<title>‫הפוך את Google לדף הבית שלך‬</title>
Przykład użycia kodu JavaScript:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
Więcej informacji znajdziesz w artykułach W3C na temat tworzenia kodu HTML na potrzeby pisma arabskiego, hebrajskiego i innych języków pisanych od prawej oraz tworzenia tekstów w językach od prawej.
To dla mnie czarna magia…
Jeśli nie masz doświadczenia z zestawami znaków innymi niż łacińskie (cyrylica, grecki czy języki azjatyckie lub używane w Indiach), może się zdarzyć, że edytor i przeglądarka nie będą wyświetlać treści w oczekiwany sposób.
Sprawdź, czy kodowanie w edytorze i przeglądarce jest ustawione na UTF-8 (zalecane), i rozważ dodanie do szablonu HTML elementu <span> oraz atrybutu lang elementu html, aby zasygnalizować przeglądarkom, czego należy się spodziewać podczas renderowania Twojej strony. Dodatkową zaletą jest to, że wszystkie znaki Unicode są wyświetlane prawidłowo, dlatego nie musisz używać encji HTML, takich jak é (é), dzięki czemu oszczędzisz jakże cenne bajty. Jeśli masz trudności, przeczytaj samouczek W3C o kodowaniu znaków – znajdziesz w nim szczegółowe omówienie problemów, które możesz napotkać.
Kilka słów o nazwach
Na koniec praktyczna wskazówka dotycząca konwencji nazewnictwa stosowanych podczas tworzenia różnych wersji językowych. Korzystanie ze standardu takiego jak kody języka w formacie ISO 639-1 podczas nadawania nazw może być przydatne, gdy tworzysz kilka wersji językowych tego samego dokumentu.
Standardowa konwencja pomoże użytkownikom poznać strukturę witryny i ułatwi jej obsługę webmasterom, którzy mogą nad nią pracować. Używanie kodów języka na potrzeby innych zasobów witryny (obrazów logo, dokumentów PDF) przydaje się do szybkiego identyfikowania plików.
We wcześniejszych postach w Centrum dla webmasterów znajdziesz porady dotyczące struktury adresów URL oraz problemów dotyczących pracy z witrynami multiregionalnymi i wielojęzycznymi.
Oto podsumowanie głównych wyzwań, z którymi mierzymy się na co dzień. Gwarantujemy jednak, że staranne planowanie pracy i tworzenie uporządkowanego kodu HTML oraz wysokiej jakości arkuszy CSS przynosi korzyści podczas lokalizacji.