It’s all Backwards
How the human element makes supporting BiDi difficult��(...and what to do about it)
Who am I
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
Unicode’s BiDi�A really quick primer
Unicode’s BiDi�Helps define directionality contexts
משפט בעברית, עם מילים in English וסיום בעברית.
Unicode’s BiDi�Helps define directionality contexts
משפט בעברית, עם מילים in English וסיום בעברית.
RTL context
LTR internal context
Unicode’s BiDi�Mental model
RTL context
LTR context
Unicode’s BiDi�Mental model
RTL context
LTR context
BEGINNING
BEGINNING
Unicode’s BiDi�Mental model
RTL context
LTR context
BEGINNING
BEGINNING
Content direction dir=”rtl”
Bidirectional isolation <bdi>...</bdi>
Control characters ‏ ‎
Multidirectional typing
...
Unicode’s BiDi�
Whole document in one direction (No problems)
Mixed directions in one document (Algorithm needed)
Unicode’s BiDi�
Whole document in one direction (No problems)
Mixed directions in one document (Algorithm needed)
More info: http://unicode.org/reports/tr9/ or http://rtl.wtf
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
Unicode’s BiDi�Solves a lot of problems
BUT
BiDi is also really really hard for humans
BiDi is also really really hard for humans
BiDi is also really really hard for humans
RTL
LTR
If BiDi has so many problems�in Real Life
How can we even begin to create products that work for Right to Left users!?
BiDi is also really really hard for humans
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
How real life BiDi�ruins everything
Misaligned print-outs
are not uncommon
Please leave
toilet bowl clean
after use
.Thanks
Can you sing...
Can you sing...
Standard direction for reading musical notes
backwards?
Can you sing...
Standard direction for reading musical notes
backwards?
Can you sing...
Standard direction for reading musical notes
🎶music reaches into the heart🎶
rt ___hea the to in ches ___rea sic mu
backwards?
Can you sing...
Standard direction for reading musical notes
🎶music reaches into the heart🎶
rt ___h th t n ch’s ___r s’c m
(Also, Hebrew doesn’t show the vowels)
When English Speakers
do RTL
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/
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
Gas station in New York
Credit: “The Lansey Brother’s’ Blog” http://lanseybrothers.blogspot.com/2013/12/backwards-hebrew-sign.html
Backwards
Hebrew
Credit: @aharoni https://twitter.com/i/web/status/1142807699895324674
Spotify gets <3 wrong
Credit: @aharoni https://twitter.com/i/web/status/1142807699895324674
“Tradition”
“noitidarT”
מסורת
سنت
“noitidarT”
التقليد
Tattoos stay�!reveroF
Credit: “The Aramaic New Testament: Bad Hebrew/Aramaic Tattoos” http://aramaicnt.org/2007/03/27/bad-hebrewaramaic-tattoos/
Tattoos stay�!reveroF
Credit: “The Aramaic New Testament: Bad Hebrew/Aramaic Tattoos” http://aramaicnt.org/2007/03/27/bad-hebrewaramaic-tattoos/
Backwards
יל ידודו ידודל ינא
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...
When RTL Speakers
fail at RTL
Everyone get :D wrong
Everyone gets :D wrong
Chat apps have varying level of ease-of-use for emoji
This mishap is not uncommon
Ranges are supposed to be
Right to Left
But the computer writes them Left to Right
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
PRINTED ABROAD
PRINTED IN ISRAEL
Night and day snacks
Night and day snacks
Night and day snacks
NIGHT?
DAY?
Night and day snacks
NIGHT?
DAY?
But actually it doesn’t matter,
Because they are the same price
Parking is forbidden
Between the hours
06:00 - 23:00
Parking is forbidden
Between the hours
06:00 - 23:00
Night parking?
Day parking?
Authorized Parking
Sun-Thur 8:00 to 20:00
Fri & holidays 8:00 to 14:00
Convert ranges to be contextually clear
What about
Calendars
Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf
Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf
September
January
February
May
Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf
Credit: “Afeka Tel Aviv, Engineering Department” https://www.afeka.ac.il/media/1187475/calendar_afeka_2019sx.pdf
Credit: “Palphot” https://www.palphot.com/producth/2808/?lang=he#!
Credit: “Palphot” https://www.palphot.com/producth/2808/?lang=he#!
Credit: “صقور الإبدآع” https://www.sqorebda3.com/vb/threads/50275/
Credit: “صقور الإبدآع” https://www.sqorebda3.com/vb/threads/50275/
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
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
What about
Graphs
Math
Credit: “מתי מתוק” https://isrageo.blogspot.com/2014/07/3-2014-2.html
Math still goes
Left to Right
Credit: “מתי מתוק” https://isrageo.blogspot.com/2014/07/3-2014-2.html
Hours vs. Distance
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
Months
Credit: “ynet.co.il” https://www.ynet.co.il
Credit: “ynet.co.il” https://www.ynet.co.il
Months in Hebrew are
Right to Left
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%D7%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
Years in numbers are
Left to Right
Credit: “האגף לתכנון ופיתוח תכניות לימודים” http://cms.education.gov.il/EducationCMS/Units/Tochniyot_Limudim/Portal/Haashara/MadaKadurHide/TMashber.htm
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/
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/
Eastern Arabic numerals
Eastern Arabic numerals
Eastern Arabic numerals
Eastern Arabic numerals
Credit: “מתי מתוק” https://isrageo.blogspot.com/2014/07/3-2014-2.html
Eastern Arabic numerals
Credit: “מתי מתוק” https://isrageo.blogspot.com/2014/07/3-2014-2.html
Eastern Arabic numerals
Credit: “מתי מתוק” https://isrageo.blogspot.com/2014/07/3-2014-2.html
Arabic bar graph
Credit: “Al Jazeera” https://www.aljazeera.net/specialfiles/pages/7165406c-2ce7-4c5b-81a1-19ec7bdd95da
So...
What’s the
correct behavior?
So...
What’s the
correct behavior?
to flip
or
not to flip?
to flip
or
not to flip?
Browser icon
Calendar icon
Article icon
Quotes icon
to flip
or
not to flip?
YES!
Browser icon
Calendar icon
Article icon
Quotes icon
to flip
or
not to flip?
YES!
Browser icon
Calendar icon
Article icon
Quotes icon
Probably not.
to flip
or
not to flip?
YES!
Browser icon
Calendar icon
Article icon
Quotes icon
Probably not.
YES!
to flip
or
not to flip?
YES!
Browser icon
Calendar icon
Article icon
Quotes icon
Probably not.
YES!
YES!
to flip
or
not to flip?
YES!
Browser icon
Calendar icon
Article icon
Quotes icon
History icon
Checkmark icon
Probably not.
YES!
YES!
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...
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
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
Flip if it represents the beginning of the sentence
Sometimes it depends on how they work with the visual flow
snoisulcnoC
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...
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
?Questions!