Text Content Rendering - 2

Property Type - Text Arrangement and Styling

Text Indent

Text indent is the indentation of first line of text for the presentation of text contents in a block container. The 'text-indent' property is used to specify the indentation of first text line respect to the edge of the text line box in a block container. But for element of first formatted line, the 'text-indent' property only affects the first child element.  e.g.

{text-indent: 3em}

The 'text-indent' property is an inherited value. Therefore a text-indent property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. But when using the 'text-indent' property in the first formatted line element, it only affects the first line, or the first child. For a positive indentation, the indentation of text is in the form of blank space. But text indentation can also be negative by which the text flows away from the text line box. As a result, text flow may exceed the width of the block container and causes the overflow of block. The visiual effect of the overflow is then affected by the 'overflow' property. The keyword <length> uses a format of length value immediately followed by a unit identifier to specify a fixed length. The keyword <percentage> is a relative value with a format of percentage value immediately followed by '%' to specify a percentage of the containing block width.

Text Align

The text alignment of an element is the alignment of the text used for the presentation of the text context. The 'text-align' property  is used to specify how the text content is aligned in the block container. e.g.

{text-align: center }

The 'font-style' property is an inherited value. Therefore a font-style property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. The normal font-style also referred to "roman" or "upright" font style. In general, font name with Oblique, Slanted, or Incline are grouped as 'oblique' style, and font name with Italic, Cursive, or Kursiv are grouped as 'italic' style. Besides, if the specified 'oblique' style of the specified font nameis not available, the 'italic' style of any available font will be used as substitute.

Font Variant

The font variant of an element is the other variant of the defined font used for the presentation of the text context. 'font-variant' is the next tried property after 'font-style' property. The 'font-variant' property  is used to specify the font variant of the defined font used in an element. e.g.

{font-variant: small-caps}

The 'font-variant' property is an inherited value. Therefore a font-variant property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. Letters of the small-caps font-variant are rendered as uppercase ones of a smaller size.

Font Weight

The font weight of an element is the weight of the defined font used for the presentation of the text context. 'font-weight' is the next tried property after 'font-variant' property. The 'font-weight' property  is used to specify the font weight of the defined font used in an element. e.g.

{font-weight: bold }

The 'font-weight' property is an inherited value. Therefore a font-weight property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. The numerical scale, from '100' to '900', specify the 'darkness' range of the specified font. The keyword 'normal' is same as value '400' and keyword 'bold' is same as value '700'. But the keywords 'bolder' and 'lighter' are defined relative to the weight inherited from the parent and the computed value is also depended on the availability of the defined font used in the element.

Font Size

The font size of an element is the dimension of the defined font used for the presentation of the text context. ' The 'font-size' property  is used to specify the font weight of the defined font used in an element. e.g.

{font-size: 16px }

The 'font-size' property is an inherited value. Therefore a font-size property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. The keyword <absolute-size>, which includes [ xx-small | x-small | small | medium | large | x-large | xx-large ], is an index refered to a table of font sizes predefined by user agent. The keyword <relative-size>, which includes [ larger | smaller ], is interpreted relative to the font size of the parent element and the predefined font sizes table. The keyword <length> uses a format of length value immediately followed by a unit identifier. The keyword <percentage> is a relative value with a format of percentage value immediately followed by '%'.

Font Property

The 'font' property is a shorthand to declare all the font proerties of an element and 'line-height' property by grouping them in one style rule. Besides, the 'font' property can also be used to set the system fonts. Although the defining of the font properties is selective in the 'font' property, the 'font' property will first reset all font properties to their initial values. Therefore, all the undefined properties in the 'background properties will be reset to their initial value. e.g.

{font: 16px sans-serif}

The 'font' property is an inherited value. Therefore a font property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. All font property keywords are used as individual properties. And the keyword <'line-height'> is added to the keyword <'font-sze'> as an option. The keyword 'caption' specifies the font used for captioned controls, e.g. buttons, drop-down, etc. The keyword 'icon' specifies the font used to label icons. The keyword 'menu' specifies the font used in menus, e.g. drop-down menus and menu lists. The keyword 'message-box' specifies the font used in dialog boxes. The keyword 'small-caption' specifies the font used for labeling small controls. The keyword 'status-bar' specifies the font used in window status bars.