Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

969 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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

×