- PVSM.RU - https://www.pvsm.ru -
Кажется, с заголовком что-то не так? Это одна из проблем, с которыми сталкиваются веб-разработчики при добавлении поддержки таких языков, как арабский. В этой статье расскажем о проблемах, с которыми мы столкнулись, и решениях, которые придумали для поддержки арабского языка в десктопном клиенте Spotify и веб-плеере.
Локализация в Spotify — важное дело. Наша миссия состоит в том, чтобы «раскрыть потенциал человеческого творчества, предоставляя миллионам музыкантов возможность зарабатывать своим искусством на жизнь, а миллиардам поклонников — наслаждаться и вдохновляться им». Для достижения этой миссии важно, чтобы пользователи из разных стран могли эффективно общаться на своих языках. Недавно мы запустили Spotify в регионах Северной Африки и Западной Азии. Одним из языков в этих регионах является арабский. В отличие от английского, арабский читается справа налево. Это сказывается на веб-сайтах, которые хотят поддерживать арабский язык.
В статье будем использовать следующие аббревиатуры:
LTR (Left To Right): текст, который читается слева направо, как английский или испанский.
RTL (Right To Left): текст, который читается справа налево, как арабский.
На арабском языке справа налево распространяется не только текст, но и весь макет страницы. Например, следует перевернуть изображения, указывающие направление. Мы столкнулись с несколькими исключениями, которые рассмотрим ниже в разделе иконок.
Направление текста в элементе браузеру сообщает атрибут dir
. Чтобы задать глобальное направление страницы, необходимо задать атрибут dir
для всей страницы.
Значения атрибута:
И CSS Flexbox, и CSS Grid смотрят на атрибут dir
, чтобы определить направление элемента. Например, flex-start
автоматически переключается на RTL, когда атрибут dir
установлен в "rtl"
.
Но атрибута dir
с использованием flexbox или grid может быть недостаточно для отражения всего пользовательского интерфейса на RTL. Слишком много асимметричных свойств CSS, за которыми нужно следить при разработке веб-сайта, поддерживающего как LTR, так и RTL. Например margin-left: 20px
и text-align: right
в RTL поменяются и станут margin-right: 20px
и text-align: left
.
Есть много инструментов для автоматизации этой работы. Мы выбрали PostCSS-RTL [7], который на этапе сборки генерирует правила RTL с «перевёрнутыми» свойствами.
.foo {
margin-left: 15px;
text-align: right;
color: rebeccapurple;
}
Вход CSS
[dir] .foo {
color: rebeccapurple;
}
[dir="ltr"] .foo {
margin-left: 15px;
text-align: right;
}
[dir="rtl"] .foo {
margin-right: 15px;
text-align: left;
}
Вывод CSS
Иконки и элементы, имеющие направление или связанные с прогрессом, следует перевести в RTL. Например, кнопки навигации назад и вперёд нужно поменять местами.
Кнопка «Назад» в LTR
Кнопка «Назад» в RTL (вместо арабского используется английский текст)
Все анимации с направлением движения тоже надо перевернуть. Например, карусели должны скользить в другую сторону.
Изначально мы предполагали, что всё будет зеркально. Но довольно быстро увидели некоторые исключения. Например, кнопки воспроизведения мультимедиа и индикатор выполнения не требуют зеркального отображения, поскольку они относятся к направлению проигрываемой ленты. Арабоязычные пользователи ожидают, что элементы управления воспроизведением и индикатор выполнения будут выглядеть так же, как и на языке LTR.
Индикатор воспроизведения в LTR
Нередко на одной странице смешиваются тексты LTR и RTL. На Spotify более 40 миллионов песен музыкантов со всего мира и более 3 миллиардов плейлистов. Контент представлен на многих языках для пользователей со всего мира. Поэтому в клиентах Spotify контент LTR и RTL часто смешивается.
Одна из первых проблем, с которой мы столкнулись, выглядела так:
Проблема скобок
Такое происходит, потому что браузер задаёт базовое направление текста исходя из значения атрибута dir
нашего элемента. Знаки препинания, такие как ( ) . !
и остальные, не описываются направлением в Unicode. Они наследуют базовое направление текста.
Двунаправленный алгоритм Unicode Bidirectional Algorithm рассматривает каждый символ в строке справа налево. В качестве примера возьмём на странице строку "Hello (World)"
.
)
, поэтому смотрит на базовое направление текста и видит, что текст идёт справа налево. Алгоритм решает перенести )
в начало строки.
“Hello (World)” -> “(Hello (World”
d
с направлением LTR. Его не нужно перемещать. То же самое касается других английских символов вплоть до (
.
(
без направления. Он помнит преобладающее базовое направление (заданное предыдущим символом W
) слева направо. Алгоритм решает не перемещать (
. То же самое касается пробела и всех символов в "Hello”
Подробнее о том, как работает Unicode Bidirectional Algorithm, см. здесь [8].
В итоге мы получаем строку "(Hello (World"
. Мы решили эту проблему, указав значение auto
для атрибута dir
во всём динамическом контенте, например, в именах исполнителей, названиях альбомов и песен. Это изолирует содержимое и задаёт базовое направление в соответствии с первым строго типизированным символом направления. В этом случае ненаправленные символы всегда будут наследовать направление от окружающих символов, а не страницы. Поэтому получится строка "Hello (World)"
. Для соблюдения корректного выравнивания используйте атрибут только для встроенных элементов inline, иначе придётся добавлять в элементы свойство text-align
.
Смешанный контент также представляет проблему, если вы хотите добавить усечение, которое не подходит элементу.
LTR UI: арабский текст, усечённый с неправильной стороны
RTL UI: английский текст, усечённый с неправильной стороны
Усечение происходит с неправильной стороны, потому что браузер задаёт направление текста из атрибута dir
. Проблему решает установка атрибута "auto"
для элемента с усечённым текстом.
LTR UI: арабский текст, усечённый с правильной стороны
RTL UI: английский текст, усечённый с правильной стороны
При разработке мультиязычного UI важно убедиться, что интерфейс правильно работает для всех алфавитов. Вот вкратце, что нужно проверить при добавлении арабского языка.
Арабское письмо — это вязь. Большинство, если не все символы в слове связаны друг с другом. По этой причине в арабском не следует использовать межсимвольный интервал. Он разрывает символы, нарушая естественную вязь.
Как правило, у арабских символов более сложные глифы, чем у английских. Там больше линий и нюансов, которые должны вписаться в такое же пространство. Из-за этого арабское письмо с тем же размером шрифта менее разборчивое, чем английский язык. Символы слишком маленькие. Мы решили увеличить минимальный размер шрифта на арабском языке с 11 до 12px. Мы также убедились, что шрифт не усложняет арабские глифы. Хорошим выбором будет Google Noto [9], который более разборчив, чем Arial — резервный шрифт по умолчанию для арабского языка в браузере.
Некоторые арабские буквы выше английских. Это может привести к обрезке символов по вертикали. Возможно, для арабского потребуется увеличить межстрочный интервал (line-height).
Вертикальная обрезка
В арабском нет заглавных букв, поэтому нет смысла что-то выделять прописными буквами на странице.
Во многих языках в качестве запятой используется ,
. В арабском языке другой разделитель: ،
.
У нас в коде часто встречалась команда array.join(‘, ‘)
. Для поддержки разных разделителей в зависимости от языковых настроек пользователя мы добавили метод getSeparator()
.
На арабском языке две системы счисления
Выберите одну систему и используйте её последовательно во всём приложении. Мы выбрали западные арабские цифры.
Глифы на арабском могут перекрываться. Прозрачный цвет текста не работает, поскольку перекрывающиеся части не получают ожидаемой прозрачности. Решение проблемы — полностью непрозрачный цвет и непрозрачность для текстового элемента.
Проблема прозрачности
Вот некоторые вещи, которые мы сделали, чтобы качественно внедрить арабский язык:
Чтобы обеспечить качество арабского UI, понадобились некоторые инструменты.
Мы решили создать бота GitHub, который публикует комментарии на пул-реквесты, которые соответствуют потенциальным проблемам. Комментарий ничего не навязывает: это просто напоминание проверить, как изменение повлияет на арабский язык, со ссылкой на инструкции по тестированию. Бот комментирует изменённые строки, соответствующие заполнению, межсимвольному интервалу, преобразованиям и т. д. Код CSS конвертируется PostCSS-RTL, поэтому обычно достаточно взглянуть на изменение на арабском языке и убедиться, что оно выглядит хорошо. Свойства CSS можно устанавливать через JS, а PostCSS-RTL не преобразует JS. Бот же проверяет JS-файлы и комментирует их тоже, если там встречаются соответствующие свойства.
Комментарий tob-bot
Автор: m1rko
Источник [15]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/unicode/316114
Ссылки в тексте:
[1] Макет зеркального отображения: #1
[2] Английский язык в формате RTL: #2
[3] Арабское письмо: #3
[4] Стандарты качества: #4
[5] Полезные источники: #5
[6] Unicode Bidirectional Algorithm: http://unicode.org/reports/tr9/#Introduction
[7] PostCSS-RTL: https://github.com/vkalinichev/postcss-rtl
[8] здесь: https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
[9] Google Noto: https://www.google.com/get/noto/
[10] Material Design – двунаправленность: https://material.io/design/usability/bidirectionality.html#
[11] Методы интернационализации: авторинг HTML & CSS: https://www.w3.org/International/techniques/authoring-html
[12] Авторинг HTML: письменность справа налево: https://www.w3.org/TR/i18n-html-tech-bidi/
[13] Сравнительный анализ арабского и персидского языков: https://w3c.github.io/alreq/gap-analysis/
[14] ECMAScript Internationalization API: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
[15] Источник: https://habr.com/ru/post/450000/?utm_campaign=450000
Нажмите здесь для печати.