Multicol and Fragmentation

Slide 1

Multicol and fragmentation Rachel Andrew, Developer Content Lead, Chrome.

Slide 2

CSS multiple-column layout

Slide 3

Flexbox and grid  Create a new formatting context for their direct children.  These children then participate in flex or grid layout.  Strings that are direct children of the flex or grid container get wrapped in an anonymous element, so they behave like other elements in layout.

Slide 4

Multicol  The direct children don’t do anything special.  The children continue to participate in block and inline layout.  They are fragmented into columns.

Slide 5

Fragmentation

Slide 6

Slide 7

Most of these are fragmentation tests

Slide 8

Fragmentation

Slide 9

Controlling breaks  break-before  break-after  break-inside  orphans  widows  box-decoration-break

Slide 10

Slide 11

Slide 12

.target { break-inside: avoid; }

Slide 13

Slide 14

.target { box-decoration-break: clone; }

Slide 15

Slide 16

https://webstatus.dev/stats

Slide 17

Slide 18

RenderingNG

Slide 19

Avoiding breaks before and after  break-before: avoid  break-after: avoid

Slide 20

CSS for print

Slide 21

Print and PDFs from the web

Slide 22

Paged Media  Paged Media Level 3: https://www.w3.org/TR/css-page-3/  Generated Content for Paged Media: https://drafts.csswg.org/css-gcpm/

Slide 23

Add content to page headers and footers

Slide 24

@page size descriptor @page { Define he size of the page you are printing to, and the size of the margins around the content. size: 8.5in 7in; }

Slide 25

Slide 26

@page margin at-rules  @top-left-corner  @right-top  @top-left  @right-middle  @top-center  @right-bottom  @top-right  @bottom-left-corner  @top-right-corner  @bottom-left  @left-top  @bottom-center  @left-middle  @bottom-right  @left-bottom  @bottom-right-corner

Slide 27

@page :right { @bottom-left { content: “My book”; font-size: 9pt; color: #333; } }

Slide 28

@page :right { @bottom-right { content: counter(page); } } @page :left { @bottom-left { content: counter(page); } }

Slide 29

Print things that browsers don’t do These things are all in the spec.

Slide 30

Set strings h1 { string-set: doctitle content(); } Add content from the HTML document to the page margin. @page :right { @top-right { For example, store the content of an <h1> element then output it. The content is updated if a new <h1> is encountered. content: string(doctitle); margin: 30pt 0 10pt 0; font-size: 8pt; } }

Slide 31

Cross-references Cross-references in print are indicated with the page number where the content is found.

Slide 32

Footnotes <style> .fn { When printed, footnotes are shown in the margin at the foot of the page on which they appear. float: footnote; } </style> They use a new value of float. <p>This is some text <span class=”fn”>this is a footnote</span>.</p>

Slide 33

Chrome bugs for these features  Set strings (20 +1s): https://crbug.com/376420244  Cross-references (33 +1s): https://crbug.com/40529223  Footnotes (13 +1s): http://crbug.com/376428674

Slide 34

We’ve become trained in what the web can’t do

Slide 35

text-wrap: balance h1 { text-wrap: balance; }

Slide 36

sIFR

Slide 37

Variable fonts

Slide 38

Slide 39

Are you pre or post responsive design?  The concept of responsive design is now 15 years old.  Bootstrap was launched in 2011.

Slide 40

By David Lark - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=42413988 Badgers, Mr. Weebl “The Holy Grail” on Wikipedia. https://en.wikipedia.org/wiki/Badgers_(animation)

Slide 41

CSS for developer experience A lot of new CSS gives us better ways to do the things we can already do

Slide 42

The web just doesn’t work like that

Slide 43

Creating rows in multicol Multiple-column Layout Level 2

Slide 44

Overflow columns in multicol .columns { column-count: 3; height: 100px; row-gap: 2em; }

Slide 45

Multicol Level 2

Slide 46

The column-height property .columns { column-count: 3; column-height: 100px; row-rule: 2px solid grey; row-gap: 2em; }

Slide 47

The column-wrap property .columns { column-count: 3; column-height: 100px; column-wrap: nowrap; row-rule: 2px solid grey; row-gap: 2em; }

Slide 48

height column-height

Slide 49

Slide 50

Gap decorations

Slide 51

Gap decorations: row-rule .columns { column-count: 3; column-height: 100px; column-wrap: wrap; row-rule: 2px solid grey; row-gap: 2em; }

Slide 52

Gap decorations with grid .grid-with-spans { display: grid; grid-template: repeat(4, 100px) / repeat(4, 100px); gap: 20px; row-rule: 6px solid red; column-rule: 6px solid blue; }

Slide 53

Gap decorations with grid .break-none-grid { display: grid; grid-template: repeat(4, 100px) / repeat(4, 100px); gap: 20px; row-rule: 6px solid red; column-rule: 6px solid blue; rule-break: none; rule-outset: 0px; }