This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

getRegionFlowRanges()

Summary

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

Method of apis/css-regions/Regionapis/css-regions/Region

Syntax

var ranges = region.getRegionFlowRanges();

Return Value

Returns an object of type ArrayArray

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

Examples

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
}

Usage

 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);

Notes

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

CSS Regions Module Level 1
W3C Working Draft

See also

Related articles

Regions

External resources