Sideway
output.to from Sideway
Draft for Information Only

Content

Text Content Rendering - 1
 Character Styling
  Font Styling
  Text Arrangement and Styling
 Property Type - Font Styling
  Font Family
   Font Style
   Font Variant
   Font Weight
   Font Size
   Font Property

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 }
'font-family'

The 'font-family' property is used to specify the acceptable font family list in priority order for the text content of an element.

value:[[<family-name> | <generic-family> ] [, <family-name> | <generic-family> ]* ] | inherit Initial:depends on user agent Applies to:all elements Inherited:yes Percentages:N/A Media:visual Computed value:as specified

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 }
'font-style'

The 'font-style' property  is used to specify the font face of the defined font used in an element.

value:normal | italic | oblique | inherit Initial:normal Applies to:all elements Inherited:yes Percentages:N/A Media:visual Computed value:as specified

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}
'font-variant'

The 'font-variant' property  is used to specify the variant of the defined font used in an element.

value:normal | small-caps | inherit Initial:normal Applies to:all elements Inherited:yes Percentages:N/A Media:visual Computed value:as specified

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}
'font-weight'

The 'font-weight' property  is used to specify the weight of the defined font used in an element.

value:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Initial:normal Applies to:all elements Inherited:yes Percentages:N/A Media:visual Computed value:as rules of specified

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}
'font-size'

The 'font-weight' property  is used to specify the weight of the defined font used in an element.

value:<absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial:medium Applies to:all elements Inherited:yes Percentages:refer to inherited font size Media:visual Computed value:absolute length

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}
'font'

The 'font' property  is used to specify the font properties and 'line-height' property of the defined font used in an element and set the system font.

value:[[<'font-style'> || <'font-variant'> || <'font-weight'> |? <'font-size'> [/<'line-height'>]? <'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar | inherit Initial:as individual properties Applies to:all elements Inherited:yes Percentages:as individual properties Media:visual Computed value:as individual properties

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. 



©sideway

ID: 101000012 Last Updated: 1/29/2011 Revision: 1 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019