Writing Modes

A presentation at CSS Day 2017 + Browser API Special in June 2017 in Amsterdam, Netherlands by Jen Simmons

Slide 1

Wr iting Modes

Slide 2

Slide 3

“ — Bruce Lawson It ’s

the World Wide Web, not the Wealthy Western Web.

Slide 4

Slide 5

Slide 6

drafts.csswg.org/css-writing-modes

Slide 7

direction / dir writing-mode text-orientation

Slide 8

Display Level 3

Slide 9

drafts.csswg.org/css-display

Slide 10

div {
display: block; }

Slide 11

div {
display: inline; }

Slide 12

div {
display: inline-block; }

Slide 13

display: block; display: inline; display: inline-block; display: none;

display: table; display: flex; display: grid;

Slide 14

display: <value>;

Slide 15

display: <outside> <inside>;

Slide 16

The outer display type dictates   how the box participates in its   parent’s formatting context. <display-outside> = block inline
run-in

Slide 17

Slide 18

Slide 19

The outer display type dictates   how the box participates in its   parent’s formatting context. <display-outside> = block inline
run-in

Slide 20

The inner display type defines
the kind of formatting context   it generates, dictating how its descendant boxes are laid out. <display-inside> = flow flex flow-root grid table ruby

Slide 21

Short display Full display Generated box block block flow block-level block container flow-root block flow-root block-level block container w/ new Block Formatting Context inline inline flow inline box inline-block inline flow-root inline-level block container flex block flex block-level flex container inline-flex inline flex inline-level flex container grid block grid block-level grid container inline-grid inline grid inline-level grid container table block table block-level table wrapper box inline-table inline table inline-level table wrapper box

Slide 22

Short display Full display Generated box none subtree omitted from box tree contents element replaced by contents in box tree run-in run-in flow run-in box (inline box with special box-tree munging rules) list-item list-item block flow block box with additional marker box inline-list-item list-item inline flow inline box with additional marker box ruby inline ruby inline-level ruby container block ruby block ruby block box containing ruby container <display-internal> layout-specific internal box (a bunch more table & ruby stuff) (like table-row-group, table-column, ruby-base-container…)

Slide 23

Wr iting Modes

Slide 24

inline direction When I’m writing or reading this is the way the characters flow

Slide 25

<p > <p > <p > <p > block flow direction

Slide 26

A character orientation

Slide 27

block
direction inline direction A character orientation

Slide 28

SYSTEMS LIKE LATIN block
direction inline direction A character orientation

Slide 29

Slide 30

SYSTEMS LIKE ARABIC inline direction block
direction A character orientation

Slide 31

direction

Slide 32

.foo { direction: ltr; }

.foo { direction: rtl; }

Slide 33

Slide 34

“ — The Writing Modes Spec Authors should not

use direction.

Slide 35

<!DOCTYPE html> <html lang="en-US" dir="ltr" > <head> … </head> <body> … </body> </html>

Slide 36

<!DOCTYPE html> <html lang="ar" dir="rtl" > <head> … </head> <body> … </body> </html>

Slide 37

Slide 38

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction

Slide 39

< p>English words</p>

<p><bdo dir=" rtl"> . ﺔﯿﺑﺮﻌﻟا

تﺎﻤﻠﻜﻟا

</bdo></p>

Slide 40

<p>English words in this paragraph. <bdi dir="rtl">. تﺎﻤﻠﻜﻟ

</bdi> Some

more LTR words, same paragraph.</p>

Slide 41

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction

Slide 42

<section><bdo dir="rtl" > ... </bdo></section> Example: Writing Mode 1A

Slide 43

Slide 44

unicode-bidi

Slide 45

Slide 46

“ — The Writing Modes Spec Authors should not

use unicode-bidi.

Slide 47

youtube.com/watch?v=XgqP0qogg6U

fantasai.inkedblade.net/style/talks/bidi/

Slide 48

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction

Slide 49

Slide 50

Slide 51

Slide 52

SYSTEMS LIKE MONGOLIAN block
direction inline direction

Slide 53

SYSTEMS LIKE MONGOLIAN block
direction inline direction

Slide 54

HAN-BASED SYSTEMS block
direction inline direction *Chinese, Japanese, Korean & more

Slide 55

HAN-BASED SYSTEMS block
direction inline direction block
direction inline direction *Chinese, Japanese, Korean & more

Slide 56

Slide 57

Slide 58

Slide 59

HAN-BASED SYSTEMS block
direction inline direction block
direction inline direction *Chinese, Japanese, Korean & more

Slide 60

writing-mode

Slide 61

THREE OPTIONS FOR WRITING-MODE writing-mode:
vertical-lr; writing-mode:
vertical-rl; toggle w/
dir writing-mode:
horizontal-tb;

Slide 62

Slide 63

HAN-BASED SYSTEMS *Chinese, Japanese, Korean & more writing-mode:
horizontal-tb; writing-mode:
vertical-rl;

Slide 64

chenhuijing.com/zh-type

Slide 65

chenhuijing.com/blog/chinese-web-typography

Slide 66

Slide 67

Slide 68

