regionlayoutupdate

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

regionlayoutupdate

This page has been flagged with the following issues:

High-level issues:

• Needs Review

W3C Editor's Draft

Summary

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

Overview Table

Synchronous	TBD
Bubbles	TBD
Target	dom/Element
Cancelable	TBD
Default action	TBD

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

Examples

JavaScript

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

// dispatches functions to add/delete regions based on changes to how
// content flows through a region chain:

function modifyFlow(e) {
    var flow = e.target;
    if (flow.overset) {
      	appendRegion(flow.name); // custom function
    }
    else if (flow.firstEmptyRegionIndex !== -1)	{
        trimRegions(flow.name); // custom function
    }
}

Notes

The event may fire under either of the following scenarios:

• Less frequently, when content flows in to fill a new region, flows out to leave one empty, or exceeds the last available region's dimensions. That is, when any region's regionOverset state changes.

• More frequently, when content shifts in any way within the region chain, such as when linebreaks change. That is, when any region's collection of DOM Range fragments changes their dimensions or offsets.

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

See also

Related articles

Regions

• CSS Regions API

• CSSRegionStyleRule

• NamedFlow

• firstEmptyRegionIndex

• getContent

• getRegions

• getRegionsByContent

• name

• overset

• regionlayoutupdate

• Region

• getComputedRegionStyle

• getRegionFlowRanges

• regionOverset

• @region

• break-after

• break-before

• break-inside

• flow-from

• flow-into

• region-fragment

• getNamedFlows()

• Using CSS Regions to flow content through a layout

External resources

• W3C editor's draft: CSS Regions Module Level 3
• Adobe Web Standards: CSS Regions
• Adobe Developer's Network: CSS3 Regions: Rich page layout with HTML and CSS3
• Sample pages