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

Writing Modes at CSS Day

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.

Jen Simmons

June 16, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Writing Modes

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  4. direction / dir
    writing-mode
    text-orientation

    View full-size slide

  5. Display Level 3

    View full-size slide

  6. drafts.csswg.org/css-display

    View full-size slide

  7. div {
    display: block;
    }




    View full-size slide

  8. div {
    display: inline;
    }


    View full-size slide

  9. div {
    display: inline-block;
    }


    View full-size slide

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

    View full-size slide

  11. The outer display type dictates 

    how the box participates in its 

    parent’s formatting context.
    = block
    inline
    run-in

    View full-size slide

  12. The outer display type dictates 

    how the box participates in its 

    parent’s formatting context.
    = block
    inline
    run-in

    View full-size slide

  13. The inner display type defines
    the kind of formatting context

    it generates, dictating how its
    descendant boxes are laid out.
    = flow flex
    flow-root grid
    table ruby

    View full-size slide

  14. 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

    View full-size slide

  15. 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
    layout-specific internal box (a bunch more table & ruby stuff)
    (like table-row-group, table-column, ruby-base-container…)

    View full-size slide

  16. Writing Modes

    View full-size slide

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

    View full-size slide





  18. block
    flow
    direction

    View full-size slide

  19. Acharacter orientation

    View full-size slide

  20. block
    direction
    inline direction
    Acharacter orientation

    View full-size slide

  21. SYSTEMS LIKE LATIN
    block
    direction
    inline direction
    Acharacter
    orientation

    View full-size slide

  22. SYSTEMS LIKE ARABIC
    inline direction
    block
    direction
    Acharacter
    orientation

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  26. English words

    .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا

    View full-size slide

  27. English words in this paragraph.
    .تﺎﻤﻠﻜﻟ Some
    more LTR words, same paragraph.

    View full-size slide

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






    View full-size slide


  29. ...

    Example: Writing Mode 1A

    View full-size slide

  30. unicode-bidi

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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






    View full-size slide

  34. SYSTEMS LIKE MONGOLIAN
    block
    direction
    inline direction

    View full-size slide

  35. SYSTEMS LIKE MONGOLIAN
    block
    direction
    inline direction

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. writing-mode

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. chenhuijing.com/zh-type

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 2) like this
    1) text flowing
    1) text flowing
    2) like this
    SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

    View full-size slide

  50. SYSTEMS LIKE MONGOLIAN

    View full-size slide

  51. Block
    Start
    Top of
    Horizontal
    scripts
    hello
    A

    View full-size slide

  52. 2) like this
    1) text flowing
    1) text flowing
    2) like this
    SYSTEMS LIKE MONGOLIAN HAN-BASED SYSTEMS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 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

    View full-size slide

  56. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. 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;

    View full-size slide

  62. My Cool Website

    View full-size slide

  63. My Cool Website
    how?

    View full-size slide

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

    View full-size slide

  65. text-orientation

    View full-size slide

  66. HAN-LIKE SYSTEMS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide



  76. Made
    by
    Few


    Example: Writing Mode 3A

    View full-size slide

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

    View full-size slide

  78. 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

    View full-size slide

  79. block
    direction
    inline direction
    Acharacter orientation

    View full-size slide

  80. SYSTEMS LIKE LATIN
    A

    View full-size slide

  81. SYSTEMS LIKE ARABIC
    A

    View full-size slide

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


    View full-size slide

  83. MONGOLIAN-LIKE SYSTEMS

    View full-size slide

  84. dir
    writing-mode
    text-orientation

    View full-size slide

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






    View full-size slide

  86. 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

    View full-size slide

  87. 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

    View full-size slide

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

    View full-size slide

  89. block inline

    View full-size slide

  90. block end
    inline
    start
    inline
    end
    block start

    View full-size slide

  91. block end
    inline start
    inline end
    block start

    View full-size slide

  92. block start
    inline end
    inline start
    block end

    View full-size slide

  93. end
    start
    end
    start

    View full-size slide

  94. Logical Properties

    View full-size slide

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

    View full-size slide

  96. drafts.csswg.org/css-logical

    View full-size slide

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

    View full-size slide

  98. from CSS Tricks’ Complete Guide to Flexbox

    View full-size slide

  99. Justify vs. Align

    View full-size slide

  100. block inline

    View full-size slide

  101. start
    center
    end
    s
    t
    r
    e
    t
    c
    h
    Align

    View full-size slide

  102. start center end
    s t r e t c h
    Justify

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  108. Align
    Justify

    View full-size slide

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

    View full-size slide