Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
СПЕЦИФИКА ВЕРСТКИ
МУЛЬТИЯЗЫЧНЫХ
ВЕБ-ПРИЛОЖЕНИЙ
Тевосян Александр
HTML developer
50 ЯЗЫКОВ+
О ЧЕМ ПОЙДЕТ РЕЧЬ
• Проблемы мультиязычных веб-приложений и
пути их решений
• Обзор решений и инструментов для верстки
LTR...
ПРОБЛЕМЫ
1.
2.
LTR
Design
КОНТРОЛЬ ПЕРЕВОДОВ
RTL
СПОСОБЫ РЕАЛИЗАЦИИ
ПОДДЕРЖКИ LTR/RTL
+ —
page.ltr.css
page.rtl.css
Загрузка одного в файла
Изменения требуется
дублировать...
• Атрибуты dir & lang
• Cелекторы [dir=“rtl”] & [dir=“ltr”]
• Псевдокласс :lang()
• Свойство direction: ltr || rtl
• Свойс...
АВТОМАТИЗАЦИЯ RTL
LTR
RTL
PAGE.RTL.CSS
Convert property
Convert
value
Exclusions
Transformation
rules
+
TRANSFORMATION RULES
Properties Values
left
right
margin-*
padding-*
border-*
direction
float
clear
margin
padding
border-*...
ИСКЛЮЧЕНИЯ
• /*@LTR BEGIN*/ RIGHT:10PX; /*@LTR END*/
• /*@RTL BEGIN*/ LEFT: 30PX; /*@RTL END*/
• /*@NOFLIP BEGIN*/ FLOAT: ...
.ico--arrow-left {
/* @ltr begin */
background: url(arrow-left.png) no-repeat;
/* @ltr end */
/* @rtl begin */
background:...
ТЕСТИРОВАНИЕ
• QA
• Тестирование от команды
переводчиков
ТЕСТ ПЕРЕВОДЧИКОВ
ИНСТРУМЕНТЫ
Frameworks
Closure
styleshits
Less Sass
Libraries CSS Janus
css-flip
(rework)
– Юрий Насретдинов
https://github.com/badoo/rtl-css
CПАСИБО ЗА ВНИМАНИЕ
a.tevosyan@corp.badoo.com
facebook.com/altevosyan
facebook.com/BadooMoscow
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Доклад "Специфика верстки мультиязычных веб-приложений в Badoo" на MoscowJS Meetup
Upcoming SlideShare
Loading in …5
×

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

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

  • Be the first to comment

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

  1. 1. СПЕЦИФИКА ВЕРСТКИ МУЛЬТИЯЗЫЧНЫХ ВЕБ-ПРИЛОЖЕНИЙ Тевосян Александр HTML developer
  2. 2. 50 ЯЗЫКОВ+
  3. 3. О ЧЕМ ПОЙДЕТ РЕЧЬ • Проблемы мультиязычных веб-приложений и пути их решений • Обзор решений и инструментов для верстки LTR  и RTL языков • Тестирование и устранение ошибок на этапе перевода
  4. 4. ПРОБЛЕМЫ 1. 2.
  5. 5. LTR
  6. 6. Design
  7. 7. КОНТРОЛЬ ПЕРЕВОДОВ
  8. 8. RTL
  9. 9. СПОСОБЫ РЕАЛИЗАЦИИ ПОДДЕРЖКИ LTR/RTL + — page.ltr.css page.rtl.css Загрузка одного в файла Изменения требуется дублировать в page.rtl.css page.css page.rtl.css Не требуется дублировать изменения Загрузка двух файлов для RTL page.ltr-rtl.css Один файл Большой объем кода. Сложно поддерживать
  10. 10. • Атрибуты dir & lang • Cелекторы [dir=“rtl”] & [dir=“ltr”] • Псевдокласс :lang() • Свойство direction: ltr || rtl • Свойство unicode-bidi: normal || embed || bidi- override || inherit
  11. 11. АВТОМАТИЗАЦИЯ RTL LTR RTL PAGE.RTL.CSS Convert property Convert value Exclusions Transformation rules +
  12. 12. TRANSFORMATION RULES Properties Values left right margin-* padding-* border-* direction float clear margin padding border-* box-shadow
  13. 13. ИСКЛЮЧЕНИЯ • /*@LTR BEGIN*/ RIGHT:10PX; /*@LTR END*/ • /*@RTL BEGIN*/ LEFT: 30PX; /*@RTL END*/ • /*@NOFLIP BEGIN*/ FLOAT: LEFT; /*@NOFLIP END*/
  14. 14. .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 */ }
  15. 15. ТЕСТИРОВАНИЕ • QA • Тестирование от команды переводчиков
  16. 16. ТЕСТ ПЕРЕВОДЧИКОВ
  17. 17. ИНСТРУМЕНТЫ Frameworks Closure styleshits Less Sass Libraries CSS Janus css-flip (rework)
  18. 18. – Юрий Насретдинов https://github.com/badoo/rtl-css
  19. 19. CПАСИБО ЗА ВНИМАНИЕ a.tevosyan@corp.badoo.com facebook.com/altevosyan facebook.com/BadooMoscow

×