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

It's All Backwards!

It's All Backwards!

It's All Backwards! How the human element makes supporting BiDi difficult (...and what to do about it)
This lecture was given in the 2019 Unicode Conference.

One of the bigger and more confusing internationalization challenges we face is that of Right-to-Left support, and even more so the support of bidirectionality: when a piece of text mixes LTR and RTL in the same sentence. While the Bidirectional Algorithm gives us a great, solid support system for such situations, it cannot analyze and understand the meaning of individual pieces of text; human beings must make sure that when they are dealing with bidirectionality, they utilize the bidirectional algorithm support intentionally and correctly. As always when depending on the human element, this leads to common mistakes and mishaps in bidirectional support. Some of those are so common, even right-to-left speakers often cannot recognize they are wrong. Some mistakes are so deeply embedded, they have impacted social behavior and even led to lawsuits.

This session will go over examples of real life misuse and mistakes that happen when the bidirectional algorithm is not applied properly, will discuss how prevalent it is in society considering the majority of people are not language or computer savvy, and will give some pieces of advice on how to tackle the more common problems.

Moriel Schottlender

October 17, 2019
Tweet

More Decks by Moriel Schottlender

Other Decks in Technology

Transcript

  1. It’s all Backwards
    How the human element makes
    supporting BiDi difficult
    (...and what to do about it)

    View full-size slide

  2. Senior Software Engineer @ The Wikimedia Foundation
    Right-to-Left support enthusiast
    @mooeypoo
    http://rtl.wtf and http://rtl.works
    Moriel Schottlender
    http://moriel.smarterthanthat.com
    https://wikimediafoundation.org
    Who am I

    View full-size slide

  3. Unicode’s BiDi
    A really quick primer

    View full-size slide

  4. .תירבעב םויסו in English םילימ םע ,תירבעב טפשמ
    Unicode’s BiDi
    Helps define directionality contexts

    View full-size slide

  5. Unicode’s BiDi
    Helps define directionality contexts
    .תירבעב םויסו in English םילימ םע ,תירבעב טפשמ
    RTL context
    LTR internal context

    View full-size slide

  6. Unicode’s BiDi
    Mental model
    RTL context
    LTR context

    View full-size slide

  7. Unicode’s BiDi
    Mental model
    RTL context
    LTR context
    BEGINNING
    BEGINNING

    View full-size slide

  8. Unicode’s BiDi
    Mental model
    RTL context
    LTR context
    BEGINNING
    BEGINNING
    Content direction dir=”rtl”
    Bidirectional isolation ...
    Control characters ‏ ‎
    Multidirectional typing
    ...

    View full-size slide

  9. Unicode’s BiDi
    Whole document in one direction (No problems)
    Mixed directions in one document (Algorithm needed)

    View full-size slide

  10. Unicode’s BiDi
    Whole document in one direction (No problems)
    Mixed directions in one document (Algorithm needed)
    - Numbers are LTR in most RTL languages
    - People chat / post in more than one language online
    More info: http://unicode.org/reports/tr9/ or http://rtl.wtf

    View full-size slide

  11. Unicode’s BiDi
    Solves a lot of problems
    Typing RTL in LTR context
    Typing LTR into an RTL sentence Dealing with numbers
    Dealing with punctuation
    Standardizing complex behavior

    View full-size slide

  12. Unicode’s BiDi
    Solves a lot of problems
    BUT
    BiDi is also really really hard for humans

    View full-size slide

  13. BiDi is also really really hard for humans

    View full-size slide

  14. BiDi is also really really hard for humans
    RTL
    LTR

    View full-size slide

  15. BiDi is also really really hard for humans
    If BiDi has so many problems
    in Real Life
    How can we even begin to create
    products that work for Right to Left
    users!?

    View full-size slide

  16. Try to understand common behavior
    Do our best to find best solution
    Be ready to iterate
    Some things don’t have a clear cut answer
    Avoid too many assumptions
    Be consistent

    View full-size slide

  17. How real life BiDi
    ruins everything

    View full-size slide

  18. Misaligned print-outs
    are not uncommon
    Please leave
    toilet bowl clean
    after use
    .Thanks

    View full-size slide

  19. Can you sing...

    View full-size slide

  20. Standard direction for
    reading musical notes
    Can you sing...

    View full-size slide

  21. Standard direction for
    reading musical notes
    backwards?
    Can you sing...

    View full-size slide

  22. Standard direction for
    reading musical notes
    backwards?
    Can you sing...
    music reaches into the heart
    rt ___hea the to in ches ___rea sic mu

    View full-size slide

  23. Standard direction for
    reading musical notes
    backwards?
    Can you sing...
    music reaches into the heart
    rt ___h th t n ch’s ___r s’c m
    (Also, Hebrew doesn’t
    show the vowels)

    View full-size slide

  24. When English Speakers
    do RTL

    View full-size slide

  25. The Blacklist, Season 2, Episode 19
    Credit: “Screen Shot Thought” https://screenshotthought.wordpress.com/2016/07/31/the-blacklist-season-2-ep-19-backwards-hebrew/

    View full-size slide

  26. The Blacklist, Season 2, Episode 19
    Credit: “Screen Shot Thought” https://screenshotthought.wordpress.com/2016/07/31/the-blacklist-season-2-ep-19-backwards-hebrew/
    Backwards
    Hebrew

    View full-size slide

  27. Gas station in New York
    Credit: “The Lansey Brother’s’ Blog” http://lanseybrothers.blogspot.com/2013/12/backwards-hebrew-sign.html
    Backwards
    Hebrew

    View full-size slide

  28. Credit: @aharoni https://twitter.com/i/web/status/1142807699895324674

    View full-size slide

  29. Spotify gets <3 wrong
    Credit: @aharoni https://twitter.com/i/web/status/1142807699895324674

    View full-size slide

  30. “Tradition”

    View full-size slide

  31. תרוסמ
    تﻧﺳ
    “noitidarT”

    View full-size slide

  32. دﯾﻠﻘﺗﻟا
    “noitidarT”

    View full-size slide

  33. Tattoos stay
    !reveroF
    Credit: “The Aramaic New Testament: Bad Hebrew/Aramaic Tattoos” http://aramaicnt.org/2007/03/27/bad-hebrewaramaic-tattoos/

    View full-size slide

  34. Tattoos stay
    !reveroF
    Credit: “The Aramaic New Testament: Bad Hebrew/Aramaic Tattoos” http://aramaicnt.org/2007/03/27/bad-hebrewaramaic-tattoos/
    Backwards
    אני לדודי ודודי לי

    View full-size slide

  35. Tattoos stay
    !reveroF
    I am my beloved's, and my beloved is mine
    יל ידודו ידודל ינא
    Credit: “The Aramaic New Testament: Bad Hebrew/Aramaic Tattoos” http://aramaicnt.org/2007/03/27/bad-hebrewaramaic-tattoos/
    Backwards
    אני לדודי ודודי לי
    Unfortunately, this happens fairly often
    And usually has to do with the way it’s printed...

    View full-size slide

  36. When RTL Speakers
    fail at RTL

    View full-size slide

  37. Everyone get :D wrong

    View full-size slide

  38. Everyone gets :D wrong
    Chat apps have varying level of ease-of-use for emoji
    This mishap is not uncommon

    View full-size slide

  39. Ranges are supposed to be
    Right to Left
    But the computer writes them Left to Right

    View full-size slide

  40. Ranges are supposed to be
    Right to Left
    But the computer writes them Left to Right
    Which leads to inconsistencies
    in how people read (and write) them

    View full-size slide

  41. PRINTED
    ABROAD
    PRINTED
    IN ISRAEL

    View full-size slide

  42. Night and day snacks

    View full-size slide

  43. Night and day snacks

    View full-size slide

  44. Night and day snacks
    NIGHT? DAY?

    View full-size slide

  45. Night and day snacks
    NIGHT? DAY?
    But actually it doesn’t matter,
    Because they are the same price

    View full-size slide

  46. Parking is forbidden
    Between the hours
    06:00 - 23:00

    View full-size slide

  47. Parking is forbidden
    Between the hours
    06:00 - 23:00
    Night parking?
    Day parking?

    View full-size slide

  48. Authorized Parking
    Sun-Thur 8:00 to 20:00
    Fri & holidays 8:00 to 14:00

    View full-size slide

  49. What about
    Calendars

    View full-size slide

  50. Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf

    View full-size slide

  51. Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf
    September
    January
    February
    May

    View full-size slide

  52. Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf

    View full-size slide

  53. Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf

    View full-size slide

  54. Credit: “Palphot” https://www.palphot.com/producth/2808/?lang=he#!

    View full-size slide

  55. Credit: “Palphot” https://www.palphot.com/producth/2808/?lang=he#!

    View full-size slide

  56. Credit: “عآﺪﺑﻹا رﻮﻘﺻ” https://www.sqorebda3.com/vb/threads/50275/

    View full-size slide

  57. Credit: “عآﺪﺑﻹا رﻮﻘﺻ” https://www.sqorebda3.com/vb/threads/50275/

    View full-size slide

  58. Credit: “123RF”
    https://www.123rf.com/photo_86917712_stock-vector-calendar-2018-hijri-1439-islamic-arabic-english-dates-horizontal-design-with-bottom-contact-template.html

    View full-size slide

  59. Credit: “123RF”
    https://www.123rf.com/photo_86917712_stock-vector-calendar-2018-hijri-1439-islamic-arabic-english-dates-horizontal-design-with-bottom-contact-template.html

    View full-size slide

  60. What about
    Graphs

    View full-size slide

  61. Math
    Credit: “קותמ יתמ” https://isrageo.blogspot.com/2014/07/3-2014-2.html

    View full-size slide

  62. Math still goes
    Left to Right
    Credit: “קותמ יתמ” https://isrageo.blogspot.com/2014/07/3-2014-2.html
    Hours vs. Distance

    View full-size slide

  63. Math still goes
    Left to Right
    Credit: “Charts when you read right-to-left” https://medium.com/@mapmeld/charts-when-you-read-right-to-left-614f0a2cf54d
    Hours vs. Distance
    Right to Left

    View full-size slide

  64. Months
    Credit: “ynet.co.il” https://www.ynet.co.il

    View full-size slide

  65. Credit: “ynet.co.il” https://www.ynet.co.il
    Months in Hebrew are
    Right to Left

    View full-size slide

  66. Credit: “Boris Gorelik”
    https://gorelik.net/2019/05/21/%D7%9B%D7%95%D7%95%D7%9F-%D7%94%D7%A6%D7%99%D7%A8-%D7%94%D7%90%D7%A4%D7%A7%D7%99-%D7%91%D7%9E%D7%A1%D
    7%9E%D7%9B%D7%99%D7%9D-%D7%94%D7%A0%D7%9B%D7%AA%D7%91%D7%99%D7%9D-%D7%9E%D7%99%D7%9E%D7%99%D7%9F/
    Months in Hebrew are
    Right to Left
    Left to Right

    View full-size slide

  67. Years in numbers are
    Left to Right
    Credit: “םידומיל תוינכת חותיפו ןונכתל ףגאה” http://cms.education.gov.il/EducationCMS/Units/Tochniyot_Limudim/Portal/Haashara/MadaKadurHide/TMashber.htm

    View full-size slide

  68. Sequential segments
    Credit: “Etsem Ha’inyan ןיינעה םצע”
    http://etzemhainyan.com/6-%D7%92%D7%A8%D7%A4%D7%99%D7%9D-%D7%A2%D7%9C-%D7%91%D7%A8%D7%99%D7%90%D7%95%D7%AA-%D7%9B%D7%95%D7%A9%
    D7%A8-%D7%95%D7%9E%D7%A9%D7%A7%D7%9C/

    View full-size slide

  69. Sequential segments are sometimes
    Right to Left
    Credit: “Etsem Ha’inyan ןיינעה םצע”
    http://etzemhainyan.com/6-%D7%92%D7%A8%D7%A4%D7%99%D7%9D-%D7%A2%D7%9C-%D7%91%D7%A8%D7%99%D7%90%D7%95%D7%AA-%D7%9B%D7%95%D7%A9%
    D7%A8-%D7%95%D7%9E%D7%A9%D7%A7%D7%9C/

    View full-size slide

  70. Arabic numerals

    View full-size slide

  71. Arabic numerals

    View full-size slide

  72. Arabic numerals

    View full-size slide

  73. Arabic numerals
    Credit: “קותמ יתמ” https://isrageo.blogspot.com/2014/07/3-2014-2.html

    View full-size slide

  74. Arabic numerals
    Credit: “קותמ יתמ” https://isrageo.blogspot.com/2014/07/3-2014-2.html

    View full-size slide

  75. Arabic numerals
    Credit: “קותמ יתמ” https://isrageo.blogspot.com/2014/07/3-2014-2.html

    View full-size slide

  76. Arabic bar graph
    Credit: “Al Jazeera” https://www.aljazeera.net/specialfiles/pages/7165406c-2ce7-4c5b-81a1-19ec7bdd95da

    View full-size slide

  77. So...
    What’s the
    correct behavior?

    View full-size slide

  78. So...
    What’s the
    correct behavior?

    View full-size slide

  79. to flip
    or
    not to flip?

    View full-size slide

  80. to flip
    or
    not to flip?
    Browser icon
    Calendar icon
    Article icon
    Quotes icon

    View full-size slide

  81. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon

    View full-size slide

  82. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    Probably not.

    View full-size slide

  83. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    Probably not.
    YES!

    View full-size slide

  84. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    Probably not.
    YES!
    YES!

    View full-size slide

  85. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    History icon
    Checkmark icon
    Probably not.
    YES!
    YES!

    View full-size slide

  86. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    History icon
    Checkmark icon
    Probably not.
    YES!
    YES!
    Not if it’s a clock...

    View full-size slide

  87. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    History icon
    Checkmark icon
    Probably not.
    YES!
    YES!
    Not if it’s a clock... Yes if it’s undo/redo

    View full-size slide

  88. to flip
    or
    not to flip?
    YES!
    Browser icon
    Calendar icon
    Article icon
    Quotes icon
    History icon
    Checkmark icon
    Probably not.
    YES!
    YES!
    Not if it’s a clock...
    Not unless you’re left handed
    Yes if it’s undo/redo

    View full-size slide

  89. Flip if it represents the beginning of the sentence
    Sometimes it depends on how they work with the visual flow

    View full-size slide

  90. Computers affect real life much more than we realize
    90% of the time, users aren’t sure
    what “the correct behavior” even is
    Right to Left users grew to expect that
    everything is broken
    … so broken became the new normal...
    Which brings us back to...

    View full-size slide

  91. Try to understand common behavior
    Do our best to find best solution
    Be ready to iterate
    Some things don’t have a clear cut answer
    Avoid too many assumptions
    Be consistent

    View full-size slide