"Специфика верстки мультиязычных...
TRANSCRIPT
СПЕЦИФИКА ВЕРСТКИ МУЛЬТИЯЗЫЧНЫХ ВЕБ-ПРИЛОЖЕНИЙ
Тевосян АлександрHTML developer
50 ЯЗЫКОВ+
О ЧЕМ ПОЙДЕТ РЕЧЬ
• Проблемы мультиязычных веб-приложений и пути их решений
• Обзор решений и инструментов для верстки LTR и RTL языков
• Тестирование и устранение ошибок на этапе перевода
ПРОБЛЕМЫ
1.
2.
LTR
Design
КОНТРОЛЬ ПЕРЕВОДОВ
RTL
СПОСОБЫ РЕАЛИЗАЦИИ ПОДДЕРЖКИ LTR/RTL
+ —page.ltr.css page.rtl.css
Загрузка одного в файла Изменения требуется дублировать в page.rtl.css
page.csspage.rtl.css
Не требуется дублировать изменения
Загрузка двух файлов для RTL
page.ltr-rtl.css Один файл Большой объем кода. Сложно поддерживать
• Атрибуты dir & lang
• Cелекторы [dir=“rtl”] & [dir=“ltr”]
• Псевдокласс :lang()
• Свойство direction: ltr || rtl
• Свойство unicode-bidi: normal || embed || bidi-override || inherit
АВТОМАТИЗАЦИЯ RTL
LTR
RTL
PAGE.RTL.CSS
Convert property
Convert value
ExclusionsTransformation
rules
+
TRANSFORMATION RULES
Properties Values
leftrightmargin-*padding-*border-*
directionfloatclearmarginpaddingborder-*box-shadow
ИСКЛЮЧЕНИЯ
• /*@LTR BEGIN*/ RIGHT:10PX; /*@LTR END*/
• /*@RTL BEGIN*/ LEFT: 30PX; /*@RTL END*/
• /*@NOFLIP BEGIN*/ FLOAT: LEFT; /*@NOFLIP END*/
.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 */ }
ТЕСТИРОВАНИЕ
• QA
• Тестирование от команды переводчиков
ТЕСТ ПЕРЕВОДЧИКОВ
ИНСТРУМЕНТЫ
Frameworks Closure styleshits Less Sass
Libraries CSS Janus css-flip(rework)
