Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Writing Modes at CSS Day

Avatar for Jen Simmons Jen Simmons
June 16, 2017
Design
7
1.1k

Writing Modes at CSS Day

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.
Avatar for Jen Simmons

Jen Simmons

June 16, 2017
Tweet

More Decks by Jen Simmons

See All by Jen Simmons
Using the HTML width & height attributes to improve web page loading
Avatar for Jen Simmons jensimmons
3
1.7k
It's Never Been A Better Time to Learn Layout CSS
Avatar for Jen Simmons jensimmons
12
1.4k
Everything About Web Design Just Changed
Avatar for Jen Simmons jensimmons
32
70k
Designing with Grid — An Event Apart Denver
Avatar for Jen Simmons jensimmons
2
950
How New CSS Is Changing Everything About Graphic Design on the Web
Avatar for Jen Simmons jensimmons
215
13k
How CSS Grid Changes Everything
Avatar for Jen Simmons jensimmons
7
2.1k
Designing with Grid — An Event Apart San Francisco
Avatar for Jen Simmons jensimmons
3
480
Designing with Grid — An Event Apart Chicago
Avatar for Jen Simmons jensimmons
1
430
Designing with Grid — An Event Apart D.C.
Avatar for Jen Simmons jensimmons
0
380

Other Decks in Design

See All in Design
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
300
もうひとつのアーキテクチャ #kichijojipm
Avatar for kondoyuko kondoyuko
0
220
LayerX DesignersDeck
Avatar for LayerX layerx
PRO
1
7.9k
線で考える画面構成
Avatar for natsuume natsuume
1
840
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
150
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
Avatar for Takehiro KAWASE tkhr_kws
3
330
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.3k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
Avatar for Aki spring_aki
4
210
共通言語としてのデザイントークンと Figmaでの運用
Avatar for Yuki Kamahori kamy0042
0
340
freee + Product Design FY25Q4
Avatar for freee freee
4
13k
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
180
An Early Spring | Storyboard | Scenes 1-18
Avatar for Gio Fortunato giofortuna_story
0
190

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
700
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
49k

