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

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

    View full-size slide

  2. What is language?

    View full-size slide

  3. What is language?
    not

    View full-size slide

  4. 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
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я

    View full-size slide

  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
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я

    View full-size slide

  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
    This is script
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا

    View full-size slide

  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
    Written left to right → → →
    ←←← Written right to left
    This is script
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا

    View full-size slide

  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
    Hebrew
    Arabic
    Latin
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
    Cyrillic
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا

    View full-size slide

  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
    LTR Languages: English, Spanish, Russian, French...
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا

    View full-size slide

  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
    LTR Languages: English, Spanish, Russian, French...
    RTL Languages: Arabic, Hebrew, Yiddish, Persian, Urdu...
    Hebrew
    Arabic
    Latin
    А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ь Ю Я
    Cyrillic
    ת ש ר ק צ פ ע ס נ מ ל כ י ט ח ז ו ה ד ג ב א
    ي و ‍
    ه ن م ل ك ق ف غ ع ظ ط ض ص ش س ز ر ذ د خ ح ج ث ت ب ا

    View full-size slide

  11. Why should we care?

    View full-size slide

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

    View full-size slide

  13. Thinking about RTL exposes issues
    related to other language behavior
    Solving these technical issues
    makes your software better

    View full-size slide

  14. Right-to-Left user base is growing

    View full-size slide

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

    View full-size slide

  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
    ~800,000,000 speakers
    … and more ...

    View full-size slide

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

    View full-size slide

  18. What's the problem?

    View full-size slide

  19. Reversed mental model

    View full-size slide

  20. Reversed mental model

    View full-size slide

  21. Reversed mental model
    Script direction affects
    more than just writing and reading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Solution:
    Write backwards

    View full-size slide

  28. Solution:
    Write backwards

    View full-size slide

  29. … And not just on the web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. … 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

    View full-size slide

  33. … 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

    View full-size slide

  34. … 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

    View full-size slide

  35. … 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

    View full-size slide

  36. enod eb ot dah gnihtemoS

    View full-size slide

  37. Something had to be done

    View full-size slide

  38. Solution:
    Logical and Visual rendering

    View full-size slide

  39. Solution:
    Logical and Visual rendering
    Visual: םלוע םולש
    1 2 3 4
    Byte order:

    View full-size slide

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

    View full-size slide

  41. 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:

    View full-size slide

  42. 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:

    View full-size slide

  43. Fast forward

    View full-size slide

  44. Flipping to the
    RTL Mental Model

    View full-size slide

  45. LibreOffice Impress

    View full-size slide

  46. English interface
    (LTR)
    LibreOffice Impress

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Everything flips

    View full-size slide

  50. Everything flips
    … but should it?

    View full-size slide

  51. Things that
    shouldn't flip

    View full-size slide

  52. LTR
    RTL?
    Directions

    View full-size slide

  53. LTR
    RTL
    Directions

    View full-size slide

  54. Left Center Right
    LTR
    RTL
    Directions

    View full-size slide

  55. Toolbar buttons
    LTR
    RTL

    View full-size slide

  56. LTR
    RTL
    Toolbar buttons

    View full-size slide

  57. LTR
    RTL
    Toolbar buttons

    View full-size slide

  58. LTR
    RTL
    Toolbar buttons
    Undo Redo

    View full-size slide

  59. LTR
    RTL
    Undo Redo
    Toolbar buttons
    Undo
    Redo

    View full-size slide

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

    View full-size slide

  61. Bonus: LibreOffice List Toolbar
    LTR
    RTL

    View full-size slide

  62. Bonus: LibreOffice List Toolbar
    LTR
    RTL

    View full-size slide

  63. Bonus: LibreOffice List Toolbar
    LTR
    RTL
    2 5

    View full-size slide

  64. Analyze and Anticipate
    SOLUTION:

    View full-size slide

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

    View full-size slide

  66. Dealing with
    multiple directionalities

    View full-size slide

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

    View full-size slide

  68. English content

    View full-size slide

  69. English content with Hebrew interface

    View full-size slide

  70. Content
    English content with Hebrew interface

    View full-size slide

  71. Content
    Interface
    English content with Hebrew interface

    View full-size slide

  72. English content with
    Hebrew interface
    Hebrew content with
    English interface

    View full-size slide

  73. Distinguishing between
    content and interface

    View full-size slide

  74. RTL content
    RTL interface
    RTL content
    LTR interface

    View full-size slide

  75. RTL content
    RTL interface
    RTL content
    LTR interface
    Content
    Interface

    View full-size slide

  76. RTL content
    RTL interface
    RTL content
    LTR interface
    Content
    Interface

    View full-size slide

  77. RTL content
    RTL interface
    RTL content
    LTR interface
    Content
    Interface

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. SOLUTION:
    Think about your
    interface carefully

    View full-size slide

  86. Think about your
    interface carefully
    (And argue in your bug tracker)
    SOLUTION:

    View full-size slide

  87. Typing in Mixed
    Directionalities
    or: meh, do I have to?

    View full-size slide

  88. Typing in Mixed
    Directionalities
    (No, but I do)
    or: meh, do I have to?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  91. SOLUTION:
    Teach computers to
    understand context

    View full-size slide

  92. English 123
    Numbers

    View full-size slide

  93. English 123
    Numbers
    תירבע
    123

    View full-size slide

  94. DEMO: Typing with numbers

    View full-size slide

  95. English 123
    Numbers
    תירבע
    123

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  99. Unicode Bidirectional Algorithm
    (A very generalized and quick primer)

    View full-size slide

  100. Unicode Bidirectional Algorithm
    Strong
    Weak
    Neutral
    (A very generalized and quick primer)

    View full-size slide

  101. 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)

    View full-size slide

  102. 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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  106. English 1 2 3 Hebrew 1 2 3 English
    Advanced numbers
    Hint
    Strong
    Weak
    Neutral

    View full-size slide

  107. DEMO: Mixed sentences with numbers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  111. 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)

    View full-size slide

  112. The Misleading
    Keyboard

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  118. DEMO: Caret movement
    Visual + Logical

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. English 1 2 3 תירבע
    1
    2
    3 English
    Logical caret movement
    LOGICAL
    VISUAL
    Your brain
    on BiDi
    Caret movement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  126. 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)

    View full-size slide

  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
    .
    Open parenthesis
    Close parenthesis
    RTL context
    LTR context
    Beginning End
    End Beginning
    (text)
    (טסקט)

    View full-size slide

  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
    (text)
    (טסקט)

    View full-size slide

  129. 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
    ) (

    View full-size slide

  130. Parentheses
    Your brain typing RTL

    View full-size slide

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

    View full-size slide

  132. SOLUTION:
    Changing terminology

    View full-size slide

  133. Left Right
    Before After
    Backwards Forwards
    Start End

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  136. Bonus: Emoticons
    (:
    ):

    View full-size slide

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

    View full-size slide

  138. ANOTHER SOLUTION:
    Control characters

    View full-size slide

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

    View full-size slide

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

    ...

    U+202A: LEFT-TO-RIGHT EMBEDDING (LRE)

    U+202B: RIGHT-TO-LEFT EMBEDDING (RLE)
    MSchottlender (WMF)
    LRE

    View full-size slide

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

    ● U+200E: LEFT-TO-RIGHT MARK (LRM)
    ● U+200F: RIGHT-TO-LEFT MARK (RLM)
    MSchottlender (WMF)LRM

    View full-size slide

  142. Control characters
    RTL context
    LTR context
    Beginning End
    End Beginning
    MSchottlender (WMF)
    Override
    ● ...
    ● U+202D: LEFT-TO-RIGHT OVERRIDE (LRO)
    ● U+202E: RIGHT-TO-LEFT OVERRIDE (RLO)
    (FMW) rednelttohcSM
    RLO

    View full-size slide

  143. DEMO: Animated JPEG

    View full-size slide

  144. \u202epmb.gif

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  149. The Expectations
    of RTL Users

    View full-size slide

  150. The Expectations
    of RTL Users
    non-existing

    View full-size slide

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

    View full-size slide

  152. Demo: Typing RTL in LTR context
    + HTML in RTL content

    View full-size slide

  153. SOLUTION:
    Fix all teh things

    View full-size slide

  154. RTL users are used to bad
    behavior

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  162. Supporting Right to Left is challenging

    View full-size slide

  163. Supporting Right to Left is challenging
    brain twisting

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  167. Supporting Right to Left is challenging
    brain twisting
    occasionally frustrating
    important
    satisfying
    (once you figure it out)

    View full-size slide

  168. !Join us in RTLand

    View full-size slide

  169. http://rtl.wtf

    View full-size slide

  170. http://rtl.wtf

    View full-size slide

  171. http://ltr.wtf

    View full-size slide

  172. ?snoitseuQ
    D:
    Questions?
    :D

    View full-size slide

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

    View full-size slide