Internet jest dostępny dla wszystkich na świecie – to widać już po samej 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, jakiego urządzenia używa i jakim językiem się posługuje.
Celem projektowania responsywnego jest udostępnienie treści wszystkim. Zastosowanie tej samej filozofii do języków naturalnych jest siłą napędową internacjonalizacji – przygotowania treści i projektów dla odbiorców z całego świata.
Właściwości logiczne
W języku polskim piszemy od lewej do prawej i od góry do dołu, ale nie wszystkie języki są zapisywane w ten sposób. W niektórych językach, takich jak arabski i hebrajski, pisze się od prawej do lewej, a w niektórych japońskich krojach pisma tekst jest zapisywany pionowo, a nie poziomo. Aby uwzględnić te tryby pisania, w CSS wprowadzono właściwości logiczne.
Jeśli piszesz w CSS, być może używasz słów kluczowych określających kierunek, takich jak „left”, „right”, „top” i „bottom”. Te słowa kluczowe odnoszą się do fizycznego układu urządzenia użytkownika.
Z kolei właściwości logiczne odnoszą się do krawędzi pola w kontekście przepływu treści. Jeśli tryb pisania się zmieni, CSS napisany z użyciem właściwości logicznych zostanie odpowiednio zaktualizowany. Nie dotyczy to właściwości kierunkowych.
Właściwość kierunkowa margin-left zawsze odnosi się do marginesu po lewej stronie pola treści, a 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 oraz do marginesu po prawej stronie pola treści w języku pisanym od prawej do lewej.
Aby Twoje projekty dostosowywały się do różnych trybów pisania, unikaj właściwości kierunkowych. Zamiast tego używaj właściwości logicznych.
.byline { text-align: right; }
.byline { text-align: end; }
Gdy CSS ma konkretną wartość kierunkową, np. left lub right, istnieje odpowiadająca jej właściwość logiczna. Zamiast margin-left mamy teraz też margin-inline-start.
W języku takim jak polski, w którym tekst płynie od lewej do prawej, inline-start odpowiada „left”, a inline-end odpowiada „right”.
Podobnie w języku takim jak polski, w którym tekst jest pisany od góry do dołu, block-start odpowiada „top”, a block-end odpowiada „bottom”.
Jeśli w CSS używasz właściwości logicznych, możesz używać tego samego arkusza stylów w przypadku tłumaczeń stron. Nawet jeśli strony są przetłumaczone na języki pisane od prawej do lewej lub od dołu do góry, projekt zostanie odpowiednio dostosowany. Nie musisz tworzyć osobnych projektów dla każdego języka. Dzięki właściwościom logicznym 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 tworzenia osobnych projektów dla każdego języka.
Nowoczesne techniki układu CSS, takie jak siatka i flexbox, domyślnie używają właściwości logicznych.
Jeśli zamiast left i top będziesz myśleć w kategoriach inline-start i block-start, łatwiej zrozumiesz te nowoczesne techniki.
Weźmy na przykład typowy wzorzec, taki jak ikona obok tekstu lub etykieta obok pola formularza. Zamiast myśleć „etykieta powinna mieć margines po prawej stronie”, pomyśl „etykieta powinna mieć margines na końcu osi inline”.
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
Jeśli strona zostanie przetłumaczona na język pisany od prawej do lewej, nie trzeba będzie aktualizować stylów.
Możesz symulować 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ś blokowa) i trybów pisania (oś inline), skorzystaj z tej interaktywnej demonstracji.
Określanie języka strony
Warto określić język strony, używając atrybutu lang w elemencie html.
<html lang="en">
Ten przykład dotyczy strony w języku polskim. Możesz być jeszcze bardziej precyzyjny. Oto jak zadeklarować, że strona używa języka polskiego:
<html lang="en-us">
Deklarowanie języka dokumentu jest przydatne dla wyszukiwarek. Jest też przydatne dla technologii wspomagających, takich jak czytniki ekranu i asystenci głosowi. Dzięki metadanym języka pomagasz tego typu syntezatorom mowy prawidłowo wymawiać Twoje treści.
Atrybut lang może być używany w dowolnym elemencie HTML, nie tylko w html. Jeśli zmienisz język na stronie internetowej, poinformuj o tym.
W tym przypadku jedno słowo jest w języku niemieckim:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Określanie języka połączonego dokumentu
Istnieje też atrybut hreflang, którego możesz używać w linkach.
Atrybut hreflang używa tej samej notacji kodu języka co atrybut lang i opisuje język połączonego dokumentu.
Jeśli masz tłumaczenie całej strony na język niemiecki, połącz się z nim w ten sposób:
<a href="/path/to/german/version" hreflang="de">German version</a>
Jeśli używasz tekstu w języku niemieckim do opisania linku do wersji niemieckiej, użyj zarówno hreflang, jak i lang.
W tym przypadku tekst „Deutsche Version” jest oznaczony jako tekst w języku niemieckim, a link docelowy jest również oznaczony jako link do strony 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. Ten element znajduje się w sekcji head dokumentu:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Jednak w przeciwieństwie do atrybutu lang, który może być używany w dowolnym elemencie, atrybut hreflang można stosować tylko w elementach a i link.
Uwzględnianie internacjonalizacji w projekcie
Podczas projektowania stron internetowych, które będą tłumaczone na inne języki i tryby pisania, weź pod uwagę te czynniki:
- W niektórych językach, np. w niemieckim, powszechnie używa się długich słów. Interfejs musi się dostosowywać do tych słów, dlatego unikaj projektowania wąskich kolumn. Możesz też użyć CSS, aby wprowadzić łączniki.
- Upewnij się, że wartości
line-heightmogą pomieścić znaki takie jak akcenty i inne znaki diakrytyczne. Wiersze tekstu, które wyglądają dobrze w języku polskim, mogą się nakładać w innym języku. - Jeśli używasz czcionki internetowej, upewnij się, że ma ona zakres znaków wystarczający do obsługi języków, na które będziesz tłumaczyć.
- Nie twórz obrazów zawierających tekst. Jeśli to zrobisz, będziesz musiał utworzyć osobne obrazy dla każdego języka. Zamiast tego oddziel tekst od obrazu i użyj CSS, aby nałożyć tekst na obraz.
Wyjdź poza granice swojego kraju
Atrybuty takie jak lang i hreflang sprawiają, że kod HTML jest bardziej zrozumiały w kontekście internacjonalizacji.
Podobnie właściwości logiczne sprawiają, że CSS jest bardziej elastyczny.
Jeśli jesteś przyzwyczajony(-a) do myślenia w kategoriach top, bottom, left i right, może Ci być trudno zacząć myśleć w kategoriach block start, block end, inline start i inline end.
Ale warto. Właściwości logiczne są kluczem do tworzenia prawdziwie responsywnych układów.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat internacjonalizacji.
W języku polskim fizyczna right strona pola jest logicznie którą stroną?
block-starttopblock-endbottominline-startleftinline-endKtóry atrybut należy dodać do kodu HTML, aby był bardziej zrozumiały w kontekście internacjonalizacji?
englishlanglanguagei18nNastępnie dowiesz się, jak podejść do układów na poziomie strony, czyli układów makro.