Двунаправленный текст в Pixso: работа с LTR и RTL

Арабский текст в интерфейсе может соседствовать с латинским названием продукта, адресом почты и числами. Для такого сочетания нужна поддержка двунаправленного текста — BiDi. В Pixso можно задавать направление текстового блока и работать с фрагментами LTR и RTL в одном поле.

Что такое двунаправленный текст — BiDi

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

BiDi отвечает за отображение таких фрагментов в одной строке. Базовое направление абзаца влияет на порядок его частей, а выравнивание задаёт положение текста внутри блока. Это разные настройки: выравнивание по правому краю само по себе не превращает текст в RTL.

Что важно при работе с RTL и смешанным текстом

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

1. Направление и выравнивание

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

2. Курсор и выделение

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

3. Латиница, числа и знаки препинания

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

4. Расположение элементов интерфейса

Направление текста и компоновка компонента — отдельные задачи. Для версии RTL может понадобиться изменить положение подписи, иконки или кнопки перехода. Не все элементы нужно отражать: логотипы, фотографии и некоторые знакомые символы сохраняют исходную ориентацию.

5. Экспорт и передача макета

После экспорта сравните строки с исходным макетом: порядок фрагментов, шрифт, переносы и пунктуацию. При передаче в разработку укажите базовое направление и поведение компонента. Изображение макета само по себе не задаёт правила отображения текста в работающем интерфейсе.

Поддержка BiDi помогает редактировать смешанный текст в Pixso. Компоновку экранов, ориентацию иконок и поведение готового продукта команда проектирует и проверяет отдельно.

Где нужна поддержка BiDi

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

Рассмотрим четыре типичных сценария.

1. Локализованный экран. Подготовьте версии LTR и RTL с одинаковым содержанием. Сравните порядок элементов, переносы и положение основного действия. Изменение направления текста не заменяет работу над всей компоновкой.

2. Сообщения и комментарии. В одном диалоге могут соседствовать сообщения на разных языках. Проверьте направление каждого абзаца, цитаты и текст, который пользователь вставляет из другого приложения.

3. Названия и контактные данные. Латинское название бренда или адрес почты внутри арабского предложения должны читаться как цельный фрагмент. Для макета используйте реальные сочетания символов.

4. Поля ввода и элементы управления. Продумайте положение подписи, подсказки, иконки и сообщения об ошибке. Для пагинации и направленных стрелок отдельно определите, что означает движение вперёд в выбранной локали.

Как работать с направлением текста в Pixso

1. Выберите направление абзаца

Выделите текстовый блок и найдите переключатель направления в панели текстовых настроек. Выберите LTR или RTL по основному языку абзаца. Затем настройте выравнивание и ширину блока.

2. Отредактируйте смешанный текст

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

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

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

Удаление. Используйте Backspace и Delete на коротком пробном фрагменте, чтобы проверить результат на стыке направлений. Если выделена часть строки, убедитесь, что выделение охватывает именно нужный текст.

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

Два примера работы со смешанным текстом

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

Пример 1. Арабский интерфейс с названием продукта на латинице

Дизайнер готовит экран подписки на арабском языке. Название тарифа остаётся на латинице, рядом указана цена. Он задаёт RTL для абзаца и проверяет, что название, число и валюта расположены понятно.

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

Пример 2. Требования на одном языке, подписи — на другом

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

Поместите подпись рядом с соответствующим экраном или компонентом и добавьте короткое пояснение. Так направление текста и положение элемента можно обсуждать на конкретном примере.

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

Как включить BiDi в работу команды

Используйте реальные тексты

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

Проверяйте файлы после переноса

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

Фиксируйте правила компонента

Сохраните отдельные варианты LTR и RTL там, где меняется компоновка. Укажите, какие иконки отражаются, где располагаются подписи и что происходит при увеличении длины текста.

Начните с одного экрана в Pixso: настройте направление, вставьте реальные строки и сравните версии вместе с командой. После проверки примените согласованные правила к остальным компонентам.

Попробуйте Pixso бесплатно