HAN-BASED SYSTEMS *Chinese, Japanese, Korean & more writing-mode:
horizontal-tb; writing-mode:
vertical-rl;

Slide 69

Slide 70

h1:nth-child(2) { writing-mode: vertical-rl; }

Slide 71

Slide 72

h1:nth-child(2) { writing-mode: ???; }

Slide 73

text flowing
like this writing-mode: vertical-rl;

Slide 74

NOPE!

text flowing
like this writing-mode: vertical-lr;
text flowing
like this writing-mode: vertical-rl;

Slide 75

like this
text flowing
text flowing
like this SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

Slide 76

SYSTEMS LIKE MONGOLIAN

Slide 77

SYSTEMS LIKE MONGOLIAN

Slide 78

Block
Start Top of
Horizontal scripts hello A

Slide 79

like this
text flowing
text flowing
like this SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

Slide 80

section { writing-mode: vertical-rl;

} (This triggers
text-orientation: mixed
as the default.) Example: Writing Mode 1A

Slide 81

Slide 82

section { writing-mode: vertical-lr;

} Example: Writing Mode 1A

Slide 83

Slide 84

THREE OPTIONS FOR WRITING-MODE direction block inline direction writing-mode:
vertical-lr; block
direction inline direction writing-mode:
vertical-rl; block
direction inline direction toggle w/
dir writing-mode:
horizontal-tb; creates a vertical

typographic mode

Slide 85

TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction writing-mode:
sideways-lr; block
direction inline direction writing-mode:
sideways-rl; creates a horizontal

typographic mode only A A

Slide 86

section { writing-mode: sideways-rl;

} Example: Writing Mode 1A

Slide 87

section { writing-mode: sideways-lr;

} Example: Writing Mode 1A

Slide 88

block
direction inline direction writing-mode:
sideways-rl; block
direction inline direction writing-mode:
vertical-rl; A

Slide 89

direction block inline direction writing-mode:
vertical-lr; block direction inline direction writing-mode:
sideways-lr; A

Slide 90

creates a vertical

typographic mode THREE OPTIONS FOR WRITING-MODE direction block inline direction writing-mode:
vertical-lr; block
direction inline direction writing-mode:
vertical-rl; block
direction inline direction toggle w/
dir writing-mode:
horizontal-tb;

Slide 91

My Cool Website

Slide 92

My Cool Website how?

Slide 93

My Cool Website writing-mode: vertical-rl; transform: rotate(180deg) ; text-orientation: sideways; (needed to fix punctuation / underlining) text-align: right;

Slide 94

text-orientation

Slide 95

HAN-LIKE SYSTEMS

Slide 96

Slide 97

options for vertical writing modes text-orientation:
mixed; text-orientation:
upright; text-orientation:
sideways; THREE OPTIONS FOR TEXT-ORIENTATION

Slide 98

Slide 99

Slide 100

section { writing-mode: vertical-rl;

text-orientation: upright;

} Example: Writing Mode 1A

Slide 101

section { writing-mode: vertical-lr;

text-orientation: upright;

} Example: Writing Mode 1A

Slide 102

block
direction inline direction writing-mode:
sideways-rl; block
direction inline direction writing-mode:
vertical-rl; text-orientation: mixed; creates a horizontal

typographic mode creates a vertical

typographic mode

Slide 103

My Cool Website writing-mode: vertical-rl; transform: rotate(180deg) ; text-orientation: sideways; (needed to fix punctuation / underlining) text-align: right;

Slide 104

h1 { writing-mode: vertical-rl; } Example: Writing Mode 4A

Slide 105

h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right;

text-orientation: sideways;

} Example: Writing Mode 4B

Slide 106

h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; } Example: Writing Mode 4C

Slide 107

h1 { writing-mode: vertical-rl;

text-orientation: upright; text-transform: uppercase; transform: rotate(180deg); } Example: Writing Mode 4D

Slide 108

Slide 109

Slide 110

<span>Made</span>

<span>by</span> 

<span>Few</span>

</h1> </main> Example: Writing Mode 3 A

Slide 111

h1 span:nth-child(2) {

writing-mode: vertical-rl;

text-orientation: upright; font-size: 45%; }
Example: Writing Mode 3 A

Slide 112

h1 { display: grid; } h1 span:nth-child(1) {
grid-column: 1 / 3; grid-row: 1 / 2; } h1 span:nth-child(2) {
grid-column: 1 / 2; grid-row: 2 / 3;

}

h1 span:nth-child(3) {
grid-column: 2 / 3; grid-row: 2 / 3; } Example: Writing Mode 3 A

Slide 113

SUMMARY

Slide 114

block
direction inline direction A character orientation

Slide 115

SYSTEMS LIKE LATIN A

Slide 116

SYSTEMS LIKE ARABIC A

Slide 117

HAN-LIKE SYSTEMS *Chinese, Japanese, Korean & more

Slide 118

MONGOLIAN-LIKE SYSTEMS

Slide 119

dir writing-mode text-orientation

Slide 120

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction A A

Slide 121

typographic mode

È A

Slide 122

TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE block direction inline direction writing-mode:
sideways-lr; block
direction inline direction writing-mode:
sideways-rl; creates a horizontal

typographic mode only A A