Digital Publishing on the Web

View Github Repository Open presentation in a new window

oslego

See all presentation from oslego

Digital Publishing on the Web

1 2

kingsofcode-dec12

Slides for Kings of Code Conference

On Github oslego / kingsofcode-dec12

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

  • One form-factor
  • Two orientations

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

No DOM manipulation (parentNode). No CSS inheritance

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

Read What the Heck is Shadow DOM?

Encapsulation, poratability, event re-parenting

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

html.adobe.com

CSS Regions

CSS Exclusions and Shapes

Web Components

Thank you!