CSS level support in h-smile core should be considered as 'essential'. We have no intention to cover full CSS1/CSS2 attibute map.

Features specific to HTMLayout:

Cascading: HTMLayout supports all CSS1 Basic concepts and Cascading orders. HTMLayout also supports CSS 2.1 attribute selectors and some essential selectors from CSS3 selector module.

Custom CSS attributes

h-smile core supports custom CSS attributes. All attributes with names starting with '-' are considered as custom attributes. Custom attributes are not inhereted from parent to child. Example of custom attribute declaration:

p { border: 1px solid red; -custom: "value";   }

After such declaration all <p> elements will have style attribute -custom equals to "value".

Value of custom attribute can be either:

Host application can use custom attributes for any purpose, engine does not interpret such attributes internally.

Standard CSS attributes

List of CSS attributes supported by h-smile core:

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.
 
In h-smile core engine the font also supports names of following system fonts:
  • system - default system UI font used for input elements;
  • system-menu - system menu font;
  • system-caption - window caption font;
  • system-status - statusbar and tooltip system font.
Note: To be in effect these font names can be used only in the font attribute - in font-family such names are ignored. Rationale of this is simple, declaration font:system-menu; for example is a shortcut of four attributes of the font - font-family, font-size, font-weight and font-variant.
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.
text-transform
trivial text transformations. Accepts values:
none | uppercase | lowercase | capitalize
default value: none.
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  
nowrap Line breaks are suppressed. Content does not wrap to the next line.
pre Line breaks and other whitespace are preserved.
prewrap Line breaks and other whitespace are preserved. Content may wrap to the next line if needed. This is the same mode <textarea> uses when it has wrap="on" attribute defined. Non-standard.
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-position-left
background-position-right
background-position-top
background-position-bottom		 Used in expand, stretch and no-repeat modes.  
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 [keep-ratio] Image is stretched to fill background in full. This is the same mode as rendering of image in <IMG> element. If stretch is combined with keep-ratio then images is resized with preservation of aspect ratio. To position such an image use background-position attribute.
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-position-left
foreground-position-right
foreground-position-top
foreground-position-bottom		 Used in expand, stretch and no-repeat modes. See css-images-plus for more details.
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 [keep-ratio] Image is stretched to fill background in full. This is the same mode as rendering of image in <IMG> element. If stretch is combined with keep-ratio then images is resized with preservation of aspect ratio. To position such an image use foreground-position attribute.
See css-images-plus for more details.
foreground-image-cursor
Used when foreground-repeat has no-repeat value to define when mouse hovers foreground-image area.
Values: 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 or url of .cur or .ani file.
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.
tree-line Draws tree lines
none No marker is shown.
list-marker-color Sets the color of the list marker (bullet, number or tree line)
list-marker-size Sets size of font used for drawing bullets and numbers. For list-style-type:tree-line this attribute defines width of tree line.
list-marker-style
For list-style-type:tree-line this attribute defines style of the tree line:
none Default. Line is not drawn, regardless of any border width.
dotted Dotted line.
dashed Dashed line.
solid Border is a solid line.
Positioning and dimensional properties
 
 position static | relative | absolute | fixed
As per CSS2 recommendation.
left
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.
right
top
bottom
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.
z-index As per CSS2.
overflow
specifies one of the following values. Shortcut attribute of overflow-x and overflow-y
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. Content is not scrollable by UI.
auto Content is clipped and scrolling is added only when necessary.
hidden-scroll The scrollbar is not shown but content the element is scrollable.
overflow-x
overflow-y
Shortcut attribute of overflow-x and overflow-y, 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.
hidden-scroll The scrollbar is not shown but content the element is scrollable.
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, 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.
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 a single row.
h-flow Multiple rows. All child blocks placed from left to right. Overflowed blocks wrapped on the next row. height:100%% for blocks in this layout means height of the row.
v-flow Multiple columns. All child blocks placed from top to bottom. Overflowed blocks wrapped on the next column. width:100%% for blocks in this layout correspond to the width of the column.
In all flow modes CSS overlapping rules are applicable. See: CSS 2.1 8.3.1 Collapsing margins rules explanation. E.g. in horizontal flow left and right margins of the blocks collapse.
hit-margin specifies up to four of the following space-delimited values. Notation is the same as for the margin attribute. hit-margin defines "hover area" of the element. Positive values increase hover area and negative values decrease it. Hit margins are calculated from border box of the element.
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 or url of .cur or .ani file.
display As per CSS1.
visibility
visible Default. element is visible and takes space;
hidden element takes space but is invisible;
collapse element takes no space and is invisible;

