![ツシマ
Tsu See Mu[d]
8](https://image.slidesharecdn.com/typographyforfrontend-developerasia-161228155500/85/Typography-for-frontend-developers-Asian-languages-8-320.jpg)
Typography for frontend developers: Asian languages
- 2. Typography: from metal to pixels https://youtu.be/EuXrh_T2aLg 2
- 3. 3
- 5. Writing 书写
- 6. Not the same • Almost (easier in Chinese) • 80% of hieroglyphs are understandable for everyone • Absolutely different in pronounce • A few in Korean 6
- 7. Not only hieroglyphs • Kanji • Hiragana — conjunctions/particles • Forms of words • Ruby • Katakana — foreign words • Romaji 7
- 9. What is it? • not to know how to pronounce • A few ways to pronounce • Brand new meaning 9
- 10. Not a hieroglyph at all • Hangul • Hancha (Chinese words) • Jamo (51 items) • 24 letters 10
- 11. Lego ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ 아 름 다 운 아 내 uh reem duh un uh nah 11
- 12. Direction 书写方向
- 13. 13
- 15. 15
- 16. Punctuation 标点
- 17. 。 Dot
- 18. 18
- 20. 《漢字標準〈格式〉》 20
- 21. 、 Comma
- 22. ‧ Interpunct
- 23. 李奧納多‧達‧文西 23
- 24. レオナルド・ダ・ヴィンチ 24
- 25. …… Ellipsis
- 26. 「 」 (sort of) square braces
- 27. 『 』 (sort of) DOUBLE square braces
- 28. 「標點『擠壓』與『懸掛』」 28
- 29. 【 】 Lens braces
- 30. ※ Asterisk
- 31. WEB 网络
- 38. text-combine-upright p { writing-mode: vertical-lr; text-combine-upright: digits 2; } 38
- 41. list-style-type ol { list-style-type: cjk-ideographic; } 一 one 二 two 三 three 41
- 42. list-style ul { list-style: none; } li::before { content: ‘※‘; } 42 ※ one ※ two ※ three
- 43. <em> em::before { content: ‘【’ } em::after { content: ‘】’ } 【標點擠壓與懸掛】 43
- 44. <ruby> <ruby> <rb>W</rb><rt>World</rt> <rb>W</rb><rt>Wide</rt> <rb>W</rb><rt>Web</rt> </ruby> 44
- 45. <ruby> <div class="vertical"> <ruby> <rb>漢</rb><rt>Kan</rt> <rb>字</rb><rt>ji</rt> </ruby> </div> 45
- 46. <ruby> <div class="vertical"> <ruby> 漢 <rt>かん</rt> 字 <rt>じ</rt> </ruby> </div> 46
- 49. <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> 49
- 50. ruby-… .reading { ruby-position: under; ruby-align: space-between; } .annotation { ruby-position: over; } 50
- 52. Writing كتابة
- 53. Cmn n vr • From right to left • No vowels • Few borrowings • A lot of variations • Belarusian Arabian 53
- 54. 54
- 55. Good-looking writing • Numbers are left-to-right • Non-breaking words • There’s a way to lengthen words • There’s no way to emphasize • Punctuation… 55
- 57. ، Comma
- 59. و «and»
- 62. WEB شبكة
- 66. <p>This Arabic word ! طراحیباقران has right-to-left direction.</p> 66
- 67. This Arabic word طراحیباقران ! has right-to-left direction. 67
- 68. p dir=‘ltr’>This Arabic word <bdi>! طراحیباقران </bdi> has right-to-left direction.< <bdi> 68
- 69. This Arabic word ! طراحیباقران has right-to-left direction. 69
- 70. do dir=‘rtl’>This Arabic word <bdi> طراحیباقران </bdi> has right-to-left direction.</ <bdo> 70
- 71. <bdo> .noitcerid tfel-ot-thgir sah طراحیباقران drow cibarA sihT 71
- 75. padding/margin p { padding-left: 10px; margin-right: 2px; } 75 p { padding-inline-start: 10px; margin-inline-end: 2px; }
- 76. text-align p { text-align: left; } 76 p { text-align: start; }
- 77. position: absolute p { position: absolute; left: 1337px; } p { position: absolute; offset-inline-start: 1337px; }
- 78. float section { float: left; } 78 section { float: inline-start; }
- 79. We want more! 79 • 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