Типографика для восточных языков, будь то китайский или арабский, сильно отличается от кириллической. Разумеется, это отражается и на CSS. В докладе речь пойдёт о базовых понятиях, неочевидных вещах и о возможностях, помогающих фронтендеру работать с такими языками.

1. Типографика
Восток

6. Typography: from metal to pixels
https://youtu.be/EuXrh_T2aLg
4

7. 5

8. 6

10. Письмо
书写

11. Не одно и то же
9

12. Не одно и то же
• Почти (но в китайском проще)
• 80% иероглифов понятны
всем
• Хотя это тоже китайский
• Но ни слова на слух
• Есть в корейском
9

13. Не только лишь иероглиф
• Кандзи
• Хира́ гана — союзы/частицы
• Формы слов
• Руби
• Ката́ кана — иностранные слова
• Ромадзи
10

14. ツシマ
11

15. ツシマ
Цу Си Ма
11

16. Ничего не понятно
12

17. Ничего не понятно
• Непонятно как произносить
12

18. Ничего не понятно
• Непонятно как произносить
• Несколько произношений
12

19. Ничего не понятно
• Непонятно как произносить
• Несколько произношений
• Новый смысл
12

20. И вовсе не иероглиф
• Хангыль
• Ханча (китайские слова)
• Чамо (51 шт.)
• Из «24» «букв»
13

21. Лего
14

22. Лего
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
14

23. Лего
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ
14

24. Лего
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ
아 름 다 운 아 내
14

25. Лего
ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ
아 름 다 운 아 내
а рым да ун а нэ
14

26. Направление
书写⽅方向

27. 16

28. 16

29. 16

31. 18

32. Пунктуация
标点

33. 。
Точка

34. 21

35. 《
Кавычки
22

36. 《漢漢字標準〈格式〉》
23

37. 、
Запятая

38. ‧
Интерпункт

39. 李李奧納多‧達‧⽂文⻄西
26

40. レオナルド・ダ・ヴィンチ
27

41. ……

42. ……
Многоточие

43. 「 」
Скобки

44. 『 』
Двойные скобки

45. 「標點『擠壓』與『懸掛』」
31

46. 【 】
Линзообразные скобки

47. ※
Астериск в японском

48. WEB
⽹网络

51. writing-mode
p {
writing-mode: vertical-rl;
}
37

52. writing-mode
p {
writing-mode:
vertical-rl,
vertical-lr,
horizontal-tb,
sideways-rl,
sideways-lr;
}
38

53. text-orientation
p {
text-orientation: mixed
upright
sideways;
}
39

54. text-orientation
p {
text-orientation: mixed
upright
sideways;
}
39

55. text-orientation
p {
text-orientation: mixed
upright
sideways;
}
39

56. text-orientation
p {
text-orientation: mixed
upright
sideways;
}
39

58. text-combine-upright
p {
writing-mode: vertical-lr;
text-combine-upright: digits 2;
}
41

59. text-combine-upright
p {
writing-mode: vertical-lr;
text-combine-upright: digits 2;
}
41

60. text-combine-upright
p {
writing-mode: vertical-lr;
text-combine-upright: all;
}
42

61. text-combine-upright
p {
writing-mode: vertical-lr;
text-combine-upright: all;
}
42

62. text-combine-upright
p {
writing-mode: vertical-lr;
text-combine-upright: all;
}
42

63. word-break
p {
word-break: break-all
keep-all;
}
43

64. word-break
p {
word-break: break-all
keep-all;
}
43

65. word-break
p {
word-break: break-all
keep-all;
}
43

66. word-break
p {
word-break: break-all
keep-all;
}
43

67. list-style-type
44

68. list-style-type
ol {
list-style-type: cjk-ideographic;
}
44

69. list-style-type
ol {
list-style-type: cjk-ideographic;
}
⼀一 one
⼆二 two
三 three
44

70. list-style
45

71. list-style
ul {
list-style: none;
}
45

72. list-style
ul {
list-style: none;
}
li::before {
content: ‘※‘;
}
45

73. list-style
ul {
list-style: none;
}
li::before {
content: ‘※‘;
}
45
※ one
※ two
※ three

74. <em>
46

75. <em>
em::before {
content: ‘【’
}
46

76. <em>
em::before {
content: ‘【’
}
em::after {
content: ‘】’
}
46

77. <em>
em::before {
content: ‘【’
}
em::after {
content: ‘】’
}
【標點擠壓與懸掛】
46

78. <ruby>
47

79. <ruby>
47

80. <ruby>
<ruby>
<rb>W</rb><rt>World</rt>
<rb>W</rb><rt>Wide</rt>
<rb>W</rb><rt>Web</rt>
</ruby>
47

81. <ruby>
<div class="vertical">
<ruby>
<rb>漢漢</rb><rt>Kan</rt>
<rb>字</rb><rt>ji</rt>
</ruby>
</div>
48

82. <ruby>
<div class="vertical">
<ruby>
漢漢 <rt>かん</rt>
字 <rt>じ</rt>
</ruby>
</div>
49

