Clip Alignment Interactions

Different sizes of regions and clips, the use of registration points, and the setting of a region's fit attribute can create many different outcomes for the placement and scaling of a visual clip. The following sections describe what happens when a region uses a certain fit value and you assign the clip to the region using a registration point that has a certain regAlign value. These layout attributes are described in the following sections:

The Active Area

In the following sections, the term "active area" refers to the part of the region that the clip can appear in based on its registration point alignment. The following figure illustrates this by showing a registration point placed near the upper-right corner of a region. If the clip uses the topRight alignment value, the dotted lines show the active area of the region into which the clip can expand or contract according to the region's fit attribute.

Active Area in a Region

Active Area in a Region

fit="hidden"

When a region uses the default fit="hidden" value, the clip is placed on the registration point according to its regAlign attribute. Any part of the clip that extends past the region is cropped. If an edge of the clip does not extend to the boundary of the active area, the remaining space is filled with the region's background color.

View it now! (requirements for viewing this sample)
Play this sample to view how fit="hidden" interacts with regAlign values.

fit="fill"

The following table explains how a clip scales when the region has a fit="fill" attribute and the clip uses a registration point with a certain regAlign value.

Interaction of fit="fill" with regAlign Attribute Values
Value Action
topLeft Scale the clip's height and width independently so that the clip just touches the bottom and right edges of its active area.
topMid Scale the clip's height and width independently so that the clip just touches the bottom edge of its active area, and the nearest (to the registration point) of the left or right edges of the active area.
topRight Scale the clip's height and width independently so that the clip just touches the bottom and left edges of its active area.
midLeft Scale the clip's height and width independently so that the clip just touches the nearest (to the registration point) of the top or bottom edges of the box, and touches the right edge of its active area.
center Scale the clip's height and width independently so that the content just touches the nearest (to the registration point) of the top or bottom edges of the active area, and touches the nearest (to the registration point) of the left or right edges of its active area.
midRight Scale the clip's height and width independently so that the clip just touches the nearest (to the registration point) of the top or bottom edges of the box, and touches the left edge of its active area.
bottomLeft Scale the clip's height and width independently so that the clip just touches the top and right edges of its active area.
bottomMid Scale the clip's height and width independently so that the clip just touches the top edge of the box, and the nearest (to the registration point) of the left or right edges of its active area.
bottomRight Scale the clip's height and width independently so that the clip just touches the top and left edges of its active area.

View it now! (requirements for viewing this sample)
Play this sample to view how fit="fill" interacts with regAlign values.

fit="meet"

The following table explains how a clip scales when the region has a fit="meet" attribute and the clip uses a registration point with a certain regAlign value

Interaction of fit="meet" with regAlign Attribute Values
Value Action
topLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the right or bottom edge of the active area while none of the clip is cropped.
topMid Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches at least one of the left, right, or bottom edges while none of the clip is cropped.
topRight Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the left or bottom edge of the active area while none of the clip is cropped.
midLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches at least one of the top, right, or bottom edges while none of the clip is cropped.
center Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches at least one of the top, left, right, or bottom edges while none of the clip is cropped.
midRight Scale the clip's height and width while maintaining its aspect ratio so that the content just touches at least one of the top, left, or bottom edges while none of the clip is cropped.
bottomLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top or right edge of the active area while none of the clip is cropped.
bottomMid Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches at least one of the top, left, or right edges while none of the clip is cropped.
bottomRight Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top or left edge of the box while none of the clip is cropped.

View it now! (requirements for viewing this sample)
Play this sample to view how fit="meet" interacts with regAlign values.

fit="slice"

The following table explains how a clip scales when the region has a fit="slice" attribute and the clip uses a registration point with a certain regAlign value.

Interaction of fit="slice" with regAlign Attribute Values
Value Action
topLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the right or bottom edge of the active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped.
topMid Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the left, right, or bottom edge of its active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped. Cropping will occur on up to two sides of the region.
topRight Scale the visual clip's height and width while maintaining its aspect ratio so that the clip just touches the left or bottom edge of the active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped.
midLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top, right, or bottom edge of the active area, whichever requires the most scaling. Any content that extends beyond the bounds of the region is cropped. Cropping will occur on up to two sides of the region.
center Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top, left, right, or bottom edge of the active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped. Cropping will occur on up to three sides of the region.
midRight Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top, left, or bottom edge of the active area, whichever requires the largest scaling. Any part of the clip that extends beyond the bounds of the region is cropped. Cropping will occur on up to two sides of the region.
bottomLeft Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top or right edge of the active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped.
bottomMid Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top, left, or right edge of the active area, whichever requires the most scaling. Any content that extends beyond the bounds of the region is cropped. Cropping will occur on up to two sides of the region.
bottomRight Scale the clip's height and width while maintaining its aspect ratio so that the clip just touches the top or left edge of the active area, whichever requires the most scaling. Any part of the clip that extends beyond the bounds of the region is cropped.

View it now! (requirements for viewing this sample)
Play this sample to view how fit="slice" interacts with regAlign values.

fit="scroll"

When a region uses a fit="scroll" attribute, the clip is placed on the registration point according to the regAlign attribute. If any part of the clip extends outside the active area, scrollbars allow the viewer to scroll the remaining clip area into view. If an edge of the clip does not extend to the boundary of the active area, the remaining space is filled with the region's background color.


RealNetworks, Inc. ©2002 RealNetworks, Inc. All rights reserved.
For more information, visit RealNetworks
Click here if the Table of Contents frame is not visible at the left side of your screen.