CSS level support in HTMEngine should be considered as 'essential'. We have no intention to cover full CSS1/CSS2 attibute map. HTMLayout is embeddable lightweight HTML renderer and layout manager. Dot.

Features specific to HTMLayout:

Cascading: HTMLayout supports all CSS1 Basic concepts and Cascading orders. HTMLayout also supports CSS 2.1  Attribute selectors.

Font and pragraph properties font
specifies up to six of the following space-delimited property values. Alternatively, sets or retrieves the six listed text fonts.
font-family
specifies one of the following values.
family-name Any of the available font families installed in the system. For example, Times, Helvetica, Zapf-Chancery, Western, or Courier.
generic-name Any of the following font families: serif, sans-serif, cursive, fantasy, or monospace.
font-size
specifies one of the following values.
absolute-size Set of keywords that indicate predefined font sizes. Named font sizes scale according to the user's font setting preferences. Possible values include the following: xx-small, x-small, small, medium, large, x-large, xx-large.
relative-size Set of keywords that are interpreted as relative to the font size of the parent object. Possible values include the following: larger, smaller.
length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see the CSS Length Units Reference.
percentage Integer, followed by a percent (%). The value is a percentage of the parent object's font size. In Internet Explorer 3.0, the value is calculated as a percentage of the default font size.
font-style
specifies one of the following values.
normal Default. Font is normal.
italic Font is italic.
oblique Font is italic.
font-variant
specifies one of the following values.
normal Default. Font is normal.
small-caps Font is in small capital letters.
font-weight
specifies one of the following values.
normal Default. Font is normal.
bold Font is bold.
bolder Font is heavier than regular bold.
lighter Font is lighter than normal.
100 Font is at least as light as the 200 weight.
200 Font is at least as bold as the 100 weight and at least as light as the 300 weight.
300 Font is at least as bold as the 200 weight and at least as light as the 400 weight.
400 Font is normal.
500 Font is at least as bold as the 400 weight and at least as light as the 600 weight.
600 Font is at least as bold as the 500 weight and at least as light as the 700 weight.
700 Font is bold.
800 Font is at least as bold as the 700 weight and at least as light as the 900 weight.
900 Font is at least as bold as the 800 weight.
letter-spacing N/A
line-height
specifies one of the following values.
normal Default. Default height.
height Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
text-align
specifies one of the following values:
left Default. Text is aligned to the left.
right Text is aligned to the right.
center Text is centered.
justify Text is justified.
text-decoration
specifies one of the following values.
none Default. Text has no decoration.
underline Text is underlined.
overline Text has a line over it.
line-through Text has a line drawn through it.
blink Not implemented.
text-indent
indentation of the first line of text in the object.
length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). This value is a percentage of the width of the parent object.
text-overflow
specifies a value that indicates whether ellipses(...) display when text content has overflowed its given layout area.
ellipsis Display ellipses(...) for text overflow.
clip Default. Simply clip the content and do not display ellipses for text overflow.
Planned but not in the first release.
vertical-align
specifies one of the following values.
baseline Default. Aligns the contents of an object supporting VALIGN to the base line.
sub Vertically aligns the text to subscript.
super Vertically aligns the text to superscript.
top Vertically aligns the contents of an object supporting VALIGN to the top of the object.
middle Vertically aligns the contents of an object supporting VALIGN to the middle of the object.
bottom Vertically aligns the contents of an object supporting VALIGN to the bottom of the object.
text-top Vertically aligns the text of an object supporting VALIGN to the top of the object.
text-bottom Vertically aligns the text of an object supporting VALIGN to the bottom of the object.
white-space
specifies one of the following values.
normal Default. Lines of text break automatically. Content wraps to the next line if it exceeds the width of the object.
nowrap Line breaks are suppressed. Content does not wrap to the next line.
pre Line breaks and other whitespace are preserved.
Color and background properties
 
 
 
background
specifies up to five of the following space-delimited values, in any order.
background-attachment
specifies one of the following values.
scroll Default. Background image scrolls with the object as the document is scrolled.
fixed Background image stays fixed within the viewable area of the object.
background-color
specifies one of the following values.
transparent Default. Color of the next parent object through which the background is visible.
color Any color value, including those specified in the Color Table.
color-left-top,
color-right-top,
color-right-bottom,
color-left-bottom
Gradient fill. Four corner colors for gradient background fill. Non standard. HTMLayout specific.
background-image
specifies one of the following values.
none Default. Color of the next parent through which the background is visible.
url(sUrl) Location of the background image, where sUrl is an absolute or relative URL.
background-position
specifies one or two of the following values.
length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
top, center, bottom
Vertical alignment value. Possible values include the following:
top Vertical alignment is at the top.
center Vertical alignment is centered.
bottom Vertical alignment is at the bottom.
left, center, right
Horizontal alignment value. Possible values include the following:
left Horizontal alignment is to the left.
center Horizontal alignment is centered.
right Horizontal alignment is to the right.
left-side-length,
top-side-length,
right-side-length,
bottm-side-length
Expandable filling image margins.
See Expandable tiling section in HtmLayout documentation.
To use extended fill background background-repeat attribute should be equal to 'expand'. Non standard. HTMLayout specific.
 
