Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
СПЕЦИФИКА ВЕРСТКИ
МУЛЬТИЯЗЫЧНЫХ
ВЕБ-ПРИЛОЖЕНИЙ
Тевосян Александр
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
Prochain SlideShare
Chargement dans…5
×

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

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

  • Soyez le premier à commenter

Доклад "Специфика верстки мультиязычных веб-приложений в 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

×