CSS: Visual Format

NOTE: The following contains NO official documentation. Please do not use this reference as such. Although there are sections of this article which either directly reference an official text, or which have been copied verbatim from an original credited authority, please see the footnotes here which cite those references so that you may then view the original documents as their authors intended.

Width : the Em Unit

i do not consider this to be fact, or even the best possible estimate (yet), but currently, i believe if one wishes to indicate his page-width using a common size of approximately 600 - 800 pixels, one should consider using the em unit between 37 em minimum and 57 em maximum for the width of the main page element which will contain text

12.2 The ‘content’ property

‘content’
Value:   normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial:   normal
Applies to:   :before and :after pseudo-elements
Inherited:   no
Percentages:   N/A
Media:   all
Computed value:   On elements, always computes to ‘normal’. On :before and :after, if
‘normal’ is specified, computes to ‘none’. Otherwise, for URI
values, the absolute URI; for attr() values, the resulting string;
for other keywords, as specified.

This property is used with the :before and :after pseudo-elements
to generate content in a document. Values have the following
meanings:

none
The pseudo-element is not generated.
normal
Computes to ‘none’ for the :before and :after pseudo-elements.
<string>
Text content
(see the section on strings).

<uri>
The value is a URI that designates an external resource (such as an image).
If the user agent cannot display the resource it must either leave
it out as if it were not specified or display some indication that
the resource cannot be displayed.

<counter>
Counters may be specified
with two different functions: ‘counter()’ or ‘counters()’.
The former has two forms:
‘counter(name)’ or ‘counter(name,

style)’.

The generated text is the value of the innermost counter of the given
name in scope at this pseudo-element; it is formatted in the indicated
style (’decimal’ by default). The latter
function also has two forms: ‘counters(name,
string)’ or ‘counters(name, string,
style)’. The generated text is the value of all counters
with the given name in scope at this pseudo-element, from outermost to
innermost separated by the specified string. The counters are rendered
in the indicated style (’decimal’ by
default). See the section on automatic counters
and numbering for more information.

open-quote

and close-quote

These values are replaced by the appropriate string
from the ‘quotes’ property.

no-open-quote
and no-close-quote

Introduces no content, but increments (decrements) the level of nesting for quotes.

attr(X)

This function returns as a string the value of attribute X
for the subject of the selector. The
string is not parsed by the CSS processor. If the subject of the selector
doesn’t have an attribute X, an empty string is returned. The
case-sensitivity of attribute names depends on the document language.
Note. In CSS 2.1, it is not possible to refer to
attribute values for other elements than the subject of the selector.

The ‘display’ property
controls whether the content is placed in a block or inline box.

Example(s):

The following rule causes the string “Chapter: ” to be generated before each H1 element:

H1:before {
  content: "Chapter: ";
  display: inline;
}

Authors may include newlines in the generated content by writing
the “\A” escape sequence in one of the strings after the ‘content’ property. This inserted line
break is still subject to the ‘white-space’ property. See “Strings” and “Characters and case” for
more information on the “\A” escape sequence.

Example(s):

h1:before {
    display: block;
    text-align: center;
    white-space: pre;
    content: "chapter\A hoofdstuk\A chapitre"
}

Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).

( end CSS 2.1 snippets)

Quick-links to the CSS2.1 Rec. at the W3C(2)

Perhaps one of the most valuable sections of the W3C’s CSS Spec is the Chapter 9, the Visual formatting model.

Contents

Snippets from the W3C CSS Recommendation

Where indicated, i have used “snippets”, or abbreviated versions of the original document. Please reference the W3C CSS 2.1 Recommendation(1) for a most accurate definition of anything listed herein, and referenced as such. The following section, up to the Quick-links section contains incomplete portions of the official Recommendation document, copied here for my own personal, Educational reference. If you wish to use this text, please do so only after reading the original Recommendation at the W3C web site. Thanks.


NOTE: in an attempt to provide a more accurate representation of the W3C’s documentation, i must note that there is, as of this date, July 16th, 2006, not yet a standard recommendation for CSS 2.1, but only a Candidate Recommendation. The C.R. is cited here:

Normative Reference (as appropriated from the w3c.org):
(1)Cascading Style Sheets, level 2 revision 1
CSS 2.1 Specification., Bert Bos, Tantek Çelik, et al., Rev. 06 November 2006., Available at: http://www.w3.org/TR/CSS21/ . Referenced: 03.03.2007
(2)Cascading Style Sheets: Level 2 Revision 1., Bert Bos; et al., Rev. 25 February 2004. W3C Candidate Recommendation. (Work in progress.). Available at: href=”http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html

BACK TO TOP [ javascript enabled ]