homehtmlayoutcssmap

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:

  • Gradient backgrounds, see background-color attribute definition.
  • Extended image fill, see background-position and background-repeat attribute definitions.
  • %% length units - "percents from free space".
  • hit-margin attribute.
  • @include "mime-type" url(...) [media types list]; - inclusion of scripts from CSS.
    Example, this:
    <style>
    @include "text/tiscript" url(script.tis) screen;
    </style>
    is an equivalent of
    <script type="text/tiscript" src="script.tis" />
    except of media type condition.

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:

  • string (enclosed in ""), example: "string" ;
  • nmtoken, example: some-token ;
  • numeric value, example: 3.1415 ;
  • url, example: url(http://something.com);  
  • CSS selector, example: selector(#id > .cls);
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-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.
calc(...) the calc function.
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 Lines may break at allowed break points, as determined by the line-breaking rules in effect
none Lines may not break; text that does not fit within the block box overflows it.
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.
text-wrap
specifies one of the following values:
normal Lines may break at allowed break points only, e.g. on whitespace.
none Line breaks are suppressed. Content does not wrap to the next line.
unrestricted Lines may break between any two characters.
text-selection-color specifies color of selected text (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property.
text-selection-background-color specifies background color of text selection (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property.
text-selection
<text-color> <background-text-color>
specifies colors of text selection, shortcut of two properties above. 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.
calc(...) the calc function.
.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.
calc(...) the calc function.
.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.
calc(...) the calc function.
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.
calc(...) the calc function.
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.
calc(...) the calc function.
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.
calc(...) the calc function.
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 Percentage of free space.
width(NN%) Will set height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.
calc(...) the calc function.
z-index As per CSS2.
overflow
overflow-type [scroll-manner]. First overflow-type value 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.
Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below.
overflow-x
overflow-y
overflow-type [scroll-manner]. First overflow-type value 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.
Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below.
scroll-manner
scroll-manner-x
scroll-manner-y
These attributes accept single value. It can be either auto or function definition named scroll-manner() with the following parameters:
page-animation : true | false, if true then PAGE UP/DOWN keys are causing smooth scroll animation.
step-animation : true | false, if true then UP/DOWN keys are causing smooth scroll animation.
home-animation : true | false, if true then HOME/END keys are causing smooth scroll animation.
wheel-animation : true | false, if true then MOUSE WHEEL events are causing smooth scroll animation.
step
: length | percent | auto. auto means "integral step" - single scroll step (UP/DOWN keys) is computed according to dimension of first visible item. In case of length value scroll step will be equal to that value converted to pixels. Percentage value is computed against corresponding dimension of the element.
Default value is 6.25% (1/16) of width or height.
page
: length | percent | auto. auto means "integral step" - single scroll step (UP/DOWN keys) is computed according to dimension of last visible item. In case of length value scroll step will be equal to that value converted to pixels. Percentage value is computed against corresponding dimension of the element.
Default value is 100% - whole width or height of the scrollable area of the element.
Example of scroll manner style definition:
div#scrollable {
 overflow:auto;
 scroll-manner: scroll-manner( page-animation:true,
      step-animation:false,   
       step:auto );
}
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 Percentage of free space in the container.
calc(...) the calc function.
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.
width(NN%) Will set min-height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.
calc(...) the calc function.
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.
calc(...) the calc function.
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.
width(NN%) Will set height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.
calc(...) the calc function.
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.
calc(...) the calc function.
flow
Flow direction of child elements in block containers (e.g. DIVs). This attribute defines type of layout manager (LM) used by the block container.
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.
horizontal-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.
vertical-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.
"...template..."
See Flow and Flex Units document for more information.
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.
size length [ length]
This is a shortcut property for width and height properties. If only one length value is provided then both width and height will get that length value. If there are two values then first one will go to width and second to height properties.
mapping inherit | none | left-to-right | top-to-right |
inherit( <part-list> ) | none( <part-list> ) | left-to-right( <part-list> ) | top-to-right( <part-list> )

Where <part-list> is a comma separated list that contains one or many of following literals: border, padding, margin, background, foreground, layout .

The property defines mapping of directional related properties. For example this declaration:

div { mapping: left-to-right(border,margin); }

will cause left and right borders (colors, widths and styles) and margins to be swapped (mirrored in this case) so for example border defined as border-left will be used as border-right for rendering purposes.

Note that is an inheritable by default property. So if to define body { mapping: left-to-right;} all directional properties of the element and its descendants will be mirrored horizontally. Meaning of part names in <part-list>:
  • border - all border related properties : color, style and width.
  • padding - all padding properties, padding-left, padding-right, etc.
  • margin - all margin properties, margin-left, margin-right, hit-margin, etc.
  • background - directional background properties: background-position, background image and gradients.
  • foreground - directional foreground properties: foreground-position and foreground image.
  • layout - layout is mirrored. For example flow:horizontal; mapping: left-to-right(layout);  will cause blocks to be replaced from right to left.

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.
calc(...) the calc function.
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
name [ url(...) ]

Only in Sciter!

Name of the class in the script - prototype scripting object (class) of this element. Such a class can define methods, properties and event handling methods of the whole class of elements this style applies to. To use compound names like namespace.class enclose them into quotes: prototype: "Module.CoolWidget";

If url part is provided then the engine will make an attempt to load that script file before trying to find behavior class  (if the file was not loaded already).  

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

The engine supports following length units:

  • px - pixels, relative to the viewing device. On screen 1px is exactly one device pixel. On printer 1px is equal to 1/96 of inch.
  • em - the font-size of the relevant font;
  • ex - the x-height of the relevant font;
  • in - inches — 1 inch is equal to 2.54 centimeters;
  • cm - centimeters;
  • mm - millimeters;
  • pt - points — the points used by CSS 2.1 are equal to 1/72nd of an inch;
  • pc - picas — 1 pica is equal to 12 points;
  • % - percent — usually equals to precentage value of correspondent metric of parent element. But not always, see CSS specification.
  • %% - flex ("weight") — see h-smile flex units.
  • * - flex ("weight") — 1* is equal to 100%%;
  • dip - device independent pixels - logical units. 1dip = 1/96 of inch therefore on 96DPI display this will be one pixel. On high-dpi screens it will be resolved to larger number of physical pixels. For example: 2dip will take 3px on 120DPI screen. On printer 'dip' and 'px' units are equivalent.

Colors

Engine supports following forms of defining color constants:

  • color: #f00;           - #rgb form.
  • color: #ff0000         - #rrggbb form.
  • color: rgb(255,0,0)    - rgb(0..255,0..255,0..255) form.
  • color: rgb(100%,0%,0%) - rgb(0..100%,0..100%,0..100%) form.
  • color: hsl(300,0%,0%)  - hsl(0..360,0..100%,0..100%) form - HSL color space.
  • color: tint(@base-color, 50%, 0%) - tint(base-color, -1.0..1.0 [, -1.0..1.0]) form.
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.



					

HTMLayout

Download

Documentation

Screenshots!

HTMLayout Wrappers