RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/apis/css-regions/NamedFlow below:

NamedFlow · WebPlatform Docs

NamedFlow 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

firstEmptyRegionIndex: Returns the integer index of the first empty element within a region chain. Returns -1 if the content fits within the region chain, if it exceeds available space or if there are no regions in the region chain.
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 chain in which to flow content exists.

Methods

getContent: Returns a static collection of nodes representing the flow’s source content.
getRegions: Returns the static sequence of regions into which content flows.
getRegionsByContent: Returns the static sequence of regions that contain at least part of the supplied target content element.

Events

regionfragmentchange: Fires on the ****NamedFlow**** object when there is a change in how content flows through a region chain.
regionoversetchange: Fires on the ****NamedFlow**** object when a change in how its content flows through a region chain renders any region empty or overset (overfilled), or that reverses that state.

Examples

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

document.getNamedFlows().namedItem('main').addEventListener(
    'regionoversetchange', modifyFlow
);
document.getNamedFlows().namedItem('figures').addEventListener(
    'regionoversetchange', modifyFlow
);

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

Check if the opening paragraph splits across layout elements:


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


var elements = flow.getContent();


var firstPara = elements[0].querySelector('p:first-of-type');


var regions = flow.getRegionsByContent(firstPara);



if (regions.length > 1) {
    adjustLayout(regions[0], firstPara); 
}

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

CSS Regions Module Level 1: W3C Working Draft