Common Visual Property Units

This article describes common values that you can use in layout properties.

Boolean Values

You can represent the true and false values with multiple keywords:

Border Values

When you specify the border of a component, you can use these three border properties:

• Border width. The stroke width to draw the border.
• Border style. The border style pattern to apply.
• Border color. The color of the border. You must specify at least one of these properties to display a border. You can specify the border properties in any order; however, you can specify a property only once. All of these border specifications are correct:

1px solid blue
3px
dashed 4px #f0cccc
#f0cccc 4 dashed
#f0f dotted

Border Rounding

You can define border rounding values to round the corners of a component's outer border edge. You can set a single radius to make circular corners or two radii to make elliptical ones. Radius values use the size value syntax and semantics.

When you specify multiple radii, the first value determines the horizontal rounding, and the second the vertical rounding.

Border Style Values

The engine supports these border style values:

Color Values

The engine accepts several color value types:

• Hexadecimal RGB/RGBA color definitions. You can specify color values with RGB or ARGB codes using a # prefix and 3, 4, 6, or 8 hexadecimal digits.
• The rgb function. Use the rgb function with three arguments representing the red, green, and blue components. Each component can be specified as a value between 0 and 255 or as a percentage value between 0% and 100%. You must use the same value type for all colors (numeric value or percentage); they cannot be mixed.
• The rgba function. Use the rgba function with four arguments. The first three arguments represent the color channels (see the rgb function). The alpha channel can have a percentage value (0% - 100%) or a float number between 0 and 1.
• The hsl function. Describe a color with the hsl function with three arguments representing the Hue angle (units are deg, rad, grad, or turn), the Saturation percentage (0% - 100%), and the Lightness percentage(0% - 100%).
• The hsla function. Describe a color with the hsla function with three arguments representing the H, S, and L values (see hsl) and the alpha channel (a percentage value (0% - 100%) or a float number between 0 and 1).
• Named colors. You can use standard CSS color names (all lowercase letters). See the MDN documentation for more details.

Cursor Values

This type of value sets the mouse cursor, if any, to show when the mouse pointer is over a particular component.

General

Links and Status

Selection

Drag and Drop

Resizing and Scrolling

Zooming

Cursor Examples

Move the mouse over the rectangles in the following example to check what the cursor looks like.

Font Family Values

Font family values are a prioritized list of one or more font family names and/or generic family names. Multiple names should be separated by commas. Font family names containing whitespace should be quoted. These are the generic family names:

Examples:

Helvetica
"Times New Roman"
Bookville, "Times New Roman", serif

Font Weight Values

Font weight values set the font's weight (or boldness); the available values depend on the currently selected font family.

Weight values can be numbers between 1 and 1000. The hundreds (100, 200, 300, ..., 900) are conventionally used. You can use a few identifiers to specify the font weights:

Font Style Values

This property determines whether a font should be styled with a normal, italic, or oblique face from its font family.

Font Stretch Values

This property selects a regular, condensed, or expanded face from a font. Its value can be specified as a percentage value or as one of the following:

Opacity

This property sets an element's opacity. Opacity is the degree to which the content behind an element is hidden, and it is the opposite of transparency.

The property value is a number in the range of 0.0 to 1.0, inclusive, or a percentage in the range of 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

Overflow Values

A component may not fit into the viewport its parent provides. An overflow value specifies the engine's strategy in such a case.

Outline Values

When you specify the outline of a component, you can use these three properties:

• Outline width. The stroke width to draw the outline.
• Outline style. The outline style pattern to apply.
• Outline color. The color of the outline.

You must specify all of these properties to display an outline. You can specify the outline properties in any order; however, you can specify a property only once. All of these outline specifications are correct:

1px solid blue
dashed 4px #f0cccc
#f0cccc 4 dashed

Shadow Values

You can define shadow values with one or more shadow effects. If you use more than one effect, you must separate them with a comma. A shadow effect is composed of these parts:

• Horizontal offset of the effect
• Vertical offset of the effect
• Blur radius
• Spread radius
• Optional color

The first up to four size value segments are followed by the optional color value.

You can use two, three, or four size values.

• If only two values are given, the engine interprets them as the horizontal and vertical offsets.
• If a third value is given, it is interpreted as a blur radius.
• If a fourth value is given, it is interpreted as a spread radius.

When you prefix the shadow value with inset, it changes the shadow from an outer box shadow to an inner box shadow (as if the content is pressed into the box).

Size Values

Size values are composed of a numeric value and an optional unit. Here are a few examples:

12px
0.25rem
50%
0
125mm

UI Engine uses these units with the CSS semantics:

Text Alignment Values

This value sets the horizontal alignment of the inline-rendered content (e.g., text) inside its block-rendered parent.

Text Decoration Values

A text decoration value is composed of these segments:

• color. The color of the decoration
• line. The kind of decoration used
• style. The line style to use

You can use one, two, or three segments when specifying the text decoration. They can be in any order; however, one segment type can be used only once.

These are the available line values:

You can use these style values:

Text Transform Values

This value specifies how to capitalize a component's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Text Wrap Values

This value controls how text inside an element is wrapped.

User Select Values

These values control whether the user can select text.

Zoom Values

The value of the zoom property controls the magnification level of a component: