Writing Modes at CSS Day

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
June 16, 2017

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.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

June 16, 2017
Tweet

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