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.

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

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

  • Login to see the comments

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

×