@media paged { html { height: 100%; overflow-style: paged-x; padding: 5%; height: 100%; box-sizing: border-box; } }
display: inline-block
display: table-cell
@media paged { html { height: 100%; overflow-style: paged-x; padding: 5%; height: 100%; box-sizing: border-box; } }
@media paged
Indicate what needs to be split over pages.
overflow-style: paged-x | paged-x-controls
Indicates paging of content with or without paging controls.
break-before
, break-after
and break-inside
for controlling page breaks.h1, h2 { break-after: avoid; }
onpagechange
- Page change eventcurrentPage
- current page you are on. Updating this triggers onpagechange
.pageCount
- total number of pagesLabs Build
More info: people.opera.com/howcome/2011/reader/
body { column-width: 12em; }
break-before
, break-after
, break-inside
for controlling breaks within columns.column-span: all
to span columns.
column-fill: auto | balance
defaults to balance
to balance all columns.
column-fill: balance
column-fill: auto
11.1+2+4+3.1+10+
article.news { flow-into: article_flow; } #main, #sub-topic, #news { flow-from: article_flow; }
article_flow
is a named flow.
Selectors using flow-from
need to be block containers.
They also establish new block formatting contexts and stacking contexts.
@region #main { #article { color: #0C3D5F; } }
Only limited properties can be set with this.
getNamedFlow
regionLayoutUpdate
getNamedFlow
overflow
: read-only boolean indicating if all content fitted into available regions.contentNodes
: NodeList of nodes that are part of flow.getRegionsByContentNode(node)
: return all regions that node is part of flow.regionLayoutUpdate
Event triggered when there is an update to the named flow.
15+6+10+
wrap-flow
declared on it not set to auto.wrap-flow: left | right | maximum | both | clear | auto
wrap-flow: auto
wrap-flow: right
wrap-flow: both
wrap-flow: maximum
wrap-flow: clear
wrap-margin
: offset inline-content outside of the exclusion element.
wrap-padding
: offset inline content inside of the exclusion element.wrap-margin / wrap-padding
shape-outside: circle(50%, 50%, 50%);
shape-outside
determines wrapping for inline content outside of the exclusion element.
shape-inside: url(#path-shape);
Determines wrapping for inline content inside of the exclusion element
#grid { display: grid; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto }
#title { grid-column: 1; grid-row: 1 } #score { grid-column: 1; grid-row: 3 }
grid-template: "ta" "sa" "bb" "cc";
Each new string is a row and each character in the string is a column.
#title { grid-cell: "t" } #score { grid-cell: "s" }
grid-row-span: 2; grid-column-span: 2;
10+
The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. - hacks.mozilla.org
body { display: flexbox; flex-pack: center; flex-align: center; width: 100%;height : 100%; }
Flexbox item is one that is a block level child of the body
*.
overflow-style: paged-x | paged-x-controls
column-width:<value>
or column-count:<value>
on block/inline-block/table-cell elementsflow-from:<namedflow>
on block elementswrap-flow:<not auto>
on block elementsdisplay: flexbox | inline-flexbox
GCPM | Multicol | Regions | Exclusions | Grid | Flexbox | |
---|---|---|---|---|---|---|
GCPM | ✔ | |||||
Multicol | ✔ | ✔ | ✔ | ✔ | ||
Regions | ✔ | ✔ | ✔ | |||
Exclusions | ✔ | ✔ | ✔ | |||
Grid | ✔ | |||||
Flexbox | ✔ |