RCSS VisualEffects

Librocket RCSS references
Syntax and basic data types
Selectors
Box Model
Visual Model
Visual Effects
Colors and backgrounds
Fonts
Text
Cursors, Dragging, and Tabbing
Decorators
Font Effects
Scrollbars and Sliders
Property Index

Overflow and clipping

The contents of a block box may extend beyond the content area of the box itself, for example under the following scenarios:

• The contents of an inline box wider than its containing block box cannot be broken.
• A block box has a width greater than its containing block box.
• A block box has an explicit height set, and its contents exceed that height.

When overflow occurs, the overflow-x’ and ‘overflow-y’ properties dictate how the overflow is handled.

Overflow: the ‘overflow’ property

• overflow-x, overflow-y

Value:	hidden | auto | scroll
Initial:	visible
Applies to:	block-level elements
Inherited:	no
Percentages:	N/A

The values have the following meanings:

• visible
  • Overflowing content is visible along this axis.
• hidden
  • Overflowing content is hidden along this axis.
• auto
  • If overflow occurs along this axis, overflowing content is hidden and a scrollbar is generated and positioned along the axis so the hidden content can be scrolled into view.
• scroll
  • A scrollbar is always visible along the axis, allowing hidden content to be scrolled into view. This will eliminate ‘popping’ if content suddenly overflows and a scrollbar appears.

Note that, unlike CSS, if either of overflow-x or overflow-y is set to a value other that ‘visible’, clipping will occur on both axes.

• overflow

Shorthand for overflow-x overflow-y. If two values are specified, the first will be used to specify overflow-x and the second overflow-y. If one value is specified, if will be used to specify both.

/* Hide horizontal overflowing content and generate a scrollbar (if required) along the vertical axis. */
div#content
{
	overflow: hidden auto;
}

Clipping: the ‘clip’ property

This property is completely different from the CSS clip property. Instead of defining the clipping region of an element, this property defines how the element interacts with the clipping regions of its ancestors.

In RCSS, the clipping region is always the ‘client area’, which is either the content or padded area (depending on the element).

• clip

Value:	none | <number>
Initial:	auto
Applies to:	all elements
Inherited:	no
Percentages:	N/A

The values have the following meanings:

• auto
  • The element is subjected to all the clipping regions put in place by its ancestors.
• none
  • The element is never clipped (except by the context).
• <number>
  • The element is subjected to the clipping regions of its ancestors, except it skips the closest <number> ancestors that could have put in place a clipping region (ie, those ancestors with an overflow-x or overflow-y other than visible).

Visibility: the ‘visibility’ property

• visibility

Value:	hidden
Initial:	visible
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Values have the following meanings:

• visible
  • The generated box is visible.
• hidden
  • The generated box, and all of its descendants, is hidden. Note that the box still has an impact on layout, it is just not rendered.