Интернационализация и локализация

Если вы читаете это, значит, вы пользуетесь Всемирной паутиной. Ваши формы могут использовать люди, говорящие на разных языках, люди из разных стран и люди с разным культурным прошлым. Узнайте, как подготовить форму к интернационализации и локализации.

Давайте посмотрим, как можно убедиться, что ваша форма работает на разных языках.

Первым шагом на пути к локализации вашего сайта является определение атрибута языка lang в элементе <html> . Этот атрибут позволяет программам чтения с экрана вызывать правильное произношение и помогает браузерам предлагать перевод страницы, если определенный язык не является языком браузера по умолчанию.

<html lang="en-us">

Узнайте больше об атрибуте lang .

Предположим, вы перевели форму на немецкий язык. Как убедиться, что поисковые системы и браузеры знают о переведенной версии? Вы можете добавить элементы <link> в <head> вашего сайта, описывающие альтернативные версии.

<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">

Помогите пользователям, говорящим на другом языке, использовать вашу форму.

Вы не можете перевести форму на любой язык, но можете быть уверены, что инструменты перевода смогут перевести ее за вас.

Чтобы инструменты перевода переводили весь текст в вашей форме, убедитесь, что весь текст определен в HTML и виден. Некоторые инструменты также работают с содержимым, определенным в JavaScript, но для улучшения совместимости постарайтесь включать как можно больше текста в HTML.

Убедитесь, что ваша форма работает с разными системами письма.

В разных языках используются разные системы письма и наборы символов. Некоторые сценарии пишутся слева направо, а некоторые — справа налево.

Сделайте интервал независимым от систем письма.

Чтобы ваша форма работала в разных системах письма, вы можете использовать логические свойства CSS .

Входные данные имеют толщину границы 1px со всех сторон, кроме левой стороны, где толщина границы составляет 4px . Теперь отредактируйте CodePen и измените систему письма справа налево, добавив dir="rtl" к элементу <main>

Толстая граница теперь находится на правой стороне. Это потому, что мы определили границу, используя логическое свойство.

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

Узнайте больше о логических свойствах .

Убедитесь, что ваша форма поддерживает разные форматы имен.

Допустим, у вас есть форма, в которой пользователь должен ввести свое имя. Как бы вы добавили поле в форму?

Вы можете добавить одно поле для имени и одно для фамилии. Однако в мире имена разные: например, у некоторых людей нет фамилии — так как же им заполнять поле фамилии?

Чтобы упростить и ускорить ввод имен и гарантировать, что каждый сможет ввести свое имя в любом формате, используйте везде, где это возможно, одно поле формы для имен.

Узнайте больше о личных именах .

Если у вас имя, содержащее нелатинские символы , возможно, вы столкнулись с проблемой, когда в некоторых формах ваше имя отображается как invalid . При создании форм убедитесь, что разрешены все возможные символы, и не думайте, что имя состоит только из латинских символов.

Разрешить различные форматы адресов

Штаб-квартира Google находится по адресу 1600 Amphitheatre Parkway, Маунтин-Вью, Калифорния 94043, США.

Этот адрес включает номер улицы, улицу, город, штат, почтовый индекс и страну. В вашей стране формат адреса может быть совершенно другим. Как вы можете гарантировать, что каждый сможет ввести свой адрес в вашу форму?

Один из способов — использовать общие входные данные.

Узнайте больше о других способах работы с полями международных адресов .

Проверьте свое понимание

Проверьте свои знания в области интернационализации и локализации

Как добиться правильного произношения для программ чтения с экрана?

Добавление описания с указанием того, какой язык используется.
С атрибутом hreflang .
С атрибутом language .
С атрибутом lang .

Как вы можете изменить систему написания на своем сайте?

Использование элемента <link> .
С атрибутом direction .
С атрибутом dir .
Использование логических свойств CSS.

Ресурсы