NOTE-css-potential-19970819

CSS: Potential Enhancements

W3C Note 19-Aug-1997

Status of this document

This document is a NOTE made available by the W3 Consortium for discussion only. This indicates no endorsement of its content, nor that the Consortium has, is, or will be allocating any resources to the issues addressed by the NOTE. This document is being distributed to solicit public comment (to www-style@w3.org on the value of various proposed CSS extensions documented here. There is no commitment to turn these proposals into a recommendation.

Abstract

This document describes a smaller number of properties which could be added to CSS1 to create a richer language that solves some of the most common problems encountered when using CSS1.

• CSS1.0 Cleanup
• Text Shadows
• Generated text & counters
• Cursors
• Filters & Text Effects
• Multi Column Layout
• Attribute based addressing
• Sequential Addressing
• Constants & environment variables

CSS 1.0 Cleanup

 
BR { break: line-after; }

 
    ... some <IMG SRC="img.jpg" ALT="shadowed"> text...

 
IMG {line-height: 16px; vertical-align: -25%}

 
IMG {line-height: 4px; vertical-align: -100%}

 
IMG {vertical-align: -4px}

 
UL:marker { color: red } 
OL:marker { font-family: times }

Text Shadows

Text shadow effects can be achived in CSS1 using negative margins and duplicated text. The results can be visually stunning, but have unfortunate side-effects for non-visual readers and people using browsers that odn't support style sheets. It is therefore impotant that a new property gets deployed before authors start using negative margins:

 
P { text-shadow: black }

 
text-shadow: red 0.1em 0.1em, blue -0.1em -0.1em 80%;

Generated text & counters

We are working on methods for adding generated text and counters. Specifically we want to have much richer control over the autonumbering and bulletting of list items, headings and other elements.

Cursors

help: Help is available for the object under the cursor. Usually a question mark or a balloon.

Filters & Text Effects

We are working on methods of applying a rich set of special effects to text and images such as image blurring and glow effects. The purpose of this is to use CSS to modify existing structural elements to be presented in a variety of ways. Rather than creating extra image information to accomplish the same effect.

Multi Column Layout

To flow content into several columns, two new CSS properties are proposed., columns and column-rule.

The formatting model of CSS1 is changed to include the new properties. Elements can now specify that their content, including child elements, should be flowed into columns. That means that the width of those child elements is derived from the column width instead of the parent's full width.

By default, i.e., when there is only one column, the sum of margin, border, padding and width for any block element is still equal to the width of the parent element. But when there are more columns, the sum is equal to the column width.

 
| <---------------------- width ----------------------> | 
|                                                       | 
|                                                       | 
|                         | * |                         | 
|                         | * |                         | 
|  #####################  | * |  # |               | #  | 
|  # .---------------. #  | * |  # |               | #  | 
|  # |               | #  | * |  # |               | #  |  
|  # |               | #  | * |  # |               | #  | 
|  # |               | #  | * |  # |               | #  | 
|  # |               | #  | * |  # |               | #  | 
|  # |               | #  | * |  # `---------------' #  | 
|  # |               | #  | * |  #####################  | 
|  # |               | #  | * |                         | 
|  # |<child's width>|    | * |                         | 
|  #                      | * |                         | 
|   ^-- child's padding     ^-- column rule             | 
   ^-- child's border 
  ^-- child's margin       ^-^-- 2 x 1/2 gutter

One can either specify the number of columns or the desired width of a column. All columns have the same width. The gutters and optional vertical rules between the columns can also be given. If the number of columns is specified, the actual column width is found by dividing the element's width by it. To be precise (n = number of columns, w = actual column width):

 
 width = n * w + (n - 1) * (gutter + column-rule) (1)

If the desired column width is specified instead, the number of columns is found by dividing the width by the desired column width and rounding to the nearest integer (w' = desired column width):

 
 width = n' * w' + (n' - 1) * (gutter + column-rule) (2) n = round(n') (3)

The actual width can thus be different from the desired width. For example: if the width of the element is 50em and the desired column width is 10em, with a 2em gutter and no rules, there is room for 4.3 columns (by equation 2), which rounds to 4 (by equation 3). The actual column width then works out to be 11em (by equation 1), or just a little larger than the desired width.

The formatter should try to divide the contents over the columns in such a way that all columns are of equal height (balanced columns).

 
 DIV { columns: 20em }            /* relative to the font size */

 
 BODY { columns: 4 } /* 4 columns */

 
<STYLE> 
 DIV { 
  columns: 20em 3em; 
  width: auto; 
 } 
 H1 { columns: 1 }  
</STYLE> 
<BODY> 
<H1>THIS IS THE HEADLINE WHICH IS QUITE LONG</H1> 
<DIV> 
  <P>This is the first paragraph. The first paragraph comes first,  
     before the second.  
  <P>After the first paragraph comes the second paragraph which 
     you are reading now.  
  <P>The third paragraph is the last paragraph. Not much more to say 
     about that. 
  </DIV> 
 </BODY>

 
THIS IS THE HEADLINE WHICH GOES ON TOP 
 
This is the first   graph which you 
paragraph.          The are reading now. 
first paragraph 
comes first, be-    The third para- 
fore the second.    graph is the last 
                    paragraph. Not 
After the first     much more to say 
paragraph comes     about that. 
the second para- 

 
 THIS IS THE HEADLINE WHICH IS QUITE LONG 
 This is the first     After the first    The third para- 
 paragraph. The        paragraph comes    graph is the last 
 first paragraph       the second para-   paragraph. Not 
 comes first, before   graph which you    much more to say 
 the second.           are reading now.   about that.

Attribute based addressing

The CLASS attribute has been added to the HTML specifications with style sheets in mind, and enjoys a special shorthand notation as described in the CSS1 specification. Also, other attributes/values could be used in addressing:

 
  A[HREF] { color: red }          /* the HREF attribute exists */
 
  H1[CLASS = huge] { font-size: 60pt } /* another way of writing H1.huge */
 
  DIV[LANG = fr]  { font: 12pt/14pt Galliard } /* special styling for French text */

Sequential Addressing

CSS Level 1 contains functionality for addressing elements based on its ancestors. In level 2, one could also address based on siblings. A typical example is making the first paragraph after a headline bold:

 
 /H1/ P { font-weight: bold }

The '/' indicates the start of a sequential pattern search. All property declarations are performed on the last element of the search pattern.

Combined with the hierarchical search patterns, one has powerful context-sensitive addressing:

 
H1                  -- every H1 
H1, H2              -- every H1 and every H2 
(H1) EM             -- EM inside H1 
(DIV) (H1) EM       -- EM inside H1 inside DIV 
/H1/ P              -- P that immediately follows H1 
(DIV) /H1/ P        -- P that immed. follows H1 inside DIV 
(DIV) /H1/ (P) EM   -- EM inside P that immed. follows H1 inside DIV 
// P                     -- P that follows nothing (i.e., P that is 1st child) 
(DIV[CLASS=CHAP]) P -- P inside DIV with CLASS=CHAP

Note that the last example could have been written (DIV.chap) P.

Constants &environment variables

[interesting, but potentially complex issue]

The following environment variables are available for use in style sheets:

The following two are only defined inside an element that contains a hyperlink:

One could then change the color of a hyperlink with:

 
 a[href] { color: dark-red << $LASTVISIT/30d >> dark-blue }

The combination of constraints and environment variables can be quite interesting. Set the left margin to be 1/10 of the window width, but always more than 2em and less than 20em:

 
 { margin-left:  2em << $WIDTH/10 >> 20em }

Let the color of the background fade from white to yellow as the document ages. After two days (2d), the fading process is complete:

 
  { background: white << $AGE/2d >> yellow }

Let the color of text links change from red to blue as the document loads:

 
  { text-link: red << $FETCHED >> blue }

Addressing environment properties

[This section is under fire. Among the strongest charges against it is the possible introduction of asymmetry ("the user can do this, but not the author"). If you would like to see it survive, you should voice your opinion.]

While the main focus of this specification is to define a standard for attaching style to HTML, the users' WWW browsing environment has additional elements. Applications have a user interface, they show you the HTML source on request, and GUI clients have a window size. While one normally would leave user preferences to the application and a configuration file, the notion of cascading style sheets has the potential of addressing all issues of style through one interface. The user's personal style sheet can be used to set the fonts of the browser buttons as well as incoming documents' H1 elements. Authors should be careful when trying to influence environment properties, and clients could choose to ignore them.

It is important to syntactically mark the difference between style properties of the environment and HTML elements. One should be careful when picking names. Here are some possibilities:

 
$HTML-SOURCE { font-family: courier, font-size: 12pt } 
$CLIENT-WINDOW { width: 600px, height: 800px } 
$CLIENT-WINDOW { font-family: helvetica } 
$HTML_ERROR { color: yellow, background: red

An initial '$' marks environment elements.