Направление текста и доступный интерфейс
Русская и английская версии «Параллели» читаются слева направо. Это не означает, что весь интерфейс можно навсегда привязать к понятиям «левый отступ» и «стрелка вправо». В библиотеке могут появиться тексты на арабском или иврите, а название автора на таком языке может встретиться уже сегодня внутри русского документа.
В этом уроке подготовим оболочку к разным направлениям текста и разберём смешанные фрагменты. Полный арабский перевод курса мы не объявляем готовым: используем отдельный демонстрационный блок для проверки модели. Язык содержания, направление письма и направление отдельного элемента задаются осмысленно.
Направление принадлежит документу
Корневой dir="rtl" меняет базовое направление текста и влияет на размещение некоторых элементов. Он не является командой перевести слова и не меняет автоматически смысл всех стрелок и иконок. Для русских и английских документов конфигурация сохраняет ltr; демонстрационный арабский блок получает собственное значение.
Новый фрагмент HTML:
<section lang="ar" dir="rtl" aria-label="Пример направления текста">
<h2>مكتبة</h2>
<p>ProfessorWeb <bdi>reader-17@example.com</bdi></p>
</section>Арабский заголовок обозначает библиотеку и нужен только для маленькой демонстрации направления. Остальные документы проекта продолжают иметь свой настоящий lang. Не присваивайте всему сайту lang="ar" ради расположения одного блока: средство чтения может начать неправильно произносить русское содержание.
bdi изолирует вставленный фрагмент с собственным направлением. Это полезно для имени, адреса электронной почты или ID, полученного из данных. Изоляция помогает не смешать порядок соседней пунктуации. Для известного технического фрагмента можно дополнительно указать dir="ltr", если это соответствует его назначению.
Правила dir, изоляции и смешанного содержимого рассматриваются в рекомендациях W3C по направлению текста. Для редактора важно понимать результат в конкретном документе: набор атрибутов не заменяет чтение страницы человеком, владеющим соответствующим языком.
Логические свойства CSS
Вместо margin-left и padding-right используем свойства, связанные с началом и концом строки. Тогда оформление описывает отношение элементов, а не случайную сторону экрана. Для карточки статьи добавим полный новый набор правил:
.article-card {
padding-inline: 1.25rem;
padding-block: 1rem;
border-inline-start: 0.2rem solid #8750d8;
text-align: start;
}
.article-card__meta {
margin-inline-start: 0.5rem;
}
.article-card__title {
overflow-wrap: anywhere;
}
code, pre {
direction: ltr;
text-align: left;
}Акцентная граница следует началу строки: для ltr это одна сторона, для rtl — другая. Фрагмент кода оставляем в привычном направлении, потому что синтаксис программы не становится арабским после перевода пояснений. Направление визуального оформления не должно переставлять знаки выражения или части пути файла.
Не все физические свойства нужно запрещать. Например, конкретная иллюстрация может содержать фиксированную координатную систему. Смысл перехода на логические свойства — выражать отношения текста правильно, а не механически заменить каждое слово left в проекте. При рассмотрении элемента сначала определите, что значит выбранная сторона.
Порядок чтения и порядок фокуса
CSS order и row-reverse могут изменить видимый порядок, не меняя порядок элементов в документе. В результате клавиатурный фокус проходит иначе, чем ожидает человек по расположению кнопок. Для переключателя языка и последовательности уроков желательно сохранять понятный исходный порядок DOM и дать направлению текста выполнить необходимое расположение.
Кнопки «Предыдущий урок» и «Следующий урок» обозначают последовательность курса. Переведённые подписи важнее одной стрелки. Символ направления может зависеть от языка интерфейса, но действие должно оставаться тем же: перейти к предыдущему или следующему ID из явного списка. Перевод названий не должен сортировать этот список заново.
У иконки внешней ссылки нет обязанности зеркально отражаться вместе с интерфейсом. Логотип, фотография и некоторые диаграммы также сохраняют своё направление. Решение принимается по смыслу изображения. Зеркальная копия скриншота редактора кода, например, станет неверной инструкцией.
Длинные подписи и масштабирование
Даже без rtl перевод обнаруживает жёсткие размеры. Русская кнопка может быть короче немецкой подписи, а английское предложение — короче русского. Не ограничивайте все кнопки шириной, рассчитанной по одному переводу. Предусмотрите перенос строки, разумный минимум и свободное увеличение высоты.
Для демонстрации редактор может временно удлинить сообщения в словаре. Такой искусственный текст помогает увидеть обрезание, но не считается настоящим переводом. Убедитесь, что заголовок, переключатель и статус после действия не накладываются друг на друга при увеличенном масштабе. Эти визуальные действия в текущей подготовке не выполнялись; они входят в будущую приёмку интерфейса.
Сокращение многоточием не должно скрывать единственное различие действий. Если две ссылки выглядят как «Перейти к…», человек не понимает назначение. Полное доступное имя элемента должно соответствовать видимому смыслу, а не существовать только в техническом атрибуте, неизвестном читателю.
Язык ошибки и сообщения статуса
Ошибка загрузки данных должна быть описана на языке текущего интерфейса. Сообщение сервера с английским стеком вызова не подходит как публичная подпись. В учебном проекте техническая причина может попасть в журнал, а пользователь увидит сообщение из словаря, связанное с доступным действием.
Для статуса сохранения используем role="status", уже знакомый по уроку о сообщениях. Изменение текста должно быть понятным без переноса фокуса в конец страницы. Если язык отдельного статуса отличается от документа, атрибут lang нужно задать на самом элементе. Однако лучше не смешивать языки случайно из-за отсутствующего словаря.
Технические фрагменты рядом с обычным текстом
В учебной статье постоянно встречаются имена пакетов, пути и команды. Даже на русской странице они могут находиться рядом с именем автора другого направления. Выделяйте такой фрагмент семантически и не пытайтесь исправить порядок вставкой случайных пробелов. Пробел влияет на текст, но не задаёт изоляцию направления.
Особенно внимательно рассматривайте подписи, заканчивающиеся скобкой или двоеточием: соседний фрагмент может визуально изменить положение пунктуации. Небольшой пример с реальными типами строк полезнее проверки страницы только одним коротким заголовком. Для формы задавайте направление по смыслу поля: путь файла или адрес электронной почты имеет другой договор, чем свободное описание на языке пользователя.
Эти правила не требуют объявлять третий язык поддержанным целиком. Можно подготовить компоненты к смешанному содержимому заранее, а полноценный перевод выпустить после работы с носителем языка.
Мы подготовили оболочку к разному направлению текста и сохранили смысл навигации. Финальный урок объединит реестр, страницы, словари и метаданные в один выпуск. Проверки перевода и интерфейса останутся отдельными подтверждениями, которые нельзя вывести только из наличия файлов.