O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

957 visualizações

Publicada em

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

Publicada em: Software
  • Seja o primeiro a comentar

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

  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

×