get your head around bidirectionality!...unicode bidirectional algorithm (uba)!26 annex #9 to the...
TRANSCRIPT
![Page 1: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/1.jpg)
Get Your Head Around Bidirectionality!
Behnam Esfahbod Software Engineer
![Page 2: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/2.jpg)
We know when the software is broken for a right-to-left languages like Arabic, Persian, or Hebrew, but often the solution is either not clear, or fixing it with out-of-place patches won't worth the costs down the road. Like other areas of i18n, bidirectional layout and right-to-left language support need deliberate design in the user-interface stack, and without good architecture it won't be useful for the developers or the users.
In this tutorial, we first learn how to think in right-to-left and how it mirrors into left-to-right directionality. We then look at the common problems in bidirectional applications and how to address them with generic solutions and standard algorithms.
This tutorial is suitable for anyone not familiar with right-to-left languages or bidirectional design, or interested to learn how to develop solutions for this area.
Abstract
42nd
Internationalization &
Unicode Conference
September 2018
Santa Clara, CA, USA
!2
![Page 3: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/3.jpg)
• Software Engineer @ Quora, Inc.
• Co-Chair of Arabic Layout Task Force @ W3C i18n Activity
• Virgule Typeworks
• Facebook, Inc.
• IRNIC Domain Registry
• Sharif FarsiWeb, Inc.
About me
!3
![Page 4: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/4.jpg)
• Bidirectional Writing Systems
• Bidirectional Text
• Bidirectional Layout
• Bidirectional Web Application
• Bidirectionality Techniques
This talk
!4
![Page 5: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/5.jpg)
Bidirectional Writing Systems
![Page 6: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/6.jpg)
History
Fragmentary boustrophedon inscription in the agora of Gortyn (Crete) - code of law | by PRA [CC BY-SA 3.0]!6
Boustrophedon
from Greek
“boustrophēdón”
meaning
“ox-turning”
![Page 7: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/7.jpg)
History
Fragmentary boustrophedon inscription in the agora of Gortyn (Crete) - code of law | by PRA [CC BY-SA 3.0]!7
Line direction
alternates. No paragraph
direction.
Q: Why’s this useful?
![Page 8: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/8.jpg)
History
!8
• Most scripts chose one way or another
• Small set of writing symbols
- Letters, e.g. Greek Alpha or Arabic Alef
- Limited punctuations
- No numerals: roman and abjad numbers
• Later, Hindu-Arabic numerals
- Not (normally) read digit-by-digit
- Spelled out as a (whole) number
- Therefore: no direction in reading a numbers!
Early Writing
Systems
![Page 9: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/9.jpg)
Today
Writing systems worldwide | By JWB [CC-BY-SA-3.0]!9
Writing systems at
national level
![Page 10: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/10.jpg)
Today
!10
• Unicode ≈ unique, unified, universal encoding
• About 150 scripts encoded in Unicode:
- ~110 left-to-right (LTR) (some could also be top-to-bottom)
- ~30 right-to-left (RTL) (some are bidi…)
- the rest are top-to-bottom, or mixed directions
• Major unified scripts
- CJK: Chinese, Japanese, Korean
- Arabic: Standard/Maghrebi Arabic, Persian, Urdu, Jawi, Uyghur, …
• Major non-unified scripts
- Latin/Greek/Cyrillic
Digital encoding
![Page 11: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/11.jpg)
Bidirectional Text
![Page 12: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/12.jpg)
Manuscript text & layout
!12
![Page 13: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/13.jpg)
Semantic encoding in Unicode
!13
Store text in
memory in the same order as is
read/processed in
mind
• Encode concepts, not various shapes of them
- One Arabic Letter Alef (U+0627) - Most Arabic letters take at least 4 shapes depending on context
- But, two Latin Letter A (oops!) - LATIN CAPITAL LETTER A (U+0041) / LATIN SMALL LETTER A (U+0061)
![Page 14: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/14.jpg)
Semantic encoding in Unicode
!14
Store text in
memory in the same order as is
read/processed in
mind
• Encode concepts, not various shapes of them
- One Arabic Letter Alef (U+0627) - Most Arabic letters take at least 4 shapes depending on context
- But, two Latin Letter A (oops!) - LATIN CAPITAL LETTER A (U+0041) / LATIN SMALL LETTER A (U+0061)
• Some punctuations are shared, some are not
- Single Period/Full Stop symbol for most scripts (“.” U+002E)
- A pair of Question Marks (“?” U+003F, “؟” U+061F)
![Page 15: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/15.jpg)
Semantic encoding in Unicode
!15
Store text in
memory in the same order as is
read/processed in
mind
• Encode concepts, not various shapes of them
- One Arabic Letter Alef (U+0627) - Most Arabic letters take at least 4 shapes depending on context
- But, two Latin Letter A (oops!) - LATIN CAPITAL LETTER A (U+0041) / LATIN SMALL LETTER A (U+0061)
• Some punctuations are shared, some are not
- Single Period/Full Stop symbol for most scripts (“.” U+002E)
- A pair of Question Marks (“?” U+003F, “؟” U+061F)
• Some Numerals are LTR and some RTL
- Until 2006 (encoding of N’Ko), all numerals were LTR - European (ASCII): 0123456789 / Eastern Hindi-Arabic (Persian): ۰۱۲۳۴۵۶۷۸۹
- Recently-developed African systems use RTL numerals
- N’Ko: ߀߁߂߃߄߅߆߇߈߉
![Page 16: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/16.jpg)
Direction in text block What will be the biggest internet
trends between 2016-2020?
LTR paragraphs
are usually aligned “flush left”, a.k.a.
“left-aligned” or
“ragged right”.
!16
![Page 17: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/17.jpg)
Direction in text block What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
RTL paragraphs
are usually aligned “flush right”, a.k.a.
“right-aligned” or
“ragged left”.
!17
![Page 18: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/18.jpg)
Direction in text block What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
Reading direction
is usually perceived
implicitly from the
writing system…
!18
![Page 19: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/19.jpg)
Direction in text block What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
…allowing reading
“end-aligned” text with no problems.
!19
![Page 20: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/20.jpg)
Direction in text block What will be the biggest internet
?trends between 2016-2020
بزرگترین روندهای اینترنتی در بین سال های
چه خواهد بود؟ ۲۰۱۶-۲۰۲۰
Setting the wrong
direction results in poor readability,
and sometimes
event close to
gibberish.
!20
![Page 21: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/21.jpg)
Direction in text block What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
Let’s now look at
how sequences of shapes are
perceived.
!21
![Page 22: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/22.jpg)
Direction in text block
!22
LTR runs ⇒ orange
RTL runs ⇒ green
What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
![Page 23: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/23.jpg)
What will be the biggest internet
trends between 2016-2020?
بزرگترین روندهای اینترنتی در بین سال های
۲۰۲۰-۲۰۱۶ چه خواهد بود؟
Direction in text block
2
3
1
1
2
!23
On the line level,
the runs are read in order, in the
direction of the
paragraph (base
direction)
![Page 24: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/24.jpg)
Unicode Bidirectional Algorithm (UBA)
!24
Annex #9 to the
Unicode Standard (UAX #9)
• Converting a semantic in-memory string of chars into a reordering
suitable for presentation (visual output)
![Page 25: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/25.jpg)
Unicode Bidirectional Algorithm (UBA)
!25
Annex #9 to the
Unicode Standard (UAX #9)
• Converting a semantic in-memory string of chars into a reordering
suitable for presentation (visual output)
• Every Unicode Character has a Bidi Class
- Strong, such as letters
- Weak, such as numbers
- Neutral, such as whitespace, punctuation and symbols
![Page 26: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/26.jpg)
Unicode Bidirectional Algorithm (UBA)
!26
Annex #9 to the
Unicode Standard (UAX #9)
• Converting a semantic in-memory string of chars into a reordering
suitable for presentation (visual output)
• Every Unicode Character has a Bidi Class
- Strong, such as letters
- Weak, such as numbers
- Neutral, such as whitespace, punctuation and symbols
• Some characters are Mirrored if in an RTL run
- Parenthesis are mirrored: “(” is an open parens in both LTR & RTL
- Question Marks do not mirror: “?” is always closed on the right.
![Page 27: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/27.jpg)
Unicode Bidirectional Algorithm (UBA)
!27
High-level steps of
the algorithm
• Input: string of characters & base direction - Both inputs should be set correctly to achieve the correct presentation
![Page 28: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/28.jpg)
Unicode Bidirectional Algorithm (UBA)
!28
High-level steps of
the algorithm
• Input: string of characters & base direction - Both inputs should be set correctly to achieve the correct presentation
• Output: chars’ levels (evens are LTR, odds are RTL) & position
![Page 29: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/29.jpg)
Unicode Bidirectional Algorithm (UBA)
!29
High-level steps of
the algorithm
• Input: string of characters & base direction - Both inputs should be set correctly to achieve the correct presentation
• Output: chars’ levels (evens are LTR, odds are RTL) & position
• First, explicit direction levels are calculated - Based on special directional formatting characters
- Embedding (LRE, RLE), Isolate (LRI, RLI, FSI), Override (LRO, RLO)
- Higher-level protocol
- HTML (dir="rtl")
- CSS (direction: rtl;)
![Page 30: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/30.jpg)
Unicode Bidirectional Algorithm (UBA)
!30
High-level steps of
the algorithm
• Input: string of characters & base direction - Both inputs should be set correctly to achieve the correct presentation
• Output: chars’ levels (evens are LTR, odds are RTL) & position
• First, explicit direction levels are calculated - Based on special directional formatting characters
- Embedding (LRE, RLE), Isolate (LRI, RLI, FSI), Override (LRO, RLO)
- Higher-level protocol
- HTML (dir="rtl")
- CSS (direction: rtl;)
• Then, implicit dir. levels are calculated using chars’ Bidi Class
- Implicit formatting characters (LRM, RLM, ALM) take effect here
![Page 31: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/31.jpg)
Unicode Bidirectional Algorithm (UBA)
!31
High-level steps of
the algorithm
• Input: string of characters & base direction - Both inputs should be set correctly to achieve the correct presentation
• Output: chars’ levels (evens are LTR, odds are RTL) & position
• First, explicit direction levels are calculated - Based on special directional formatting characters
- Embedding (LRE, RLE), Isolate (LRI, RLI, FSI), Override (LRO, RLO)
- Higher-level protocol
- HTML (dir="rtl")
- CSS (direction: rtl;)
• Then, implicit dir. levels are calculated using chars’ Bidi Class
- Implicit formatting characters (LRM, RLM, ALM) take effect here
• Finally, having the bidi levels, reordering can be done, when needed
![Page 32: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/32.jpg)
Directional embeddings
!32
How directions are
mixed when sentences get
more
complicated?
They translated the question
into “بزرگترین روندهای اینترنتی در بین on ”سال های ۲۰۱۶-۲۰۲۰ چه خواهد بود؟Quora!
![Page 33: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/33.jpg)
Directional embeddings
!33
We get opposite-
direction runs embedded in runs,
running opposite
to the paragraph
direction.
They translated the question
into “بزرگترین روندهای اینترنتی در بین on ”سال های ۲۰۱۶-۲۰۲۰ چه خواهد بود؟Quora!
![Page 34: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/34.jpg)
They translated the question
into “بزرگترین روندهای اینترنتی در بین on ”سال های ۲۰۱۶-۲۰۲۰ چه خواهد بود؟Quora! 4
Directional embeddings
!34
In order, these will
be…
1
3
7
8
2
56
![Page 35: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/35.jpg)
They translated the question
into “بزرگترین روندهای اینترنتی در بین on ”سال های ۲۰۱۶-۲۰۲۰ چه خواهد بود؟Quora!
1
Directional embeddings
!35
In terms of UBA
embedding levels, they would be…
0
1
0
0
0
22
![Page 36: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/36.jpg)
They translated the question
into “بزرگترین روندهای اینترنتی در بین on ”سال های ۲۰۱۶-۲۰۲۰ چه خواهد بود؟Quora!
1
0
1
0
0
0
22
Directional embeddings
!36
In terms of UBA
embedding levels, they would be…
Can go up to 126 levels!
![Page 37: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/37.jpg)
Bidirectional Layout
![Page 38: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/38.jpg)
Web-based layout
!38
![Page 39: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/39.jpg)
Web-based layout
1
2
3
45
Top to bottom,right to left
!39
![Page 40: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/40.jpg)
4
Web-based layout
!40
1
2
3
5
Every block has a
direction
![Page 41: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/41.jpg)
Direction in layout blocks
Here, we limit the
discussion to
horizontal writing
mode with upright
line orientation and
downward block
flow direction.
!41
![Page 42: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/42.jpg)
Direction in layout blocks
Here, we limit the
discussion to
horizontal writing
mode with upright
line orientation and
downward block
flow direction.
• Converting an LTR layout to an RTL one is called Mirroring
!42
![Page 43: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/43.jpg)
Direction in layout blocks
Here, we limit the
discussion to
horizontal writing
mode with upright
line orientation and
downward block
flow direction.
• Converting an LTR layout to an RTL one is called Mirroring
• Flow of movement is reversed in mirroring
- Start/previous/past is on the righthand-side (RHS)
- End/next/future is on the lefthand-side (LHS)
!43
![Page 44: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/44.jpg)
Direction in layout blocks
Here, we limit the
discussion to
horizontal writing
mode with upright
line orientation and
downward block
flow direction.
• Converting an LTR layout to an RTL one is called Mirroring
• Flow of movement is reversed in mirroring
- Start/previous/past is on the righthand-side (RHS)
- End/next/future is on the lefthand-side (LHS)
• Layout direction works very similar to text direction
- Blocks are set from start to end, depending on the contextual dir.
- Table columns are also ordered from start to end
- Any sequence, such as images, is also ordered from start to end
!44
![Page 45: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/45.jpg)
Direction in layout blocks
Here, we limit the
discussion to
horizontal writing
mode with upright
line orientation and
downward block
flow direction.
• Converting an LTR layout to an RTL one is called Mirroring
• Flow of movement is reversed in mirroring
- Start/previous/past is on the righthand-side (RHS)
- End/next/future is on the lefthand-side (LHS)
• Layout direction works very similar to text direction
- Blocks are set from start to end, depending on the contextual dir.
- Table columns are also ordered from start to end
- Any sequence, such as images, is also ordered from start to end
• There are a few exceptions, though!
- Modern mathematics notation (usually) stays LTR
- Some well-known interfaces, like audio/video back/play/forward set!45
![Page 46: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/46.jpg)
Mixed directions
Let’s look at a basic
example…
!46
![Page 47: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/47.jpg)
Mixed directions
Most elements
mirror…
Some, don’t.
!47
![Page 48: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/48.jpg)
Mixed directions
Many levels of
implicit or explicit
directionality
In a sample RTL
Top-level direction…
!48
![Page 49: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/49.jpg)
Mixed directions
What if an
interface message is not translated?
!49
![Page 50: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/50.jpg)
Static directionality
Mostly concepts
with static behavior IRL
!50
![Page 51: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/51.jpg)
Bidirectional Web Application
![Page 52: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/52.jpg)
Text input
Can’t make
assumption about the script of every
character of user-
generated content.
!52
![Page 53: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/53.jpg)
Text input
Heuristic methods
often result in unexpected
behavior.
!53
![Page 54: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/54.jpg)
Text input
Giving control of
every text block to the user has the
least friction.
!54
![Page 55: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/55.jpg)
Text processing
• The top advantage of semantic encoding of RTL/bidi text is the ease
of processing
!55
![Page 56: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/56.jpg)
• The top advantage of semantic encoding of RTL/bidi text is the ease
of processing
• Most Unicode characters represent a linguistic element
- Although encoding of Arabic script has extra complexities
!56
Text processing
![Page 57: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/57.jpg)
• The top advantage of semantic encoding of RTL/bidi text is the ease
of processing
• Most Unicode characters represent a linguistic element
- Although encoding of Arabic script has extra complexities
• Finding the first letter, splitting into words, truncating a paragraph,
all work very similar to LTR scripts
!57
Text processing
![Page 58: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/58.jpg)
Text output
Plaintext
• Most apps depend on the system/platform to render a bidi text
- Get good results iff play well with the text and layout algorithms
!58
![Page 59: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/59.jpg)
• Most apps depend on the system/platform to render a bidi text
- Get good results iff play well with the text and layout algorithms
• For plaintext, use Unicode bidi formatting chars
- Implicit: Marks (LRM, RLM, ALM)
- Useful when the problem is local and asymmetric
- e.g. positioning of a single symbol is not correct in an isolated box
- Explicit: Embedding (LRE, RLE) & Isolate (LRI, RLI)
- Embedding is the old method, Isolate is more recent
- Useful at the boundaries of languages/scripts, also data and its
surrounding sentence.
!59
Text output
Plaintext
![Page 60: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/60.jpg)
• Most apps depend on the system/platform to render a bidi text
- Get good results iff play well with the text and layout algorithms
• For plaintext, use Unicode bidi formatting chars
- Implicit: Marks (LRM, RLM, ALM)
- Useful when the problem is local and asymmetric
- e.g. positioning of a single symbol is not correct in an isolated box
- Explicit: Embedding (LRE, RLE) & Isolate (LRI, RLI)
- Embedding is the old method, Isolate is more recent
- Useful at the boundaries of languages/scripts, also data and its
surrounding sentence.
- Explicit: Overrides (LRO, RLO)
- For legacy systems
- There’s almost no good reason to use these in modern systems
!60
Text output
Plaintext
![Page 61: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/61.jpg)
• Use formatting Marks for implicit matters
- As encoded characters, or
- As entities, ‎ and ‎
!61
Text output
HTML
![Page 62: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/62.jpg)
• Use formatting Marks for implicit matters
- As encoded characters, or
- As entities, ‎ and ‎
• For blocks and explicit directions
- Use proper attributes
- HTML (dir="rtl")
- CSS (direction: rtl;)
- Leverage the default inheritance of these properties from parent
nodes to children
- Set dir attribute on the <html> or <body> tags
!62
Text output
HTML
![Page 63: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/63.jpg)
• Use formatting Marks for implicit matters
- As encoded characters, or
- As entities, ‎ and ‎
• For blocks and explicit directions
- Use proper attributes
- HTML (dir="rtl")
- CSS (direction: rtl;)
- Leverage the default inheritance of these properties from parent
nodes to children
- Set dir attribute on the <html> or <body> tags
• Use CSS flipping tools to make a RTL version of LTR rules
!63
Text output
HTML
![Page 64: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/64.jpg)
• Use formatting Marks for implicit matters
- As encoded characters, or
- As entities, ‎ and ‎
• For blocks and explicit directions
- Use proper attributes
- HTML (dir="rtl")
- CSS (direction: rtl;)
- Leverage the default inheritance of these properties from parent
nodes to children
- Set dir attribute on the <html> or <body> tags
• Use CSS flipping tools to make a RTL version of LTR rules
- As of 2018, you still cannot do that natively in CSS!
!64
Text output
HTML
![Page 65: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/65.jpg)
Interface
Non-textual
elements
!65
![Page 66: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/66.jpg)
Interface
Interface vs.
Content
!66
![Page 67: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/67.jpg)
Bidirectionality Techniques
![Page 68: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/68.jpg)
Directionality context
• Direction of text runs/blocks & layout blocks is a contextual property
!68
![Page 69: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/69.jpg)
Directionality context
• Direction of text runs/blocks & layout blocks is a contextual property
• Techniques for managing directionality context
1. Embedding
2. Inheritance
3. Cascading
4. Propagation
!69
![Page 70: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/70.jpg)
Directionality context
• Direction of text runs/blocks & layout blocks is a contextual property
• Techniques for managing directionality context
1. Embedding
2. Inheritance
3. Cascading
4. Propagation
• Abstractions to provide/absorb directionality context
- Interface translation
- Text processing
- Interface components
- HTML/platform elements and custom abstractions
!70
![Page 71: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/71.jpg)
Embedding technique
Inline runs(intra-block)
• If not clear about directional, set isolation boundaries
- Skip isolation for same-direction embeddings, if known
!71
![Page 72: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/72.jpg)
Embedding technique
Inline runs(intra-block)
• If not clear about directional, set isolation boundaries
- Skip isolation for same-direction embeddings, if known
• Single block (start-to-end)
- One base direction per block
- Limited to 126 levels (usually)
!72
![Page 73: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/73.jpg)
Embedding technique
Inline runs(intra-block)
• If not clear about directional, set isolation boundaries
- Skip isolation for same-direction embeddings, if known
• Single block (start-to-end)
- One base direction per block
- Limited to 126 levels (usually)
• Examples
- Plaintext embedding using Bidi Control Characters
- HTML embedding using inline markups
!73
![Page 74: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/74.jpg)
Inheritance technique
• Inherit the direction of parent block
- Unless there’s more evidence
- Static directionality
- Propagation (Technique #4)
Block level
!74
![Page 75: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/75.jpg)
Inheritance technique
• Inherit the direction of parent block
- Unless there’s more evidence
- Static directionality
- Propagation (Technique #4)
• Top-down
- One single top-level direction
- UnlimitedBlock level
!75
![Page 76: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/76.jpg)
Inheritance technique
• Inherit the direction of parent block
- Unless there’s more evidence
- Static directionality
- Propagation (Technique #4)
• Top-down
- One single top-level direction
- Unlimited
• Examples
- Default behavior in HTML and most native interface stacks
Block level
!76
![Page 77: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/77.jpg)
Cascading technique
Block level
• If no strong direction, fallback on the previous block’s
- Continue fallback until there’s a strong direction
- First block falls back onto the parent block (inheritance)
!77
![Page 78: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/78.jpg)
Cascading technique
Block level
• If no strong direction, fallback on the previous block’s
- Continue fallback until there’s a strong direction
- First block falls back onto the parent block (inheritance)
• Same layer
- Unlimited
!78
![Page 79: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/79.jpg)
Cascading technique
Block level
• If no strong direction, fallback on the previous block’s
- Continue fallback until there’s a strong direction
- First block falls back onto the parent block (inheritance)
• Same layer
- Unlimited
• Examples
- Paragraph direction setting
- GNOME Text Editor
- Draft.js
!79
![Page 80: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/80.jpg)
Cascading technique
Example from
Draft.js (React WYSIWYG text
editor)
!80
![Page 81: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/81.jpg)
Propagation technique
Block level
& inline level
• Direction of an element depend on a child element
- In inline, the (outer) element is perceived as an inline block.
!81
![Page 82: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/82.jpg)
Propagation technique
Block level
& inline level
• Direction of an element depend on a child element
- In inline, the (outer) element is perceived as an inline block.
• Bottom-up
- Usually limited to within a component boundary
!82
![Page 83: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/83.jpg)
Propagation technique
Block level
& inline level
• Direction of an element depend on a child element
- In inline, the (outer) element is perceived as an inline block.
• Bottom-up
- Usually limited to within a component boundary
• Examples
- Hashtags (inline)
Welcome to the i18n Conference! #unicode یونی کد#
#unicode به کنفرانس بین املللی سازی خوش آمدید! #یونی کد
!83
![Page 84: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/84.jpg)
Propagation technique
Block level
& inline level
• Direction of an element depend on a child element
- In inline, the (outer) element is perceived as an inline block.
• Bottom-up
- Usually limited to within a component boundary
• Examples
- Hashtags (inline)
- Link attachment preview (block)
Welcome to the i18n Conference! #unicode یونی کد#
#unicode به کنفرانس بین املللی سازی خوش آمدید! #یونی کد
!84
![Page 85: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/85.jpg)
Propagation technique
Example from
concept for sharing external
links as
attachment
!85
![Page 86: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/86.jpg)
Other challenges
• Can’t expect everyone to know UBA details by heart
!86
![Page 87: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/87.jpg)
Other challenges
• Can’t expect everyone to know UBA details by heart
• Some systems/platforms lack some bidi features
!87
![Page 88: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/88.jpg)
Other challenges
• Can’t expect everyone to know UBA details by heart
• Some systems/platforms lack some bidi features
• Some systems/platforms behave differently in corner cases
- e.g. UI components for Apple & Android
!88
![Page 89: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/89.jpg)
Other challenges
• Can’t expect everyone to know UBA details by heart
• Some systems/platforms lack some bidi features
• Some systems/platforms behave differently in corner cases
- e.g. UI components for Apple & Android
• Mixing data with interface messages is always a challenge
- Strict abstraction is needed to make sure every data, such as phone
numbers, are always presented in the right order.
!89
![Page 90: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/90.jpg)
Other challenges
• Can’t expect everyone to know UBA details by heart
• Some systems/platforms lack some bidi features
• Some systems/platforms behave differently in corner cases
- e.g. UI components for Apple & Android
• Mixing data with interface messages is always a challenge
- Strict abstraction is needed to make sure every data, such as phone
numbers, are always presented in the right order.
• Unresolved culturally questions in bidi behavior
!90
![Page 91: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/91.jpg)
Summary
!91
• How writing systems got directionality
• How bidi text works in written form, and is encoded & represented
• How text and layout structures work in different directionalities
• Special application behaviors to support bidi locales &/or content
• Additional problems that require better system & i18n architecture
![Page 92: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/92.jpg)
Additional Reads
!92
Unicode Consortium
• Unicode® Standard Annex #9—Unicode Bidirectional Algorithm (UBA)
W3C WG Notes and Articles
• Text Layout Requirements for the Arabic Script
• Authoring HTML: Handling Right-to-left Scripts
• Additional Requirements for Bidi in HTML & CSS
• Unicode Bidirectional Algorithm basics
• Strings and bidi
Libraries
• Draft.js
![Page 93: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/93.jpg)
Questions?
質問? ׁשְאֵלֹות?
प्रश्न?
질문?
سؤال؟پرسش؟
![Page 94: Get Your Head Around Bidirectionality!...Unicode Bidirectional Algorithm (UBA)!26 Annex #9 to the Unicode Standard (UAX #9) • Converting a semantic in-memory string of chars into](https://reader033.vdocuments.net/reader033/viewer/2022060517/604989813af72d50354c66b4/html5/thumbnails/94.jpg)