Sieć WWW jest dostępna dla każdego – tak jest w nazwie. Oznacza to, że Twoja witryna jest potencjalnie dostępna dla każdego, kto ma dostęp do internetu, niezależnie od tego, gdzie się znajduje, z jakiego urządzenia korzysta i jakim językiem się posługuje.
Celem elastycznego projektowania jest udostępnianie treści wszystkim użytkownikom. Wykorzystanie tej samej filozofii w przypadku ludzkich języków jest siłą napędową umiędzynarodowienia – czyli przygotowanie treści i projektów dla odbiorców z całego świata.
Właściwości logiczne
Angielski pisze się od lewej do prawej i z góry na dół, ale nie we wszystkich językach pisze się w ten sposób. W niektórych językach, np. arabskim i hebrajskim, czyta się od prawej do lewej, a inne – w pionie, a nie w poziomie. Aby dostosować te tryby pisania, wprowadziliśmy w CSS właściwości logiczne.
Jeśli tworzysz kod CSS, możesz korzystać ze słów kluczowych kierunkowych, takich jak „lewo”, „prawo”, „góra” i „dół”. Te słowa kluczowe odnoszą się do fizycznego układu urządzenia użytkownika.
Właściwości logiczne odnoszą się natomiast do krawędzi pola, które są związane z przepływem treści. Jeśli tryb pisania ulegnie zmianie, kod CSS napisany z właściwościami logicznymi zostanie odpowiednio zaktualizowany. W przypadku właściwości kierunkowych jest inaczej.
Podczas gdy właściwość kierunkowa margin-left zawsze odnosi się do marginesu po lewej stronie pola treści, właściwość logiczna margin-inline-start odnosi się do marginesu po lewej stronie pola treści w języku pisanym od lewej do prawej i marginesu po prawej stronie pola treści w języku pisanym od prawej do lewej.
Aby projekty dostosowują się do różnych trybów pisania, unikaj właściwości kierunkowych. Zamiast nich używaj właściwości logicznych.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Gdy CSS ma określoną wartość kierunkową, np. left lub right, istnieje powiązana z nią właściwość logiczna. Dawniej było margin-left, teraz jest też margin-inline-start.
W przypadku języka takiego jak angielski, w którym tekst przepływa od lewej do prawej,
inline-start odpowiada liczbie „lewej”, a inline-end – „prawej”.
I podobnie, w przypadku języka angielskiego, w którym tekst jest pisany od góry do dołu,
block-start odpowiada wartości „top”, a block-end – „dół”.
Jeśli w kodzie CSS stosujesz właściwości logiczne, możesz użyć tego samego arkusza stylów do tłumaczenia stron. Nawet jeśli strony są tłumaczone na języki pisane od prawej do lewej lub od dołu do góry, ich wygląd zostanie odpowiednio dostosowany. Nie musisz tworzyć osobnego projektu dla każdego języka. Wykorzystując właściwości logiczne, Twój projekt będzie reagować na każdy tryb pisania. Oznacza to, że Twój projekt może dotrzeć do większej liczby osób bez konieczności poświęcania czasu na tworzenie osobnych projektów dla każdego języka.
Nowoczesne techniki układu CSS, takie jak grid i flexbox, domyślnie używają właściwości logicznych.
Jeśli myślisz w kontekście inline-start i block-start zamiast left i top, łatwiej Ci będzie zrozumieć te nowoczesne techniki.
Korzystaj z typowego wzorca, na przykład ikony obok tekstu lub etykiety obok pola formularza. Zamiast myśleć: „etykieta powinna mieć margines po prawej stronie”, pomyśl, że „etykieta powinna mieć margines na końcu osi wbudowanej”.
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
Jeśli ta strona została przetłumaczona na język pisany od prawej do lewej,
stylów nie trzeba będzie aktualizować.
Możesz naśladować efekt wyświetlania stron w języku pisanym od prawej do lewej, używając atrybutu dir w elemencie html.
Wartość ltr oznacza „od lewej do prawej”. Wartość „rtl” oznacza „od prawej do lewej”.
Jeśli chcesz poeksperymentować ze wszystkimi permutacjami kierunków dokumentu (oś bloków) i trybów pisania (oś wbudowana), zapoznaj się z interaktywną prezentacją.
Określ język strony
Warto wskazać język strony za pomocą atrybutu lang w elemencie html.
<html lang="en">
To jest przykład strony w języku angielskim. Możesz też podać jeszcze więcej szczegółów. Aby zadeklarować, że strona używa języka angielskiego (USA):
<html lang="en-us">
Zadeklarowanie języka dokumentu jest przydatne dla wyszukiwarek. Jest to też przydatne w przypadku technologii wspomagających osoby z niepełnosprawnością, takich jak czytniki ekranu i asystenty głosowe. Dostarczając metadane języka, pomagasz syntezatorom mowy w prawidłowym wymawianiu treści.
Atrybut lang można umieścić w dowolnym elemencie HTML, nie tylko w elemencie html. Jeśli zmieniasz język na swojej stronie internetowej, poinformuj o tym.
W tym przypadku 1 słowo jest po niemiecku:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Określanie języka dokumentu, do którego prowadzi link
Jest jeszcze inny atrybut o nazwie hreflang, którego możesz używać w przypadku linków.
hreflang korzysta z tego samego zapisu kodu języka co atrybut lang i opisuje język linku.
Jeśli dostępna jest tłumaczenie całej strony w języku niemieckim, link do niej należy umieścić w następujący sposób:
<a href="/path/to/german/version" hreflang="de">German version</a>
Jeśli do opisania linku do wersji niemieckiej używasz tekstu w języku niemieckim, użyj zarówno hreflang, jak i lang.
W tym przypadku tekst „Deutsche Version” jest oznaczony jako w języku niemieckim, a link docelowy – w języku niemieckim:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
Możesz też użyć atrybutu hreflang w elemencie link. Wpisz ten tekst w sekcji head dokumentu:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
W przeciwieństwie do atrybutu lang, który może znaleźć się w dowolnym elemencie, hreflang można stosować tylko do elementów a i link.
Rozważ zastosowanie internacjonalizacji projektu
Projektując strony internetowe, które mają być tłumaczone na inne języki i metody pisania, weź pod uwagę te czynniki:
- W przypadku niektórych języków, np. niemieckiego, często używane są długie słowa. Interfejs musi się dostosować do tych słów, więc unikaj projektowania wąskich kolumn. Możesz też użyć CSS do wprowadzenia łączników.
- Upewnij się, że wartości
line-heightmogą zawierać znaki akcentowane i diakrytyczne. Wiersze tekstu, które wyglądają dobrze w języku angielskim, mogą się pokrywać w innym języku. - Jeśli korzystasz z czcionki internetowej, upewnij się, że jej zakres znaków jest wystarczająco szeroki, aby uwzględnić języki, na które będziesz tłumaczyć.
- Nie twórz obrazów, które zawierają tekst. Jeśli to zrobisz, musisz utworzyć osobny obraz dla każdego języka. Zamiast tego rozdziel tekst i obraz oraz zastosuj CSS do nałożenia tekstu na obraz.
Wyjdź poza granice swojego kraju
Atrybuty takie jak lang i hreflang sprawiają, że kod HTML lepiej nadaje się do internacjonalizacji.
Właściwości logiczne ułatwiają dostosowanie CSS.
Jeśli wolisz myśleć w kontekście top, bottom, left i right,
może być Ci trudno zacząć myśleć o block start, block end, inline start i inline end.
Ale warto. Właściwości logiczne są kluczem do tworzenia naprawdę elastycznych układów.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat internacjonalizacji
Zgodnie z logiką, po której stronie jest logicznie jedna strona pudełka po angielsku: right?
block-starttopblock-endbottominline-startleftinline-endKtóry atrybut należy dodać do kodu HTML, aby ułatwić jego internacjonalizację?
englishlanglanguagei18nNauczysz się korzystać z układów na poziomie strony, nazywanych też układami makr.