Upload
fronttalks-conference
View
78
Download
6
Embed Size (px)
Citation preview
Typography: from metal to pixels
https://youtu.be/EuXrh_T2aLg
4
https://youtu.be/EuXrh_T2aLg
5
6
9
( )
80%
9
/
10
11
11
12
12
12
12
( )
(51 .)
24
13
14
14
14
14
14
16
16
16
18
21
22
23
26
27
31
WEB
writing-mode
p { writing-mode: vertical-rl;
}
37
writing-modep { writing-mode: vertical-rl, vertical-lr, horizontal-tb, sideways-rl, sideways-lr;
}
38
text-orientation
p { text-orientation: mixed
upright sideways;
}
39
text-orientation
p { text-orientation: mixed
upright sideways;
}
39
text-orientation
p { text-orientation: mixed
upright sideways;
}
39
text-orientation
p { text-orientation: mixed
upright sideways;
}
39
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: digits 2; }
41
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: digits 2; }
41
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: all; }
42
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: all; }
42
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: all; }
42
word-break
p { word-break: break-all keep-all;
}
43
word-break
p { word-break: break-all keep-all;
}
43
word-break
p { word-break: break-all keep-all;
}
43
word-break
p { word-break: break-all keep-all;
}
43
list-style-type
44
list-style-type
ol { list-style-type: cjk-ideographic; }
44
list-style-type
ol { list-style-type: cjk-ideographic; }
one two three
44
list-style
45
list-style
ul { list-style: none; }
45
list-style
ul { list-style: none; }
li::before { content: ;
}
45
list-style
ul { list-style: none; }
li::before { content: ;
}
45
one two three
46
em::before { content:
}
46
em::before { content:
}
em::after { content:
}
46
em::before { content:
}
em::after { content:
}
46
47
47
WWorld WWide WWeb
47
Kan ji
48
49
(Ashita)
50
(Ashita)
51
(Ashita)
51
/ W3C Associate Chairman
52
ruby-
.reading { ruby-position: under; ruby-align: space-between; } .annotation { ruby-position: over; }
53
56
56
56
56
56
56
57
58
58
58
58
58
58
61
64
WEB
direction
66
direction
p { direction: rtl,
ltr; }
66
text-justify
67
text-justify
p { text-justify: kashida; }
67
text-justify
p { text-justify: kashida; }
68
! .
69
! .
70
! .
71
! .
72
.
73
.
74
unicode-bidip { unicode-bidi: normal; embed, isolate, bidi-override, isolate-override, plaintext;
}
75
padding/margin
78
padding/margin
p { padding-left: 10px; margin-right: 2px; }
78
padding/margin
p { padding-left: 10px; margin-right: 2px; }
78
padding/margin
p { padding-left: 10px; margin-right: 2px; }
78
padding/margin
p { padding-left: 10px; margin-right: 2px; }
78
p { padding-inline-start: 10px; margin-inline-end: 2px; }
text-align
79
text-align
p { text-align: left; }
79
text-align
p { text-align: left; }
79
text-align
p { text-align: left; }
79
text-align
p { text-align: left; }
79
p { text-align: start; }
position: absolute
position: absolute
p { position: absolute; left: 1337px; }
position: absolute
p { position: absolute; left: 1337px; }
position: absolute
p { position: absolute; left: 1337px; }
position: absolute
p { position: absolute; left: 1337px; }
p { position: absolute; offset-inline-start: 1337px; }
float
81
float
section { float: left; }
81
float
section { float: left; }
81
float
section { float: left; }
81
float
section { float: left; }
81
section { float: inline-start; }
!
82
Mozilla Building RTL goo.gl/6cQI2R Mozilla Building RTL 2 goo.gl/NH2lSk W3C: ruby http://goo.gl/DgwY2T W3C: writing modes http://goo.gl/5oT39m W3C: bidi Korean lessons http://goo.gl/Z77IVs hanzi.pro rtlcss.com
http://goo.gl/6cQI2Rhttp://goo.gl/NH2lSkhttp://goo.gl/DgwY2Thttp://goo.gl/5oT39mhttps://www.w3.org/International/tutorials/svg-tiny-bidi/Overview.ru.phphttp://goo.gl/Z77IVshttps://hanzi.pro/http://rtlcss.com/
,
?