Internacjonalizacja i lokalizacja

Jeśli to czytasz, to znaczy, że korzystasz z sieci WWW. Z formularzy mogą korzystać osoby mówiące innymi językami, z różnych krajów i osoby o odmiennym pochodzeniu kulturowym. Dowiedz się, jak przygotować formularz pod kątem internacjonalizacji i lokalizacji.

Sprawdź, czy formularz działa w różnych językach

Zobaczmy, jak zapewnić działanie formularza w różnych językach.

Pierwszym krokiem do przygotowania witryny pod kątem lokalizacji jest zdefiniowanie atrybutu języka lang w elemencie <html>. Umożliwia on czytnikom ekranu wywoływanie prawidłowej wymowy i ułatwia przeglądarkom tłumaczenie strony, jeśli zdefiniowany język nie jest domyślnym językiem przeglądarki.

<html lang="en-us">

Więcej informacji o atrybucie lang

Załóżmy, że przetłumaczysz formularz na niemiecki. Jak sprawdzić, czy wyszukiwarki i przeglądarki wiedzą o przetłumaczonej wersji? W sekcji <head> witryny możesz dodać elementy <link> z opisem alternatywnych wersji.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Pomóż użytkownikom, którzy posługują się innym językiem, użyć formularza

Nie możesz przetłumaczyć formularza na każdy język, ale możesz upewnić się, że narzędzia tłumaczeniowe przetłumaczą go za Ciebie.

Aby narzędzia do tłumaczenia przetłumaczyły cały tekst formularza, zadbaj o to, by cały tekst był zdefiniowany w kodzie HTML i był widoczny. Niektóre narzędzia obsługują też treści zdefiniowane w JavaScript, ale aby poprawić zgodność, staraj się umieszczać w kodzie HTML jak najwięcej tekstu.

Upewnij się, że formularz współpracuje z różnymi systemami pisania

W różnych językach używane są inne systemy pisma i różne zestawy znaków. Niektóre skrypty są pisane od lewej do prawej, a inne od prawej do lewej.

Zachowaj odstępy niezależne od systemów pisma

Aby mieć pewność, że formularz będzie działał w różnych systemach pisania, używaj właściwości logicznych CSS.

Obramowanie danych wejściowych ma grubość 1px ze wszystkich stron, z wyjątkiem lewej strony, gdzie obramowanie ma grubość 4px. Teraz edytuj CodePen i zmień system pisania na od prawej do lewej, dodając dir="rtl" do elementu <main>

Grube obramowanie jest teraz po prawej stronie. Dzieje się tak, ponieważ granice są zdefiniowane za pomocą właściwości logicznej.

input {
  border-inline-start-width: 4px;
}

Dowiedz się więcej o właściwościach logicznych.

Upewnij się, że formularz obsługuje różne formaty nazw

Załóżmy, że masz formularz, w którym użytkownik powinien wpisać swoje imię i nazwisko. Jak dodasz to pole do formularza?

Możesz dodać jedno pole na imię, a jedno na nazwisko. Imiona i nazwiska są jednak różne na całym świecie: na przykład niektórzy nie mają nazwiska. Jak więc wypełnić pole nazwiska?

Aby szybko i łatwo wpisywać imiona i nazwiska – a każdy może wpisać je w dowolnym formacie, użyj jednego pola na imiona i nazwiska.

Dowiedz się więcej o nazwach osobistych.

Jeśli nazwa zawiera znaki inne niż łacińskie, może się zdarzyć, że w niektórych formularzach Twoja nazwa zostanie zgłoszona jako invalid. Podczas tworzenia formularzy pamiętaj, aby zezwalać na wszystkie możliwe znaki. Nie zakładaj, że nazwa zawiera tylko znaki łacińskie.

Zezwalaj na różne formaty adresu

Siedziba główna Google znajduje się pod adresem 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.

Ten adres zawiera nazwę ulicy, numer domu, ulicę, miasto, stan, kod pocztowy i kraj. W Twoim kraju format adresu może być zupełnie inny. Co zrobić, aby każdy mógł wpisać swój adres w formularzu?

Jednym ze sposobów jest użycie ogólnych danych wejściowych.

Dowiedz się więcej o innych sposobach korzystania z międzynarodowych pól adresów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat internacjonalizacji i lokalizacji

Jak wywołać prawidłową wymowę dla czytników ekranu?

Z atrybutem lang.
🎉
Z atrybutem hreflang.
Spróbuj jeszcze raz.
Dodanie opisu z używanym językiem.
Spróbuj jeszcze raz.
Z atrybutem language.
Spróbuj jeszcze raz.

Jak możesz zmienić system pisania w swojej witrynie?

Z atrybutem direction.
Spróbuj jeszcze raz.
Z atrybutem dir.
🎉
Zastosowanie właściwości logicznych CSS.
Spróbuj jeszcze raz.
Używam elementu <link>.
Spróbuj jeszcze raz.

Zasoby