Урок 8: RTL-компоненты — создание для обоих направлений
Приложение выглядит идеально на английском. Вы переключаетесь на иврит, и внезапно отступ оказывается не с той стороны, текст выравнивается по левому краю, а стрелка «назад» указывает не в ту сторону. Этот урок научит вас создавать компоненты с `logical properties` (логическими свойствами) — `ms-4`
Логическое свойство — как сказать «рука, которой вы пишете» вместо «правая рука»: оно верно и для правши, и для левши. `ms-4` означает «отступ со стороны начала», поэтому он оказывается с правильной стороны и на иврите, и на английском.
- логическое свойство
- Свойство, которое ссылается на «начало» и «конец» по направлению письма (`ms`, `me`, `ps`, `text-start`) вместо «лево» и «право», — поэтому оно само переворачивается в RTL.
- физическое свойство
- Свойство, которое привязывает значение к фиксированной стороне экрана (`ml`, `mr`, `text-left`). Оно не учитывает направление, поэтому остаётся на той же стороне даже когда UI переворачивается в RTL, — ломая макет.
- атрибут dir
- Атрибут `dir="rtl"` или `dir="ltr"` (обычно на `<html>`), задающий направление письма. Логические свойства опираются на него, чтобы понять, в какую сторону указывает «начало».
- зеркальное отражение значков
- Горизонтальное отражение направленных значков (стрелка назад, шеврон) в RTL, чтобы они указывали правильно. Ненаправленные значки (логотип, медиаплеер) не отражаются.