Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wait, ?tahW: The Twisted Road to Right to Left Support (LCA2016)

Wait, ?tahW: The Twisted Road to Right to Left Support (LCA2016)

Presented at linux.conf.au Geelong, 2016

Abstract here: http://linux.conf.au/schedule/30151/view_talk?day=wednesday

B1720ad8dd59327f01f704eb8870247f?s=128

Moriel Schottlender

February 03, 2016
Tweet

More Decks by Moriel Schottlender

Other Decks in Technology

Transcript

  1. Wait, ?tahW The Twisted Road to Right-to-Left Language Support .

    Moriel Schottlender Collaboration Team The Wikimedia Foundation
  2. Basics

  3. What is language?

  4. What is language? not

  5. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
  6. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
  7. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z This is script А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  8. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  9. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  10. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic LTR Languages: English, Spanish, Russian, French... ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  11. A B C D E F G H I J

    K L M N O P Q R S T U V W X Y Z Written left to right → → → ←←← Written right to left This is script LTR Languages: English, Spanish, Russian, French... RTL Languages: Arabic, Hebrew, Yiddish, Persian, Urdu... Hebrew Arabic Latin А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я Cyrillic ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א ي و ‍ ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
  12. Why should we care?

  13. Thinking about RTL exposes issues related to other language behavior

  14. Thinking about RTL exposes issues related to other language behavior

    Solving these technical issues makes your software better
  15. Right-to-Left user base is growing

  16. Right-to-Left user base is growing Arabic ~350,000,000 speakers Farsi ~110,000,000

    speakers Urdu ~159,000,000 speakers Pashto ~20,000,000 speakers … and more ...
  17. Right-to-Left user base is growing Arabic ~350,000,000 speakers Farsi ~110,000,000

    speakers Urdu ~159,000,000 speakers Pashto ~20,000,000 speakers ~800,000,000 speakers … and more ...
  18. Right-to-Left user base is growing Persian Wikipedia ~514,000 users ~460,000

    articles Arabic Wikipedia ~1,000,000 users ~375,000 articles Hebrew Wikipedia ~277,000 users ~175,000 articles
  19. What's the problem?

  20. Reversed mental model

  21. Reversed mental model

  22. Reversed mental model Script direction affects more than just writing

    and reading
  23. Reversed mental model Where your eyes travel on the screen

    Where you expect to see elements on the screen How you define "before" and "after" And "start" and "end" Your expectation from typing and interacting with the content Script direction affects more than just writing and reading
  24. History

  25. In the beginning, Computers knew not of RTL ASCII ru13z!

  26. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular**
  27. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular** ** Super-overly-simplified revisionist history for the sake of simplicity. There actually were RTL programs before the Internet, but the Internet made the progress for RTL support much more crucial.
  28. In the beginning, Computers knew not of RTL ASCII ru13z!

    But then The Internet became popular** RTL websites sprung up And then ** Super-overly-simplified revisionist history for the sake of simplicity. There actually were RTL programs before the Internet, but the Internet made the progress for RTL support much more crucial.
  29. Solution:

  30. Solution: Write backwards

  31. Solution: Write backwards

  32. … And not just on the web

  33. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324
  34. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324
  35. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  36. … And not just on the web 2008: Ubuntu bug

    #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  37. … And not just on the web םלוע םולש 2008:

    Ubuntu bug #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  38. … And not just on the web םלוע םולש 2008:

    Ubuntu bug #325324 https://bugs.launchpad.net/ubuntu/+source/vte/+bug/325324 2016 Ubuntu terminal 2009: Ubuntu bug #389428 Stop importing RTL translations for CLI apps into Ubuntu https://bugs.launchpad.net/ubuntu/+source/gnome-terminal/+bug/389428
  39. enod eb ot dah gnihtemoS

  40. Something had to be done

  41. Solution: Logical and Visual rendering

  42. Solution: Logical and Visual rendering Visual: םלוע םולש 1 2

    3 4 Byte order:
  43. Solution: Logical and Visual rendering Visual: םלוע םולש Someone had

    to write this backwards! 1 2 3 4 Byte order:
  44. Solution: Logical and Visual rendering Visual: םלוע םולש Logical: םלוע

    םולש Someone had to write this backwards! 1 2 3 4 Byte order: 1 2 3 4 Byte order:
  45. Solution: Logical and Visual rendering ( ) remember these Visual:

    םלוע םולש Logical: םלוע םולש Someone had to write this backwards! 1 2 3 4 Byte order: 1 2 3 4 Byte order:
  46. Fast forward

  47. Flipping to the RTL Mental Model

  48. LibreOffice Impress

  49. English interface (LTR) LibreOffice Impress

  50. English interface (LTR) Hebrew interface (RTL) LibreOffice Impress

  51. English Wikipedia (LTR) Hebrew Wikipedia (RTL)

  52. Everything flips

  53. Everything flips … but should it?

  54. Things that shouldn't flip

  55. LTR RTL? Directions

  56. LTR RTL Directions

  57. Left Center Right LTR RTL Directions

  58. Toolbar buttons LTR RTL

  59. LTR RTL Toolbar buttons

  60. LTR RTL Toolbar buttons

  61. LTR RTL Toolbar buttons Undo Redo

  62. LTR RTL Undo Redo Toolbar buttons Undo Redo

  63. Toolbar buttons Your brain... LTR RTL Undo Redo Undo Redo

  64. Bonus: LibreOffice List Toolbar LTR RTL

  65. Bonus: LibreOffice List Toolbar LTR RTL

  66. Bonus: LibreOffice List Toolbar LTR RTL 2 5 →

  67. Analyze and Anticipate SOLUTION:

  68. SOLUTION: Analyze and Anticipate (And listen to your RTL users)

  69. Dealing with multiple directionalities

  70. Dealing with multiple directionalities or: Good luck with that

  71. English content

  72. English content with Hebrew interface

  73. Content English content with Hebrew interface

  74. Content Interface English content with Hebrew interface

  75. English content with Hebrew interface Hebrew content with English interface

  76. Distinguishing between content and interface

  77. RTL content RTL interface RTL content LTR interface

  78. RTL content RTL interface RTL content LTR interface Content Interface

  79. RTL content RTL interface RTL content LTR interface Content Interface

  80. RTL content RTL interface RTL content LTR interface Content Interface

  81. RTL content RTL interface RTL content LTR interface Content Interface

  82. RTL content RTL interface RTL content LTR interface Content Interface

  83. RTL content RTL interface RTL content LTR interface Content Interface

  84. RTL content RTL interface RTL content LTR interface Content Interface

  85. RTL content RTL interface RTL content LTR interface Content Interface

  86. RTL content RTL interface RTL content LTR interface Content Interface

  87. RTL content RTL interface RTL content LTR interface Content Interface

  88. SOLUTION: Think about your interface carefully

  89. Think about your interface carefully (And argue in your bug

    tracker) SOLUTION:
  90. Typing in Mixed Directionalities or: meh, do I have to?

  91. Typing in Mixed Directionalities (No, but I do) or: meh,

    do I have to?
  92. RTL context Hi... how are you? Typing in LTR and

    RTL ?עמשנ המ ...ייה LTR context Beginning End End Beginning
  93. RTL context Hi... how are you ? Typing in LTR

    and RTL עמשנ המ ...ייה? LTR context Beginning End End Beginning
  94. SOLUTION: Teach computers to understand context

  95. English 123 Numbers

  96. English 123 Numbers תירבע 123

  97. DEMO: Typing with numbers

  98. English 123 Numbers תירבע 123

  99. English 123 Numbers תירבע 123 תירבע 1 23

  100. English 123 Numbers תירבע 123 תירבע 1 23 תירבע 1

    2 3
  101. English 123 Numbers תירבע 123 תירבע 1 23 תירבע 1

    2 3
  102. Unicode Bidirectional Algorithm (A very generalized and quick primer)

  103. Unicode Bidirectional Algorithm Strong Weak Neutral (A very generalized and

    quick primer)
  104. Unicode Bidirectional Algorithm Strong Weak Neutral Affect entities around them

    Are affected by entities around them Aren't affected and are not affecting (A very generalized and quick primer)
  105. Unicode Bidirectional Algorithm Alphabet Punctuation, Digits* Whitespace, Tabs, etc Strong

    Weak Neutral Affect entities around them Are affected by entities around them Aren't affected and are not affecting (A very generalized and quick primer)
  106. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English
  107. English 1 2 3 Hebrew 1 2 3 English Advanced

    numbers Hint Strong
  108. English 1 2 3 Hebrew 1 2 3 English Advanced

    numbers Hint Strong Weak
  109. English 1 2 3 Hebrew 1 2 3 English Advanced

    numbers Hint Strong Weak Neutral
  110. DEMO: Mixed sentences with numbers

  111. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  112. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  113. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English
  114. Advanced numbers English 1 2 3 Hebrew 1 2 3

    English English 1 2 3 תירבע 1 2 3 English (This is the Unicode Bidirectional Algorithm)
  115. The Misleading Keyboard

  116. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  117. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  118. https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Esc Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ~ ` ! 1 @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Tab Shift Backspace Enter Ctrl Alt Caps Lock Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  119. Caret movement English 1 2 3 תירבע 1 2 3

    English F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del .
  120. English 1 2 3 תירבע 1 2 3 English F1

    F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  121. DEMO: Caret movement Visual + Logical

  122. Caret movement English 1 2 3 תירבע 1 2 3

    English LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right
  123. English 1 2 3 תירבע 1 2 3 English Visual

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  124. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right Caret movement
  125. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = W E R T Y U I O P { [ } ] S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Go to the right forward Caret movement
  126. English 1 2 3 תירבע 1 2 3 English Logical

    caret movement LOGICAL VISUAL Your brain on BiDi Caret movement
  127. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . RTL context LTR context Beginning End End Beginning
  128. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning
  129. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text)
  130. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text) (טסקט)
  131. Parentheses F1 F2 F3 F4 F5 F6 F7 F8 F9

    F10 F11 F12 Power Sleep Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down @ 2 # 3 $ 4 % 5 ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Q W E R T Y U I O P { [ } ] A S D F G H J K L : ; ” ’ ¦ \ Z X C V B N M < > ? Shift Num Lock Caps Lock Scroll Lock Num Lock / * − + Enter Backspace Enter Alt Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , 7 8 9 4 5 6 1 2 3 0 Home PgUp End PgDn Ins Del . Open parenthesis Close parenthesis RTL context LTR context Beginning End End Beginning (text) (טסקט)
  132. Parentheses F5 F6 F7 F8 F9 F10 F11 ^ 6

    & 7 * 8 ( 9 ) 0 _ - + = Y U I O P { [ } ] Ba Web E-Mail −Vol Mute Previous Next Menu Tuner RTL context ) (
  133. Parentheses Your brain typing RTL

  134. F5 F6 F7 F8 F9 F10 F11 F12 Power Sleep

    Wake Up Print Scrn SysRq Scroll Lock Pause Break Insert Home Page Up Delete End Page Down ^ 6 & 7 * 8 ( 9 ) 0 _ - + = Y U I O P { [ } ] G H J K L : ; ” ’ ¦ \ B N M < > ? Shift Backspace Enter Alt Ctrl Web E-Mail +Volume −Volume Mute Previous Next Menu Tuner / . , Open Close Parentheses
  135. SOLUTION: Changing terminology

  136. Left Right

  137. Left Right Before After Backwards Forwards Start End

  138. Left Right Before After Backwards Forwards Start End LTR RTL

  139. Left Right Before After Backwards Forwards Start End LTR RTL

  140. Bonus: Emoticons (: ):

  141. Bonus: Emoticons : D (: ): : P < 3

    3 <
  142. ANOTHER SOLUTION: Control characters

  143. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) MSchottlender (WMF (
  144. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Embedding • <span dir="rtl">...</span> • U+202A: LEFT-TO-RIGHT EMBEDDING (LRE) • U+202B: RIGHT-TO-LEFT EMBEDDING (RLE) MSchottlender (WMF) LRE
  145. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Isolation • <bdi dir="rtl"></bdi> • U+200E: LEFT-TO-RIGHT MARK (LRM) • U+200F: RIGHT-TO-LEFT MARK (RLM) MSchottlender (WMF)LRM
  146. Control characters RTL context LTR context Beginning End End Beginning

    MSchottlender (WMF) Override • <bdo dir="rtl">...</bdo> • U+202D: LEFT-TO-RIGHT OVERRIDE (LRO) • U+202E: RIGHT-TO-LEFT OVERRIDE (RLO) (FMW) rednelttohcSM RLO
  147. DEMO: Animated JPEG

  148. \u202epmb.gif

  149. \u202epmb.gif fig.bmp #!/usr/bin/env python import shutil shutil.copy("animated.gif", u"\u202Epmb.gif") Code by

    David Chan
  150. \u202epmb.gif fig.bmp #!/usr/bin/env python import shutil shutil.copy("animated.gif", u"\u202Epmb.gif") Code by

    David Chan
  151. \u202epmb.gif fig.bmp #!/usr/bin/env python import shutil shutil.copy("animated.gif", u"\u202Epmb.gif") Code by

    David Chan
  152. \u202epmb.gif fig.bmp #!/usr/bin/env python import shutil shutil.copy("animated.gif", u"\u202Epmb.gif") Code by

    David Chan
  153. The Expectations of RTL Users

  154. The Expectations of RTL Users non-existing

  155. https://commons.wikimedia.org/wiki/File:Wouldn%27t_want_a_wooden_wheel_would_you_-_Flickr_-_exfordy.jpg

  156. None
  157. None
  158. None
  159. None
  160. Demo: Typing RTL in LTR context + HTML in RTL

    content
  161. SOLUTION:

  162. SOLUTION: Fix all teh things

  163. Summary

  164. RTL users are used to bad behavior

  165. RTL users are used to bad behavior This is how

    computers work
  166. RTL users are used to bad behavior This is how

    computers work By dealing with these questions
  167. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard
  168. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues
  169. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better
  170. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better We gain more participation from all over the world
  171. RTL users are used to bad behavior This is how

    computers work By dealing with these questions We often set the standard Language issues expose other interaction issues We make our product better We gain more participation from all over the world We improve our accessibility
  172. Supporting Right to Left is challenging

  173. Supporting Right to Left is challenging brain twisting

  174. Supporting Right to Left is challenging brain twisting occasionally frustrating

  175. Supporting Right to Left is challenging brain twisting occasionally frustrating

  176. Supporting Right to Left is challenging brain twisting occasionally frustrating

    important
  177. Supporting Right to Left is challenging brain twisting occasionally frustrating

    important satisfying (once you figure it out)
  178. !Join us in RTLand

  179. http://rtl.wtf

  180. http://rtl.wtf

  181. http://ltr.wtf

  182. ?snoitseuQ D: Questions? :D

  183. Resources • List of Wikipedias: https://en.wikipedia.org/wiki/List_of_Wikipedias • Right to left

    Wikipedias: https://en.wikipedia.org/wiki/Right-to-left#RTL_Wikipedia_languages • Arabic alphabet https://en.wikipedia.org/wiki/Arabic_alphabet • Cyrillic alphabet https://en.wikipedia.org/wiki/Cyrillic_alphabets • Unicode BiDi Control Characters http://www.w3.org/International/questions/qa-bidi-controls • Explosion photo #1 (United States Navy, ID 020712-N-5471P-010, Public Domain), https://commons.wikimedia.org/wiki/File:US_Navy_020712-N-5471P-010_EOD_teams_detonate_expired_ordnance_in_the_Ku waiti_desert.jpg • Explosion photo (Jon Sullivan, Public Domain) https://commons.wikimedia.org/wiki/File:Explosions.jpg • Explosion photo (Jon Sullivan, Public Domain) https://commons.wikimedia.org/wiki/File:Explosions_at_Miramar_Airshow.jpg • Keyboard picture (Public domain) https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg • Rainbow picture, El Granada (CC-by-SA 3.0, Vadim Manuylov) https://commons.wikimedia.org/wiki/File:El_Granada_-_panoramio.jpg • Computer Keyboard, US (Mysid, Public Domain) https://commons.wikimedia.org/wiki/File:Computer_keyboard_US.svg • Wouldn't want a wooden wheel would you - Flickr – exfordy (CC-by-SA 2.0, Brian Snelson) https://commons.wikimedia.org/wiki/File:Wouldn%27t_want_a_wooden_wheel_would_you_-_Flickr_-_exfordy.jpg • CSSJanus https://github.com/cssjanus/cssjanus