Internacjonalizacja i lokalizacja

Jeśli czytasz ten tekst, korzystasz z sieci WWW. Twoje formularze mogą być używane przez osoby mówiące w różnych językach, Osoby z różnych krajów i mieszkające w różnych kulturach. Dowiedz się, jak przygotować formularz pod kątem internacjonalizacji i lokalizacji.

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

Zobaczmy, jak sprawdzić, czy formularz będzie działał w różnych językach.

Pierwszym krokiem do dostosowania witryny do lokalizacji jest zdefiniowanie atrybutu języka lang w elemencie <html>. Ten atrybut umożliwia 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łumaczyłeś formularz na niemiecki. Jak możesz się upewnić, że wyszukiwarki i przeglądarki wiedzą o przetłumaczonej wersji? W elemencie <head> Twojej witryny możesz dodać elementy <link> opisujące alternatywne wersje.

<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 mówią w innym języku, korzystać z formularza

Nie możesz przetłumaczyć formularza na każdy język, ale możesz mieć pewność, że narzędzia do tłumaczenia przetłumaczą je za Ciebie.

Aby narzędzia do tłumaczenia przetłumaczyły cały tekst w formularzu, sprawdź, czy cały tekst jest zdefiniowany w kodzie HTML i jest widoczny. Niektóre narzędzia obsługują również treść określoną w języku JavaScript, ale aby poprawić zgodność, postaraj się umieścić w kodzie HTML jak najwięcej tekstu.

Zadbaj o to, aby Twój formularz działał w różnych systemach pisania

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

Stosuj odstępy niezależnie od systemów pisania

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

Grubość obramowania wynosi 1px po każdej stronie, z wyjątkiem lewej strony, której grubość ma 4px grubości. Edytuj CodePen i zmień system pisma na od prawej do lewej dodając dir="rtl" do elementu <main>

Grube obramowanie jest teraz po prawej stronie. Wynika to z tego, że zdefiniowaliśmy granicę 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 imion i nazwisk

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

Możesz dodać jedno pole na imię i jedno na nazwisko. Nazwy są jednak inne na całym świecie, np. niektórzy nie noszą nazwiska. Jak więc mogą wypełnić pola nazwiska?

Aby przyspieszyć i ułatwić wpisywanie nazw – oraz aby każdy mógł podać swoje imię, niezależnie od – tam, gdzie to możliwe, używaj jednego pola formularza.

Dowiedz się więcej o osobistych imionach i nazwiskach.

Jeśli masz imię, które zawiera znaki inne niż łacińskie, mógł wystąpić problem z podaniem w niektórych formularzach Twojego imienia i nazwiska jako invalid. Gdy formularze tworzenia, upewnij się, że są dozwolone wszystkie możliwe znaki – i nie zakładaj, że nazwa składa się tylko z znaków łacińskich.

Zezwalaj na różne formaty adresów

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

Adres obejmuje ulicę, ulicę, miasto, stan, kod pocztowy i kraj. W Twoim kraju format adresu może być zupełnie inny. Co możesz zrobić, aby każdy mógł podać swój adres w formularzu?

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

Dowiedz się więcej o innych sposobach współpracy pola adresów międzynarodowych.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat internacjonalizacji i lokalizacji

Jak włączyć prawidłową wymowę w przypadku czytników ekranu?

Za pomocą atrybutu lang.
🎉
Za pomocą atrybutu hreflang.
Spróbuj jeszcze raz.
Dodanie opisu z użytym językiem.
Spróbuj jeszcze raz.
Za pomocą atrybutu language.
Spróbuj jeszcze raz.

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

Za pomocą atrybutu direction.
Spróbuj jeszcze raz.
Za pomocą atrybutu dir.
🎉
Korzysta z właściwości logicznych CSS.
Spróbuj jeszcze raz.
Używam elementu <link>.
Spróbuj jeszcze raz.

Zasoby