.style1 { background-position:top center }
.style2 { background-position:0 0 }
background-repeat
specifies one of the following values.
repeat Default. Image is repeated horizontally and vertically.
no-repeat Image is not repeated.
repeat-x Image is repeated horizontally.
repeat-y Image is repeated vertically.
expand Expandable filling mode.
stretch Image is stretched to fill background in full. This is the same mode as rendering of image in <IMG> element.
color Sets the color of the text of the object.
foreground image  properties.

Foreground image is HTMLayout specific feature.

Foreground image has the same set of attributes as background.

Sequence of drawing of block in HTMLayout:

1. background
2. borders
3. content
4. outline
5. foreground

 
 
foreground
specifies up to four of the following space-delimited values, in any order.
<foreground-image url> || <foreground-repeat> || <foreground-attachment> || <foreground-position>
foreground-attachment
specifies one of the following values.
scroll Default. Foreground image scrolls with the object as the document is scrolled.
fixed Foreground image stays fixed within the viewable area of the object.
foreground-image
specifies one of the following values.
none Default. Color of the next parent through which the background is visible.
url(sUrl) Location of the background image, where sUrl is an absolute or relative URL.
foreground-position
specifies following values.
length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
top, center, bottom
Vertical alignment value. Possible values include the following:
top Vertical alignment is at the top.
center Vertical alignment is centered.
bottom Vertical alignment is at the bottom.
left, center, right
Horizontal alignment value. Possible values include the following:
left Horizontal alignment is to the left.
center Horizontal alignment is centered.
right Horizontal alignment is to the right.
left-side-length,
top-side-length,
right-side-length,
bottm-side-length
Expandable filling image margins.
See Expandable tiling section in HtmLayout documentation.
To use extended fill background background-repeat attribute should be equal to 'expand'. Non standard. HTMLayout specific.
 
.style1 { background-position:top center }
.style2 { background-position:0 0 }
foreground-repeat
specifies one of the following values.
repeat Default. Image is repeated horizontally and vertically.
no-repeat Image is not repeated.
repeat-x Image is repeated horizontally.
repeat-y Image is repeated vertically.
expand Expandable filling mode.
stretch Image is stretched to fill background in full. This is the same mode as rendering of image in <IMG> element.
Layout properties border
specifies one or more of the following space-delimited values: width, style, color.
border-bottom
specifies one or more of the following space-delimited values: width, style, color.
border-bottom-color specifies one of the color names or RGB values in the Color Table.
border-bottom-style
specifies one of the following values.
none Default. Border is not drawn, regardless of any border width.
dotted Border is a dotted line.
dashed Border is a dashed line.
solid Border is a solid line.
double Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the borderWidth value. The border width must be at least 3 pixels wide to draw a double border.
groove 3-D groove is drawn in colors based on the value.
ridge 3-D ridge is drawn in colors based on the value.
inset 3-D inset is drawn in colors based on the value.
outset 3-D outset is drawn in colors based on the value.
border-bottom-width
specifies one of the following values.
medium Default.  
thin Less than the default width.
thick Greater than the default width.
width Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
%% units Percents from free space.
border-collapse* as per CSS
border-color as per CSS
border-left as per CSS
border-left-color as per CSS
border-left-style as per CSS
border-left-width as per CSS
border-right as per CSS
border-right-color as per CSS
border-right-style as per CSS
border-right-width as per CSS
border-style as per CSS
border-top as per CSS
border-top-color as per CSS
border-top-style as per CSS
border-top-width as per CSS
border-width as per CSS
clear as per CSS
float
specifies one of the following values.
none Default. Object displays where it appears in the text.
left Text flows to the right of the object.
right Text flows to the left of the object.
margin
specifies up to four of the following space-delimited values.
margin-bottom
specifies one of the following values.
auto Default. Bottom margin is set equal to the top margin.
height Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
%% units Percents from free space.
margin-left --"--
margin-right --"--
margin-top --"--
padding
Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.
specifies one of the following values.
length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a %. The value is a percentage of the width of the parent object.
%% units Percents from free space.
padding-bottom --"--
padding-left --"--
padding-right --"--
padding-top --"--
Classification properties
 
