Digital Publishing
on the Web

CSS Regions, CSS Exclusions and Shapes

Razvan Caliman / @razvancaliman

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

Tablet computer illustration Tablet computer illustration

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

illustration of content flowing from one region to another

illustration of complex layout with regions

illustration of flows and 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


Webkit browser logo Chrome browser logo Internet Explorer browser logo

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

Webkit nightly browser logo Chrome Canary browser logo

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

Read What the Heck is Shadow DOM?

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

Webkit browser logo Chrome Canary browser logo
illustration of complex layout with regions

+

Web Components

end

@razvancaliman

html.adobe.com

CSS Regions

CSS Exclusions and Shapes

Web Components

Thank you!