Двунаправленный текст в Pixso: безупречный дизайн на разных языках

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

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

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

Новая функция Pixso 2.0 «Двунаправленный» поддерживает как RTL, так и LTR порядок отображения. Она даже позволяет смешивать их в одном текстовом поле, обеспечивая правильное отображение разных языков на одной странице. Это ключевой момент для многоязычного дизайна продуктов и локализации.

Зачем нужен двунаправленный текст?

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

1. Хаотичное выравнивание текста

Инструменты без поддержки двунаправленности выравнивают языки RTL, такие как арабский или иврит, по LTR. По умолчанию они выравниваются по левому краю. Это мешает естественному чтению. Буквы сгруппированы слева, а правая сторона, где должен начинаться текст RTL, остается пустой. Даже простые предложения превращаются в непонятные наборы символов, что замедляет чтение.

2. Путаница с курсором

Набор текста RTL превращается в игру в угадайку. Переместить курсор влево? Он перескакивает в конец следующего символа, а не в его начало. Нажать клавишу Backspace, чтобы удалить ошибку? Инструмент удаляет символ слева от курсора (неправильное направление для RTL), вынуждая пользователей перепечатывать целые абзацы, чтобы исправить ошибки.

3. Фрагментация смешанного текста

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

4. Статические элементы интерфейса

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

5. Некорректный экспорт

Экспорт дизайнов со смешанным текстом LTR/RTL обычно нарушает форматирование. То, что выглядит приемлемо в инструменте, превращается в беспорядочную смесь в файлах передачи, с перевернутым или невыровненным направлением текста. То, что выглядит (более или менее) связно в инструменте, превращается в беспорядочный код в файлах передачи, вынуждая разработчиков вручную настраивать направление текста, что приводит к потере времени и риску несоответствий между дизайном и конечным продуктом.

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

Когда нужна двунаправленная поддержка?

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

В дизайне продуктов двунаправленная поддержка используется в следующих сценариях:

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

2. Области ввода и отображения текста: окна чата, разделы комментариев, редакторы электронной почты — везде, где пользователи вводят текст, необходимо обрабатывать смешанный текст с направлением слева направо и справа налево. Поддержка двунаправленности позволяет пользователям вводить и читать текст на нескольких языках без сбоев и неудобств.

3. Смешанный текстовый контент: интерфейсы RTL часто включают элементы LTR: английские фразы, цифры или имена собственные. Двунаправленный текст организует их бесшовно, сохраняя макет чистым и легко читаемым.

4. Направление элементов управления и компонентов: поля ввода, раскрывающиеся списки, полосы прокрутки, пагинация — все они автоматически настраивают свое выравнивание и логику взаимодействия с двунаправленным текстом. Кнопки и меню следуют за языком, а не противоречат ему.

Как применить двунаправленный текст?

1. Переключение направления текста

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

2. Редактирование текста RTL

• Перемещение курсора: в тексте RTL перемещение влево перемещает курсор в конец следующего символа. Перемещение вправо перемещает курсор в начало предыдущего символа. Это полностью противоположно LTR.

• Вставка текста: введите текст в месте мигания курсора, и новые слова появятся справа от него. Это естественно для RTL-текста.

• Разрывы строк: строки RTL начинаются справа и заканчиваются слева. Нажмите Enter слева, и курсор останется на левом крае текстового поля.

• Удаление текста: нажмите Delete, и будет удален предыдущий символ. В RTL это означает удаление того, что находится справа от курсора.

• Списки: в тексте RTL маркеры упорядоченных и неупорядоченных списков отображаются справа. В тексте LTR они отображаются слева — автоматически настраиваются для удобства чтения.

2 примеры двунаправленных приложений

«Безупречный дизайн на разных языках» означает, что команды из разных мест, говорящие на разных языках, могут работать вместе без сбоев. Двунаправленный текст делает это возможным, потому что решает реальные проблемы в межкомандной работе. Есть 2 примера с разных точек зрения:

📑 Пример 1:

Представьте, что китайский дизайнер и разработчик из Ближнего Востока работают вместе. Дизайнер настраивает макет RTL: панели навигации начинаются справа, кнопки выравниваются по правому краю, а английские фразы плавно смешиваются с арабскими. С помощью традиционных инструментов разработчик может увидеть что-то другое: навигация остается слева направо, кнопки перемещаются влево, а английский язык застревает в странных местах. Это приводит к переделке, потому что дизайн и код не совпадают.

Двунаправленный текст решает эту проблему. Разработчик видит то, что настроил дизайнер — то же направление текста, тот же макет. Больше не нужно переделывать работу. Работа идет быстрее.

📑 Пример 2:

Менеджеры по продуктам часто пишут требования на английском языке (LTR), но отмечают особые правила для арабских (RTL) интерфейсов, например: «Кнопка «Отправить» находится справа (приоритетное место в RTL)». Без двунаправленного текста английский язык может быть вынужденно смещен вправо, а арабский — влево. Слова перекрываются, строки разбиваются неправильно. Члены команды запутываются: «Какое «справа» они имеют в виду?

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

Двунаправленный текст устраняет языковые барьеры в совместной работе. Он позволяет глобальным командам сосредоточиться на создании отличных дизайнов — вместе, без проблем.

Ключевые преимущества двунаправленного текста

1. Поддержка языков RTL

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

2. Совместимость со Sketch

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

3. Простые смешанные макеты

Двунаправленный текст позволяет смешивать LTR и RTL в одном текстовом поле. Сложные макеты? Готово. Не нужно разделять текст или идти на компромисс в дизайне.

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

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