83. <ruby>
<ruby>
明⽇日<rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
50

84. <ruby>
<ruby>
明⽇日<rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
51

85. <ruby>
<ruby>
明⽇日<rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
51

86. <rbc>/<rtc>
<ruby>
<rbc>
<rb>斎</rb>
<rb>藤</rb>
<rb>信</rb>
<rb>男</rb>
</rbc>
<rtc class=‘reading’>
<rt>さいとうのぶお</rt>
</rtc>
<rtc class=‘annotation’>
<rt>W3C Associate Chairman</rt>
</rtc>
</ruby>
52

87. ruby-…
.reading {
ruby-position: under;
ruby-align: space-between;
}
.annotation {
ruby-position: over;
}
53

89. Письмо
‫كتابة‬

90. Свсм упрлс
56

91. Свсм упрлс
• Справа налево
56

92. Свсм упрлс
• Справа налево
• Нет гласных
56

93. Свсм упрлс
• Справа налево
• Нет гласных
• Мало заимствований
56

94. Свсм упрлс
• Справа налево
• Нет гласных
• Мало заимствований
• Много вариантов
56

95. Свсм упрлс
• Справа налево
• Нет гласных
• Мало заимствований
• Много вариантов
• Белорусский арабский
56

96. 57

97. Должно быть красиво
58

98. Должно быть красиво
• Цифры слева направо
58

99. Должно быть красиво
• Цифры слева направо
• Слова переносить нельзя
58

100. Должно быть красиво
• Цифры слева направо
• Слова переносить нельзя
• Слова можно удлинять
58

101. Должно быть красиво
• Цифры слева направо
• Слова переносить нельзя
• Слова можно удлинять
• Акцентирования нет
58

102. Должно быть красиво
• Цифры слева направо
• Слова переносить нельзя
• Слова можно удлинять
• Акцентирования нет
• Знаки препинания…
58

103. Пунктуация
‫ترقيم‬

104. ،
Запятая

105. 61
‫ساميرة؟‬ ‫يا‬ ،‫كابوتك‬ ‫اين‬

106. ‫و‬

107. ‫و‬
«и»

108. ‫؟‬
Вопрос

109. 64
‫ساميرة؟‬ ‫يا‬ ،‫كابوتك‬ ‫اين‬

110. WEB
‫شبكة‬

111. direction
66

112. direction
p {
direction: rtl,
ltr;
}
66

113. text-justify
67

114. text-justify
p {
text-justify: kashida;
}
67

115. text-justify
p {
text-justify: kashida;
}
68

116. <p>Это арабское слово !‫قران‬ ‫با‬ ‫طراحی‬ будет иметь направление справа
налево.</p>
69

117. Это арабское слово ‫قران‬ ‫با‬ ‫!طراحی‬ будет иметь направление справа
налево.
70

118. <p dir=‘ltr’>Это арабское слово <bdi>!‫قران‬ ‫با‬ ‫/<طراحی‬bdi> будет иметь
направление справа налево.</p>
<bdi>
71

119. Это арабское слово !‫قران‬ ‫با‬ ‫طراحی‬ будет иметь направление справа
налево.
72

120. <bdo dir=‘rtl’>Это арабское слово <bdi>‫قران‬ ‫با‬ ‫/<طراحی‬bdi> будет иметь
направление справа налево.</bdo>
<bdo>
73

121. <bdo>
.овелан аварпс еинелварпан ьтеми тедуб ‫قران‬ ‫با‬ ‫طراحی‬ оволс
еоксбара отЭ
74

122. unicode-bidi
p {
unicode-bidi: normal;
embed,
isolate,
bidi-override,
isolate-override,
plaintext;
}
75

125. padding/margin
78

126. padding/margin
p {
padding-left: 10px;
margin-right: 2px;
}
78

127. padding/margin
p {
padding-left: 10px;
margin-right: 2px;
}
78

128. padding/margin
p {
padding-left: 10px;
margin-right: 2px;
}
78

129. padding/margin
p {
padding-left: 10px;
margin-right: 2px;
}
78
p {
padding-inline-start: 10px;
margin-inline-end: 2px;
}

130. text-align
79

131. text-align
p {
text-align: left;
}
79

132. text-align
p {
text-align: left;
}
79

133. text-align
p {
text-align: left;
}
79

134. text-align
p {
text-align: left;
}
79
p {
text-align: start;
}

135. position: absolute

136. position: absolute
p {
position: absolute;
left: 1337px;
}

137. position: absolute
p {
position: absolute;
left: 1337px;
}

138. position: absolute
p {
position: absolute;
left: 1337px;
}

139. position: absolute
p {
position: absolute;
left: 1337px;
}
p {
position: absolute;
offset-inline-start: 1337px;
}

140. float
81

141. float
section {
float: left;
}
81

142. float
section {
float: left;
}
81

143. float
section {
float: left;
}
81

144. float
section {
float: left;
}
81
section {
float: inline-start;
}

145. Мы хотим еще!
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

146. Спасибо

147. Спасибо
тебе, Рома

148. Спасибо

149. Спасибо
Вопросы?