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

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
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