getRegionFlowRanges

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

getRegionFlowRanges()

This page has been flagged with the following issues:

High-level issues:


W3C Editor's Draft

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/Region

Syntax

var ranges = region.getRegionFlowRanges();


Return Value

Returns an object of type function.

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:

JavaScript

// 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

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
















  • getRegionFlowRanges()


















External resources