ATTN: meaning of collapse is extended to support of not only rows in tables as per standard CSS but it is applicable for all other elements. visibility: collapse is an equivalent of display:none but collapsed elements participate in computation of intrinsic widths of containers thus dynamic change of visibility:visible to visibility:collapse will not change computed width of container element.

Changing of visibility:visible/collapse is recommended for dynamic hide/show effects. It is easy to hide element by setting display:none to reenable its appearance is difficult - there many display values to choose from: block, inline-block, list-item, etc.
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.
transition
none | blend | slide | image
Defines transition effect of changing of element state. For example:

.mybutton:hover { color: red; transition:blend }

will render transition by gradually blending (mixing) original state and hover state.
Currently transition supported only for block and inline-block elements and tables.
Paged media (printing)

 

 page-break-before
Value that specifies one of the following values:
auto - default.
always - always insert page break before this element.
percentage - integer followed by a percent sign (%). Conditional page break. The value is a percentage of the height of the page. Engine will insert page break only if position of the element on the page is greater than this value.
page-break-after
Value that specifies one of the following values:
auto - default.
always - always insert page break after this element.
percentage - integer followed by a percent sign (%). Conditional page break. The value is a percentage of the height of the page. Engine will insert page break after this element only if bottom position of the element on the page is greater than this value.
Behavioral  attributes behavior
list of whitespace delimeted nmtokens - names of behaviors applied to this element.
List may contain '~' symbol in front or at the end of the list:
  • behavior: ~ new-behavior; will update list of behaviors defined before for the element, and
  • behavior: new-behavior ~; will insert new-behavior in front of behaviors defined before for the element.

Behavior is the name of builtin or application defined class of behavior. List of standard (builtin) behaviors is here.
prototype Only in the Sciter. Name of the class in the script - prototype scripting object (a.k.a. class) of this element. Such an object can define methods, properties and event handling methods of the whole class of elements this style is applied to.
Other attributes content
"some string". Allows to redefine textual content of the element in style. In h-smile content is can be applied to the element itself.
This allow to define different captions of some element by CSS using for example some attribute as a switch:
p.status[state="pending"] { content: "Pending"; foreground-image:...; }
p.status[state="done"] { content: "Done"; foreground-image:...; }
p.status[state="warning"] { content: "Warning!"; foreground-image:...; }
content is applicable only to elements that allowed to have textual content. E.g. it will work for P, SPAN, etc. but not for DIV.
vertical-scrollbar "style-set-name" - style set name that defines styles of vertical scrollbar.
horizontal-scrollbar "style-set-name" - style set name that defines styles of horizontal scrollbar. See: html_samples/css-plus/scrollbar-styling.htm of how is should be defined.

Length units

Engine supports extended set length units:

Colors

Engine supports following forms of defining color constants:

tint(src-color, luminance-delta, saturation-delta) function allows to define colors linked with some base color. Parameters:
  1. src-color is a literal color value or some color @constant defined before.
  2. luminance-delta is a float value in range -1.0 .. +1.0 - relative increment of luminance value of original color:
    if luminance-delta < 0 then final-luminance = src-luminance * abs(luminance-delta)
    if luminance-delta > 0 then final-luminance = (1.0 - src-luminance) * luminance-delta
  3. saturation-delta, optional, is a float value in range -1.0 .. +1.0 - relative increment of saturation value of original color:
    if luminance-delta < 0 then final-luminance = src-luminance * abs(luminance-delta)
    if luminance-delta > 0 then final-luminance = (1.0 - src-luminance) * luminance-delta

Example, after following declarations:

@const BASE_COLOR: #FF0000; /*red*/
li { border:1px solid tint( @BASE_COLOR, -0.5); }

<li> elements will have borders of dark red color - #7F0000.