typography for frontend developer: asia
TRANSCRIPT
Typography for Frontend-
developerAsia
Writing书写
Not the same• Almost (easier in Chinese)
• 80% of hieroglyphs are understandable for everyone
• Absolutely different in pronounce
• A few in Korean
Not only hieroglyphs• Kanji
• Hiragana — conjunctions/particles
• Forms of words
• Ruby
• Katakana — foreign words
• Romaji
ツシマ Tsu See Mu[d]
What is it?
• not to know how to pronounce
• A few ways to pronounce
• Brand new meaning
Not a hieroglyph at all
• Hangul
• Hancha (Chinese words)
• Jamo (51 items)
• 24 letters
Legoㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ아 름 다 운 아 내
uh reem duh un uh nah
Direction书写方向
Punctuation标点
。Dot
《Quotation marks
《漢字標準〈格式〉》
、Comma
‧Interpunct
李奧納多‧達‧文西
レオナルド‧ダ‧ヴィンチ
……Ellipsis
「 」(sort of) square braces
『 』(sort of) DOUBLE square braces
「標點『擠壓』與『懸掛』」
【 】Lens braces
※Asterisk
WEB网络
writing-mode
p {writing-mode: vertical-
rl;}
writing-modep {
writing-mode:
vertical-rl,vertical-lr,horizontal-
tb,sideways-
rl,sideways-
lr;}
text-orientationp {
text-orientation: mixed
upright
sideways;}
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: digits 2;}
text-combine-upright
p { writing-mode: vertical-lr; text-combine-upright: all;}
word-break
p {word-break: break-
all keep-all;
}
list-style-type
ol { list-style-type: cjk-ideographic;}
一 one二 two三 three
list-style
ul { list-style: none;}
li::before {content:
‘※‘;}
※ one※ two※ three
<em>
em::before {content:
‘ 【’}em::after {
content: ‘ 】’}
【標點擠壓與懸掛】
<ruby>
<ruby> <rb>W</rb><rt>World</rt> <rb>W</rb><rt>Wide</rt> <rb>W</rb><rt>Web</rt></ruby>
<ruby>
<div class="vertical"> <ruby> <rb> 漢 </rb><rt>Kan</rt> <rb> 字 </rb><rt>ji</rt> </ruby> </div>
<ruby>
<div class="vertical"> <ruby> 漢 <rt> かん </rt> 字 <rt> じ </rt> </ruby> </div>
<ruby>
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby>
<ruby><ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby>
<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>
ruby-…
.reading { ruby-position: under; ruby-align: space-between;}.annotation { ruby-position: over;}
Writingكتابة
Cmn n vr
• From right to left
• No vowels
• Few borrowings
• A lot of variations
• Belarusian Arabian
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…
Punctuationترقيم
،Comma
ساميرة؟ يا كابوتك، اين
و«and»
؟Question mark
ساميرة؟ يا كابوتك، اين
WEBشبكة
direction
p { direction: rtl,
ltr;}
text-justify
p { text-justify: kashida;}
text-justify
p { text-justify: kashida;}
<p>This Arabic word ! قران با <has right-to-left direction.</p طراحی
This Arabic word قران با .has right-to-left direction !طراحی
<p dir=‘ltr’>This Arabic word <bdi>! قران با <bdi> has right-to-left direction.</p/>طراحی
<bdi>
This Arabic word ! قران با .has right-to-left direction طراحی
<bdo dir=‘rtl’>This Arabic word <bdi> قران با <bdi> has right-to-left direction.</bdo/>طراحی
<bdo>
<bdo>
.noitcerid tfel-ot-thgir sah قران با drow cibarA sihT طراحی
unicode-bidip {unicode-bidi:
normal;embed,isolate,bidi-override,isolate-override,plaintext;
}
padding/marginp {padding-left:
10px;margin-right:
2px;}
p {padding-inline-start:
10px;margin-inline-end: 2px;
}
text-align
p {text-align:
left;}
p {text-align:
start;}
position: absolute
p {position:
absolute;left: 1337px;
}
p {position: absolute; offset-inline-start:
1337px;}
float
section {float:
left;}
section {float: inline-
start;}
We want more!• 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
Thank youRoman
Questions?