Text Content Rendering - 1

Text Contents rendering is another fundamental properties in visual style rendering. The properties of text can be divided into two parts. They are the font used and the other is the additional decoration presentation.

Character Styling

Font Styling

Font is used to specify the basic properties of character used in an element. The basic properties include the font family of the character used, the style of character presentation, an additional variant of character presentation to the style, the boldness of character presentation and the size of character presentation.

There is also a shorthand to declare all font properties of an element by grouping them in one style declaration. Further, the shorthand declaration is also used to declare an element by setting it according to sytem font of the specified item

Text Arrangement and Styling

Text is used to specify the additional decoration properties and presentation arrangement of character used in an element. The properties include the character indentation in the first line of a block, the character alignment in a block, the additional decorations of character, the spacing between characters, the spacing between words, the transformation of character presentation, the arrangment of white space handling and the direction of text flow.

The color of character is grouped into the foreground color rendering.

Property Type - Font Styling

Font Family

The font family of an element is a list of acceptable typeface in priority order that can be used for character presentation of text contents. The 'font-family' property is used to specify the acceptable font family list in priority order for the text content of an element. e.g.

{font-family: blue }

The 'font-family' property is an inherited value. Therefore a font-family property declaration of a container will redefine all the containted text, unless another declaration specifies another value for text. Considering the availability of specified family name in the user agents, a generic family can be used as the last alternative font family. The available generic familys are. 'serif' -e.g. Times, 'sans-serif' -e.g. Helvetica, 'cursive' -e.g. Zapf-Chancery, 'fantasy' -e.g. Western, 'monospace' -e.g. Courier.

Font Style

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

{font-style: italic }

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 contained 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 contained 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 labelling small controls. The keyword 'status-bar' specifies the font used in window status bars. 

---