Урок 4: RTL и PWA — интерфейс, который работает на обоих языках и устанавливается как приложение

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

Логическое CSS-свойство понимает направление текста. Вместо «добавить пространство слева» оно говорит «добавить пространство в начале». В RTL «начало» — справа. В LTR «начало» — слева.

логические CSS-свойства: CSS-свойства, которые обращаются к направлению текста («start», «end») вместо физического направления («left», «right»). Корректно работают как в RTL, так и в LTR.
PWA (Progressive Web App): Веб-приложение, которое можно установить на домашний экран iOS/Android, работает офлайн и отображается без адресной строки, как нативное приложение.
BiDi (двунаправленный текст): Текст, смешивающий направления, — иврит с иностранными числами, английские названия брендов внутри ивритских предложений. С этим справляются HTML `<bdi>` и CSS `unicode-bidi`.