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.
|
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.
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.
|
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. |
|
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. |