The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< apis‎ | css-regions‎ | Region
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


Returns a series of Range objects that represent the fragments of DOM content that currently flow into the region.

Method of apis/css-regions/Region


var ranges = region.();

Return Value

Returns an object of type Array

Returns a series of Range objects that represent the fragments of DOM content that currently flow into the region.


Check a region for interruptions in source content:


// get flow
var flow = document.getNamedFlows().namedItem('main');

// get second region that displays content
var region = flow.getRegions()[1];

// how many content fragments display there?
var ranges = region.getRegionFlowRanges();

// perhaps do something to fix layout if content has been interrupted:
if (ranges.length > 1) {
    adjustlayout(region) // custom function


 By default, calling getRegionFlowRanges() on an overflowing region at the end of a chain (one whose regionOverset is overset) returns fragments representing all remaining content that may overflow out of view.  If the region's region-fragment property is set to break, it returns only those fragments of content that fit neatly within the region.

If the region is too small to display the content, it returns a single collapsed range.

Calling it on an empty region (one whose regionOverset is empty) returns an empty list.

Calling it on an element that is no longer a region (when its flow-from property reverts to none) returns null. The following tests whether the block element currently behaves as a region:

isRegion = (element.getRegionFlowRanges() !== null);


Regions may display more than one range, because more than one element may specify flow-into to contribute to a flow, and the boundary between those content elements may fall within a region. Also, any content element's nested elements can be diverted to a different named flow, thus interrupting the original sequence of content. (See flow-into for more details on these scenarios.)

Related specifications

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

See also

Related articles


External resources