Logical Properties & Values
Bienvenue! Welcome! Wilkommen!
$ € £ M/D/Y D/M/Y °C °F
HTML <meta charset=utf-8> or HTTP Content-Type: text/html;charset=utf-8
lang attributes
Content-Language
:lang(fr) { ... CSS for elements en français ... }
:lang(\*-CH) { ... CSS for elements in Swiss dialects ... }
:lang(\*-Latn) { ... CSS for elements in Latin transcription ... }
[lang]:lang(fr) { ... CSS to inherit from language root ... }
Today we watched a presentation 1—————————————————————————————► by Elika Etemad (الیکا اعتماد) on 2—————————————► ◄——————————3 4► the bidi algorithm. 5—————————————————►
ال ۱۳۹۱ مان ایران نرفتم.
◄——————————————3 2——► ◄1
As soon as you expect to have any RTL, you must deal with bidi.
Text is stored in logical order, not visual order.
by Elika Etemad (الیکا اعتماد) on bidi.
1 2 3 5 4 6 7
by Elika Etemad (الیکا 1 2 3 4 اعتماد) on bidi. 5 6 7
Visual order depends on line-breaking.
by Elika Etemad (الیکا اعتماد) on bidi.
1 2 3 5 4 6 7
by Elika Etemad (الیکا 1 2 3 4 اعتماد) on bidi. 5 6 7
All Unicode characters are either:
Note: Numbers are special. We'll pretend they're L for now.
Surrounded neutrals take surrounding directionality.
L N N N L ⟱ L L L L L
L N N N R ⟱ L ? ? ? R
N R R L N ⟱ ? R R L ?
Each paragraph has a base direction.
L N N N R ⟱ L L L L R
N R R L N ⟱ L R R L L
L N N N R ⟱ L R R R R
N R R L N ⟱ R R R L R
Use the base direction for initial/final/conflicted neutrals.
| Wrong Base Direction | Correct Base Direction | |
|---|---|---|
.This is my sentence | ⮕ |
This is my sentence. |
این جمله است. |
این جمله است. |
dir attribute (not CSS direction property)
ltr; set rtl on <html> for Hebrew, Arabic, etc.
dir value inherits
dir create isolation
dir=auto and <bdi>W3C writes the CSS specifications.
W3C مشخصات CSS را می نویسد.
W3C مشخصات CSS را می نویسد.
| Physical | Logical |
|---|---|
text-align: left
| text-align: start
|
margin-left: 2em
| margin-inline-start: 2em
|
:dir(rtl) { ... CSS for rtl elements ... }
:dir(ltr) { ... CSS for ltr elements ... }
auto = range formula between min-content/max-content
min-content = largest unbreakable object
max-content = smallest size without wrapping
Resizable Typography Experiment using “Intrinsic Design” (Jen Simmons)
grid-template-columns: max-content max-content minmax(min-content,1fr) min-content
Intrinsic Sizing Adapts to Chinese
dir and lang
em, rem, ch, etc.
:dir() and :lang() selectors
https://www.w3.org/International/