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

Типографика: восток – Роман Прудников, 2ГИС

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/

  • ,

  • ?