RTL по-настоящему: чек-лист вёрстки на иврите

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

1. Отступы задаются логически, а не сторонами

Любой `margin-left` в ивритской версии оказывается не с той стороны. Заменяются на логические свойства, которые сами понимают направление:

• `margin-left` → `margin-inline-start`
• `padding-right` → `padding-inline-end`
• `border-left` → `border-inline-start`
• `text-align: left` → `text-align: start`

В современных инструментах вёрстки это уже встроено: классы `ps-4` и `me-2` работают в обе стороны. Старый код с `left`/`right` придётся переписывать.

2. Зеркалить надо не всё

Стрелки «далее», прогресс, порядок колонок, выпадающие меню — зеркалятся. А вот это оставляем как есть:

• Логотипы и фирменные знаки.
• Номера телефонов и любые цифры.
• Латинские названия: Google, WhatsApp, названия марок.
• Иконки воспроизведения и часы — они не про направление письма.

3. Главная ловушка: смешанный текст

Иврит с цифрами внутри — это двунаправленный текст, и браузер решает порядок сам. Цена `5 000 ₪` в ивритской фразе разворачивается так, что знак шекеля уезжает не на ту сторону числа. То же с телефонами и диапазонами.

Лечится тегом `bdi`: он говорит браузеру, что внутри — отдельный кусок со своим направлением. Мы поймали эту ошибку на собственном сайте дважды: сначала в ценах услуг, потом в номере телефона.

4. Шрифт

Самая частая техническая ошибка: взять красивый шрифт и не проверить, есть ли в нём иврит. В Unbounded, Inter и большинстве «дизайнерских» гарнитур его нет вовсе — браузер молча подставит системный, и ивритская версия будет выглядеть чужой.

• Рабочие бесплатные гарнитуры с ивритом: Heebo, Rubik, Assistant, Frank Ruhl Libre.
• Подменять шрифт нужно по направлению письма, а не по языку интерфейса.
• У иврита нет заглавных букв и почти нет выносных элементов, поэтому строка выглядит плотнее: межстрочное расстояние обычно приходится увеличивать.
• Отдельно проверьте знак шекеля. В JetBrains Mono его, например, нет — и он рисуется квадратом.

5. Разметка для поиска

Две языковые версии должны быть связаны `hreflang`, иначе Google считает их дублями и показывает одну. Плюс `lang` и `dir` на теге `html` — от них зависит и подстановка шрифта, и то, как программы чтения с экрана произносят страницу.

Чек-лист перед сдачей

1. Открыть ивритскую версию и пройти взглядом справа налево: меню, кнопки, стрелки, формы.
2. Проверить каждое место, где цифра стоит рядом с ивритским словом: цены, телефоны, даты, диапазоны.
3. Убедиться, что шрифт содержит иврит, а не подставляется системный.
4. Проверить формы: где стоит курсор, куда смещается подпись поля, как выглядит ошибка.
5. Посмотреть на телефоне: мобильное меню и карусели — частые места, где зеркалирование забывают.