Digital Publishing
on the Web
CSS Regions, CSS Exclusions and Shapes
Overview
- Publishing: from print to digital
- Platform: open web, HTML & CSS
- Packaging: one idea
Paper Magazines
- Rich design & typography
- Complex layout
- Fixed page dimensions
Going digital
- Devices
- Interactivity
- Personal attachment
The Tools
Print publishing tools
One Device
File size
More devices
- Form-factors
- x 2 orientations
- Platforms
- DPI
Overview
- Publishing: from print to digital
- Platform: open web, HTML & CSS
- Packaging: one idea
HTML & CSS
Advantages
- open format
- widespread support
- adaptive
- web standards
CSS: What's missing
- rich layout
- complex shapes
- overflow control
CSS Regions
article {
/* collect content into a named flow */
flow-into: myFlow;
}
.region {
/* render the content from the named flow */
flow-from: myFlow;
}
Aggregate content
article h1,
article img,
article p:nth-child(1) {
/* collect content into a named flow */
flow-into: preview;
}
.region {
/* render the content from the named flow */
flow-from: preview;
}
Markup Separation
<!-- content: semantic markup -->
<article>
<h1>Title</h1>
<p>...</p>
</article>
<!-- layout: helper markup -->
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
Regions are only
Visual Containers
Regions &
JavaScript
CSS Object Model
var flows = document.getNamedFlows()
var flow = flows['myFlow']
// Get the nodes collected in the named flow
flow.getContent()
// Get the regions that render the content
flow.getRegions()
Does it fit?
var flows = document.getNamedFlows()
var flow = flows['myFlow']
// {Boolean} is there more content than regions?
flow.overset
// Add more regions if necesary
flow.addEventListener('regionlayoutupdate', function(){
if (flow.overset){
// add more regions
}
})
CSS Regions Status
W3C Working Draft - Adobe, Microsoft
CSS Exclusions
Shape Inside
/* wrap the text inside a circle */
#content {
shape-inside: circle(50px, 50px 50px)
}
Shape Outside
#content { /*...*/ }
#exclusion {
shape-outside: circle(50px, 50px 50px)
/* text content goes around both my sides */
wrap-flow: both;
}
Polygon shapes
/* non-rectangular shapes */
#content {
shape-inside: polygon(x1, y1 x2, y2 ... )
}
Shapes from SVG
<svg ...>
<circle id="circle_shape" cx="50%" cy="50%" r="50%" />
</svg>
#content {
shape-inside: url(#circle_shape)
}
CSS Exclusions
and Shapes
W3C Working Draft - Adobe, Microsoft
Overview
- Publishing: from print to digital
- Platform: open web, HTML & CSS
- Packaging: one idea
Placeholder Markup
<!-- content: semantic markup -->
<article>
<h1>Title</h1>
<p>...</p>
</article>
<!-- layout: helper markup -->
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
Web Components
& CSS Regions
Shadow DOM
The <video> element
Component
<head>
<link rel="components" href="magazine-component.html">
</head>
Using it
<article is="magazine">
<h1>Title</h1>
<p>...</p>
</artice>
Web Components
Shadow DOM W3C Working Draft - Google
Intro to Web Components W3C Working Draft - Google
+
Web Components
end
@razvancaliman
CSS Regions
- CSS Regions Proposal to W3C
- Adobe Web Platform blog
- CSS Regions tutorial
- CSS Regions on html.adobe.com
CSS Exclusions and Shapes
- CSS Exclusions and Shapes Proposal to W3C
- CSS Exclusions on html.adobe.com
- Hans Muller's blog
Web Components
- Introduction to Web Components
- Web Components slides by Eric Bidelman
Thank you!
- Reveal.js created by Hakim el Hattab
- Tablet designed by Samuel Q. Green from The Noun Project