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

Typography: from metal to pixels

https://youtu.be/EuXrh_T2aLg

Письмо书写

Не одно и то же• Почти (но в китайском

проще)

• 80% иероглифов понятны всем

• Хотя это тоже китайский

• Но ни слова на слух

• Есть в корейском

Не только лишь иероглиф

• Кандзи

• Хира́гана — союзы/частицы

• Формы слов

• Руби

• Ката́кана — иностранные слова

• Ромадзи

ツシマ Цу Си Ма

Ничего не понятно

• Непонятно как произносить

• Несколько произношений

• Новый смысл

И вовсе не иероглиф

• Хангыль

• Ханча (китайские слова)

• Чамо (51 шт.)

• Из «24» «букв»

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

ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ아 름 다 운 아 내

а рым да ун а нэ

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

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

。Точка

《Кавычки

《漢字標準〈格式〉》

、Запятая

‧Интерпункт

李奧納多‧達‧文西

レオナルド‧ダ‧ヴィンチ

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

「 」Скобки

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

「標點『擠壓』與『懸掛』」

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

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

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;}

Письмоكتابة

Свсм упрлс

• Справа налево

• Нет гласных

• Мало заимствований

• Много вариантов

• Белорусский арабский

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

• Цифры слева направо

• Слова переносить нельзя

• Слова можно удлинять

• Акцентирования нет

• Знаки препинания…

Пунктуацияترقيم

،Запятая

ساميرة؟ يا كابوتك، اين

و«и»

؟Вопрос

ساميرة؟ يا كابوتك، اين

WEBشبكة

direction

p { direction: rtl,

ltr;}

text-justify

p { text-justify: kashida;}

text-justify

p { text-justify: kashida;}

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

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

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

<bdi>

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

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

<bdo>

<bdo>

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

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;}

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

Спасиботебе, РомаВопросы?