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

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

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

Убедитесь, что ваша форма работает на разных языках¶

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

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

<html lang="en-us"></html>

Подробнее об атрибуте lang.

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

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

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

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

Попробуйте! Введите URL-адрес вашей формы в Google Translate, выберите язык и переведите ее. Все видимое содержимое вашего сайта будет переведено. Это хороший тест, чтобы проверить, все ли тексты можно перевести.

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

Избегайте использования атрибута aria-label для описания элементов. Многие средства перевода не могут перевести атрибут aria-label.

Подробнее о том, почему aria-label не переводится.

Обеспечение работы формы с различными системами письма¶

В разных языках используются различные системы письма и кодировки. Некоторые шрифты пишутся слева направо, а некоторые - справа налево.

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

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

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

Атрибут dir указывает направление текста элемента. Если весь сайт использует одну и ту же систему письма, определите атрибут dir на элементе <html>. В CodePen у вас нет доступа к элементу <html>, поэтому его необходимо добавить в <main>.

Для достижения того же результата можно использовать свойство CSS direction.

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

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

Подробнее о логических свойствах.

Убедитесь, что форма может работать с различными форматами имен¶

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

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

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

Подробнее о личных именах.

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

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

Штаб-квартира Google находится по адресу: 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.

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

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

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

Ресурсы¶

Статьи и руководства по интернационализации W3C
Навязчивое руководство Фрэнка по почтовым адресам содержит полезные ссылки и подробное руководство по форматам адресов в более чем 200 странах.
DataHub.io - инструмент для загрузки кодов и названий стран.

Источник — Internationalization and localization