Transcript

  1. Writing Modes

  2. None

  3. “ — Bruce Lawson It’ s the World Wide Web,

    not the Wealthy Western Web.
  4. None
  5. None

  6. drafts.csswg.org/css-writing-modes

  7. direction / dir writing-mode text-orientation

  8. Display Level 3

  9. drafts.csswg.org/css-display

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

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

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

  13. display: block; display: inline; display: inline-block; display: none; display: table;

    display: flex; display: grid;

  14. display: <value>;

  15. display: <outside> <inside>;

  16. The outer display type dictates 
 how the box participates

    in its 
 parent’s formatting context. <display-outside> = block inline run-in
  17. None
  18. None

  19. The outer display type dictates 
 how the box participates

    in its 
 parent’s formatting context. <display-outside> = block inline run-in

  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

  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

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

  23. Writing Modes

  24. inline direction When I’m writing or reading this is the

    way the characters flow

  25. <p> <p> <p> <p> block flow direction

  26. Acharacter orientation

  27. block direction inline direction Acharacter orientation

  28. SYSTEMS LIKE LATIN block direction inline direction Acharacter orientation

  29. None

  30. SYSTEMS LIKE ARABIC inline direction block direction Acharacter orientation

  31. direction

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

  33. None

  34. “ — The Writing Modes Spec Authors should not use

    `direction`.

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

    </body> </html>

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

    </body> </html>
  37. None

  38. SYSTEMS LIKE LATIN SYSTEMS LIKE ARABIC block direction inline direction

    block direction inline direction <html dir="ltr"> <html dir="rtl">

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

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

    LTR words, same paragraph.</p>

  41. 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">

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

  43. None

  44. unicode-bidi

  45. None

  46. “ — The Writing Modes Spec Authors should not use

    `unicode-bidi`.

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

  48. 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">
  49. None
  50. None
  51. None

  52. SYSTEMS LIKE MONGOLIAN block direction inline direction

  53. SYSTEMS LIKE MONGOLIAN block direction inline direction

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

    more

  55. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more
  56. None
  57. None
  58. None

  59. HAN-BASED SYSTEMS block direction inline direction block direction inline direction

    *Chinese, Japanese, Korean & more

  60. writing-mode

  61. THREE OPTIONS FOR WRITING-MODE writing-mode: vertical-lr; writing-mode: vertical-rl; toggle w/

    dir writing-mode: horizontal-tb;
  62. None

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

    vertical-rl;

  64. chenhuijing.com/zh-type

  65. chenhuijing.com/blog/chinese-web-typography

  66. None
  67. None

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

    vertical-rl;
  69. None

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

  71. None

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

  73. 1) text flowing 2) like this writing-mode: vertical-rl;

  74. NOPE! 1) text flowing 2) like this writing-mode: vertical-lr; 1)

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

  75. 2) like this 1) text flowing 1) text flowing 2)

    like this SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

  76. SYSTEMS LIKE MONGOLIAN

  77. SYSTEMS

  78. Block Start Top of Horizontal scripts hello A

  79. 2) like this 1) text flowing 1) text flowing 2)

    like this SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

  80. section { writing-mode: vertical-rl; } (This triggers text-orientation: mixed as

    the default.) Example: Writing Mode 1A
  81. None

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

  83. None

  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

  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

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

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

  88. block direction inline direction writing-mode: sideways-rl; block direction inline direction

    writing-mode: vertical-rl; A ෈

  89. direction block inline direction writing-mode: vertical-lr; block direction inline direction

    writing-mode: sideways-lr; A

  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;

  91. My Cool Website

  92. My Cool Website how?

  93. My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (needed

    to fix punctuation / underlining) text-align: right;

  94. text-orientation

  95. HAN-LIKE SYSTEMS ෈

  96. None

  97. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION
  98. None
  99. None

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

    1A

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

    1A

  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

  103. My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (needed

    to fix punctuation / underlining) text-align: right;

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

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

    } Example: Writing Mode 4B

  106. h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; } Example:

    Writing Mode 4C

  107. h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; transform: rotate(180deg);

    } Example: Writing Mode 4D
  108. None
  109. None

  110. <main> <h1> <span>Made</span> <span>by</span> <span>Few</span> </h1> </main> Example: Writing Mode

    3A

  111. h1 span:nth-child(2) { writing-mode: vertical-rl; text-orientation: upright; font-size: 45%; }

    Example: Writing Mode 3A

  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 3A

  113. SUMMARY

  114. block direction inline direction Acharacter orientation

  115. SYSTEMS LIKE LATIN A

  116. SYSTEMS LIKE ARABIC A

  117. HAN-LIKE SYSTEMS *Chinese, Japanese, Korean & more ෈ ෈

  118. MONGOLIAN-LIKE SYSTEMS

  119. dir writing-mode text-orientation

  120. 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">

  121. 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/ direction writing-mode: horizontal-tb; creates a vertical typographic mode ෈ ෈ A

  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

  123. options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:

    sideways; THREE OPTIONS FOR TEXT-ORIENTATION

  124. Start & End

  125. block inline

  126. block end inline start inline end block start

  127. block end inline start inline end block start

  128. block start inline end inline start block end

  129. end start end start

  130. Logical Properties

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

    float: inline-start;
  132. None

  133. drafts.csswg.org/css-logical

  134. Alignment

  135. w3.org/TR/css-align-3

  136. from CSS Tricks’ Complete Guide to Flexbox

  137. None

  138. Justify vs. Align

  139. block inline

  140. start center end s t r e t c h

    Align

  141. Align

  142. start center end s t r e t c h

    Justify

  143. Justify

  144. cross axis main axis flex-direction: row;

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

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

  147. Grid Justify 1 4 5 2 3 6 8 7

    9 Align writing-mode: horizontal-tb; grid-auto-flow: row;

  148. Grid Justify 1 4 5 2 3 6 8 7

    9 writing-mode: horizontal-tb; grid-auto-flow: column; Align

  149. Align Justify

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