Доклад Александра Тевосяна (Badoo) на MoscowJS. "Специфика верстки мультиязычных веб-приложений"

1. СПЕЦИФИКА ВЕРСТКИ
МУЛЬТИЯЗЫЧНЫХ
ВЕБ-ПРИЛОЖЕНИЙ
Тевосян Александр
HTML developer

2. 50 ЯЗЫКОВ+

3. О ЧЕМ ПОЙДЕТ РЕЧЬ
• Проблемы мультиязычных веб-приложений и
пути их решений
• Обзор решений и инструментов для верстки
LTR и RTL языков
• Тестирование и устранение ошибок на этапе
перевода

4. ПРОБЛЕМЫ
1.
2.

5. LTR

6. Design

11. КОНТРОЛЬ ПЕРЕВОДОВ

12. RTL

14. СПОСОБЫ РЕАЛИЗАЦИИ
ПОДДЕРЖКИ LTR/RTL
+ —
page.ltr.css
page.rtl.css
Загрузка одного в файла
Изменения требуется
дублировать в page.rtl.css
page.css
page.rtl.css
Не требуется
дублировать изменения
Загрузка двух файлов для
RTL
page.ltr-rtl.css Один файл
Большой объем кода.
Сложно поддерживать

15. • Атрибуты dir & lang
• Cелекторы [dir=“rtl”] & [dir=“ltr”]
• Псевдокласс :lang()
• Свойство direction: ltr || rtl
• Свойство unicode-bidi: normal || embed || bidi-
override || inherit

16. АВТОМАТИЗАЦИЯ RTL
LTR
RTL
PAGE.RTL.CSS
Convert property
Convert
value
Exclusions
Transformation
rules
+

17. TRANSFORMATION RULES
Properties Values
left
right
margin-*
padding-*
border-*
direction
float
clear
margin
padding
border-*
box-shadow

18. ИСКЛЮЧЕНИЯ
• /*@LTR BEGIN*/ RIGHT:10PX; /*@LTR END*/
• /*@RTL BEGIN*/ LEFT: 30PX; /*@RTL END*/
• /*@NOFLIP BEGIN*/ FLOAT: LEFT; /*@NOFLIP END*/

20. .ico--arrow-left {
/* @ltr begin */
background: url(arrow-left.png) no-repeat;
/* @ltr end */
/* @rtl begin */
background: url(arrow-right.png) no-repeat;
/* @rtl end */
}

21. ТЕСТИРОВАНИЕ
• QA
• Тестирование от команды
переводчиков

22. ТЕСТ ПЕРЕВОДЧИКОВ

23. ИНСТРУМЕНТЫ
Frameworks
Closure
styleshits
Less Sass
Libraries CSS Janus
css-flip
(rework)

24. – Юрий Насретдинов
https://github.com/badoo/rtl-css

25. CПАСИБО ЗА ВНИМАНИЕ
a.tevosyan@corp.badoo.com
facebook.com/altevosyan
facebook.com/BadooMoscow