list-style
specifies up to three of the following values, in any order: type, position, image.
list-style-image
specifies one of the following values.
none Default. No image is specified.
url(sURL) Location of the image, where sURL is an absolute or relative URL.
list-style-position
specifies one of the following values.
outside Default. Marker is placed outside the text, and any wrapping text is not aligned under the marker.
inside Marker is placed inside the text, and any wrapping text is aligned under the marker.
list-style-type
specifies one of the following values.
disc Default. Solid circles.
circle Outlined circles.
square Solid squares.
decimal 1, 2, 3, 4, and so on.
lower-roman i, ii, iii, iv, and so on.
upper-roman I, II, III, IV, and so on.
lower-alpha a, b, c, d, and so on.
upper-alpha A, B, C, D, and so on.
none No marker is shown.
Positioning properties
 
height
Value that specifies one of the following values.
auto Default.  
height Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed.
%% units Percents from free space.
overflow
specifies one of the following values.
visible Default. Content is not clipped and scroll bars are not added.
scroll Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
hidden Content that exceeds the dimensions of the object is not shown.
auto Content is clipped and scrolling is added only when necessary.
width
specifies one of the following values.
auto Default. Default width of the object.
width Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
%% units Percents from free space.
min-height
specifies the minimum height for an element.
length Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer followed by a % that specifies a percentage of the containing block height to use as the minimum height of the element. If the height of the containing block is not explicitly set, then the element has no minimum height and the property is interpreted as 0%. For more information on containing blocks and how its height is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification.
min-width
specifies the minimum width for an element.
length Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage
Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
For more information on containing blocks and how its width is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification.
auto
min-width is equal to minimum intrinsic width of the element.
In HTMLayout all elements are getting this value by default to mimic Internet Explorer behavior. Non standard.  
Discussing with David Baron use of 'intrinsic' keyword for that in CSS level 3.
Personally I don't want to introduce new entities so it is 'auto' for a while.
max-height
specifies the maximum height for an element.
length Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, seeCSS Length Units Reference.
percentage Integer followed by a % that specifies a percentage of the containing block height to use as the maximum height of the element. If the height of the containing block is not explicitly set, then the element has no maximum height and the property is interpreted as 0%. For more information on containing blocks and how its height is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification.
max-width
specifies the maximum width for an element.
length Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage
Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
For more information on containing blocks and how its width is computed, see the Cascading Style Sheets, Level 2 (CSS2) specification.
auto
max-width is equal to maximum intrinsic width of the element.
In HTMLayout <TABLE> element has this value by default. This allow to model table dimensions when no width attribute set.
Non standard.
Example, table looks like as max-width:auto set:
This table has no width set.
flow
Flow direction of child elements in block containers (DIVs).
vertical Default value. All child elements in block element placed from top to bottom. Standard behavior of DIV in HTML
horizontal All child blocks placed from left to right.  
In both flow modes CSS overlapping rules are applicable. See: CSS 2.1 8.3.1 Collapsing margins rules explanation.
Outline

Outlines similar to borders but differ from them in the following ways:

1. Outlines do not take up space.
2. All sides of outline rectangle has equal property values.

 

outline
shortcut attribute, accepts up to four values:
[ <'outline-color'> || <'outline-style'> || [<'outline-width'> [ <'outline-offset'> ] ]
outline-width
Width of outline:
medium Default.  
thin Less than the default width.
thick Greater than the default width.
width Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
outline-style
specifies one of the following values.
none Default. Border is not drawn, regardless of any border width.
dotted outline is a dotted line.
dashed outline is a dashed line.
solid outline is a solid line.
outline-color color of the outline.
outline-offset Length units, offset of outline. Positive values - offset outwards, negative values - offset inwards. CSS3 attribute.
Pseudo-classes and other properties
 
cursor auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress values.
display As per CSS.
:active As per CSS2. Any CSS class in HTMLayout can have these pseudo-classes.
:hover
:visited
As per CSS2. Any CSS class can have these pseudo-classes.
Any element in HTMLayout can have href attribute and corresponding 'visited' flag. Hosting application can set/reset this flag to make :visited style in effect. :link class will be selected for any element which has href attribute set to any non-empty string value. Such elements will generate mouse-enter, mouse-leave and click notifications. The two states are mutually exclusive.
:link
:focus Matches element in focus state. Any element which has tabindex defined is "focusable". <a>'s and <input>/<widget> are focusable by default.
direction
specifies one of the following values.
ltr Default. Content flows left to right.
rtl Content flows right to left.
inherit Content flow is inherited.
Not in the first release.

date of last update: Sep, 25, 2005.