Writing Modes

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

“ — Bruce Lawson It ’s
the World Wide Web, not the Wealthy Western Web.

direction / dir writing-mode text-orientation

div {
display: block; }
<div > <div > <div > <div >

div {
display: inline; }
<div > <div > <div > <div >

div {
display: inline-block; }
<div > <div > <div > <div >

display: block; display: inline; display: inline-block; display: none;
display: table; display: flex; display: grid;

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

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

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

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…)

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

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

block
direction inline direction A character orientation

SYSTEMS LIKE LATIN block
direction inline direction A character orientation

SYSTEMS LIKE ARABIC inline direction block
direction A character orientation

.foo { direction: ltr; }
.foo { direction: rtl; }

“ — The Writing Modes Spec Authors should not
use `direction`.

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

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

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction
<html dir="ltr" > <html dir="rtl" >

< p>English words</p>
<p><bdo dir=" rtl"> . ﺔﯿﺑﺮﻌﻟا
تﺎﻤﻠﻜﻟا
</bdo></p>

<p>English words in this paragraph. <bdi dir="rtl">. تﺎﻤﻠﻜﻟ
</bdi> Some
more LTR words, same paragraph.</p>

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction
<html dir="ltr" > <bdo dir="ltr" > <bdi dir="ltr" > <html dir="rtl" > <bdo dir="rtl" > <bdi dir="rtl" >

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

“ — The Writing Modes Spec Authors should not
use `unicode-bidi`.

youtube.com/watch?v=XgqP0qogg6U
fantasai.inkedblade.net/style/talks/bidi/

SYSTEMS LIKE MONGOLIAN block
direction inline direction

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

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

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

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

chenhuijing.com/blog/chinese-web-typography

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

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

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

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

Block
Start Top of
Horizontal scripts hello A

section { writing-mode: vertical-rl;
} (This triggers
text-orientation: mixed
as the default.) Example: Writing Mode 1A

section { writing-mode: vertical-lr;
} Example: Writing Mode 1A

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

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

section { writing-mode: sideways-rl;
} Example: Writing Mode 1A

section { writing-mode: sideways-lr;
} Example: Writing Mode 1A

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

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

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;

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

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

section { writing-mode: vertical-rl;
text-orientation: upright;
} Example: Writing Mode 1A

section { writing-mode: vertical-lr;
text-orientation: upright;
} Example: Writing Mode 1A

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

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

h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right;
text-orientation: sideways;
} Example: Writing Mode 4B

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

h1 { writing-mode: vertical-rl;
text-orientation: upright; text-transform: uppercase; transform: rotate(180deg); } Example: Writing Mode 4D

<main> <h1>
`<span>Made</span> <span>by</span> <span>Few</span>`
</h1> </main> Example: Writing Mode 3 A

h1 span:nth-child(2) {
writing-mode: vertical-rl;
text-orientation: upright; font-size: 45%; }
Example: Writing Mode 3 A

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

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

SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block
direction inline direction block
direction inline direction A A
<html dir="ltr" > <bdo dir="ltr" > <bdi dir="ltr" > <html dir="rtl" > <bdo dir="rtl" > <bdi dir="rtl" >

block end inline
start inline
end block start

block start inline end inline start block end

margin-block-start: 1rem; padding-inline-end: 1rem; border-block-end: 1px solid black; text-align: start; float: inline-start;

from CSS Tricks’ Complete Guide to Flexbox

cross axis main axis flex-direction: row;

cross axis main axis Justify Align flex-direction: row;

main axis Justify cross axis Align flex-direction: column;

Grid Justify 1 4 5 2 3 6 8 7 9 Align writing-mode: horizontal-tb; grid-auto-flow: row;

Grid Justify 1 4 5 2 3 6 8 7 9 writing-mode: horizontal-tb; grid-auto-flow: column;
Align

THANKS! jensimmons.com
@jensimmons layout.land labs.jensimmons.com

Jen Simmons
@jensimmons

1 / 150

The web was invented to display text in a left-to-right horizontal writing mode — the way English and other western European languages flow. But as Bruce Lawson says, WWW stands for the World Wide Web, not the Western Wealthy Web. It's more important now than ever to be inclusive and global in our thinking, and resist imperialistic and nationalistic impulses.

Of course, over time the web has evolved. Unicode and the bidirectional algorithm provide support for right-to-left languages. More recently, the CSS Writing Mode specification added support for scripts that are typeset vertically. This talk will go through the Writing Mode Specification, unpacking our landscape of CSS tools for typesetting a complex range of written language. You'll also learn tricks for using writing mode properties to typeset graphic design effects for horizontal languages.

Writing Modes

Link for this presentation:

HTML code for embedding:

Share on social media:

Video