NamedFlow

This page has been flagged with the following issues:

High-level issues:

Needs Review

W3C Editor's Draft

Summary

Represents content to flow among various block region elements. The NamedFlow interface allows access to both the content of the flow and the series of regions in which it displays, and helps determine if the content exceeds or falls short of the number of regions necessary to display it.

Properties

API Name	Summary
firstEmptyRegionIndex	Returns the integer index of the first empty element within a region chain. Returns -1 if the content fits within the region chain or if it exceeds available space.
name	Name of flow, as specified by any element's flow-from or flow-into properties.
overset	Indicates whether a flow's content exceeds available space within a region chain, or if no available region chain in which to flow content exists.

Methods

API Name	Summary
getContent	Returns a collection of nodes representing the flow's source content.
getRegions	Returns the series of regions into which content flows.
getRegionsByContent	Returns the series of regions that contain at least part of the supplied target content element.

Events

API Name	Summary
regionlayoutupdate	Fires on the NamedFlow object when there is a change in how content flows through a region chain.

Examples

Generic event handler dispatches functions to add or delete regions based on changes to how content flows through a region chain:

JavaScript

document.getNamedFlows()['main'].addEventListener('regionlayoutupdate', modifyFlow);
document.getNamedFlows()['figures'].addEventListener('regionlayoutupdate', modifyFlow);

function modifyFlow(e) {
    var flow = e.target;
    // does content exceed available regions?
    if (flow.overset) {
      	appendRegion(flow.name); // custom function
    }
    // ...or does insufficient content leave some regions empty?
    else if (flow.firstEmptyRegionIndex !== -1)	{
        trimRegions(flow.name); // custom function
    }
}

Check if the opening paragraph splits across layout elements:

JavaScript

// get flow
var flow = document.webkitGetNamedFlows()['main'];

// get all top-level flow-into elements that contribute to flow:
var elements = flow.getContent();

// get first element's first paragraph...
var firstPara = elements[0].querySelector('p:first-of-type');

// ...and the regions in which it appears:
var regions = flow.getRegionsByContent(firstPara);

// If the element splits across two regions, do	something to modify
// the layout or the content:
if (regions.length > 1) {
    adjustLayout(regions[0], firstPara); // custom function
}

Usage

Specifying an identifier for any element's flow-into CSS property diverts its content to a NamedFlow object, whose name corresponds to the property's value. Other elements that specify the same identifier as their flow-from property serve as a chain of regions that dynamically display the content. (The NamedFlow object is still available with NULL content if those properties are later removed.)

Use the getNamedFlows() method to gather named flows from a document.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.

Related specifications

Specification	Status	Related Changes
CSS Regions Module Level 3	W3C Editor's Draft

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	20 -webkit	Unsupported	Unsupported	Unsupported	534 -webkit

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported

Search

NamedFlow

How to Use

NamedFlow

Summary

Properties

Methods

Events

Examples

Usage

Related specifications

Compatibility

Desktop

Mobile

See also

Related articles

Regions

External resources