Cascading HTML style sheets -- a proposal

Håkon W Lie

howcome@info.cern.ch

10 Oct 1994

v0.92 This document describes work in progress and is incomplete as a basis for implementation. Its primary purpose is to establish guiding principles and propose a level of functionality for HTML style sheets. Comments are solicited.

Abstract

The style sheet scheme is designed so that style sheets can be cascaded; the user/browser specifies initial preferences and hands the remaining influence over to the style sheets referenced in the incoming document. This will provide publishers with stylistic influence without resorting to page description languages.

The scheme supports visual as well as non-visual media.

Introduction

current style sheets are static, they seldom change within the lifetime of a browser process. This makes the visual environment sparse.

current style sheets are implemented using platform-specific notations, e.g. X11 resources. While some may consider this to be a feature, it prohibits general mechanisms for passing styles over the web.

the author of HTML documents has no influence over the presentation. Indeed, if conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

a) giving readers a richer visual (or auditory and tactile) environment while they retain control if necessary, and

b) providing authors and publishers with stylistic influence without resorting to page description languages.

The proposed scheme is balanced in the sense that it provides author and reader with the same notation for specifying style. While the author (or publisher) often wants to give the documents a distinct look and feel, the user will set preferences to make all documents appear more similar. Designing a style sheet notation that fill both groups' needs is a challenge.

The cascade

<LINK REL="style" HREF="http://NYT.com/style">

Style sheets can reference other style sheets, and the cascase can be infinitely long. Browsers will have to limit the length of the cascade. Fetching and processing the cascade is potentilally expensive, but caching will reduce the cost.

Some simple examples

A one-statement style sheet that sets the font size of the h1 element:

h1.font.size = 24pt 100%

helvetica

h2.font.size = 20pt 40%

h2.font.size

30% h1.font.family = times

helvetica

times

40% font.family = times h1.font.family = helvetica 100%

*.font.family = times

The second statement overrides the font family value for the h1 element and requests absolute control (100%) for this.

The order of the two statements above is irrelevant -- the more specific statements will override the more general ones.

60% AGE > 3d ? background.color = pale_yellow : background.color = white DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style

RELEVANCE > 80 ? h1.font.size *= 1.5

h1

http://NYT.com/style 30% http://LeMonde.com/style 70%

speech.*.weight = 35db speech.em.weight = 40db

speech

align.style = left head.align.style = center print.head.align.style = right

h1 .. h6

print

print_color

print_mono

font.size *= 2 100%

User Author Font o-----x--------------o 64% Color o-x------------------o 90% Margin o-------------x------o 37% Volume o---------x----------o 50%

x

Unresolved issues

LINK elements are only allowed in the HEAD of the document. There should be a way of adding and subtracting style sheets from within the document. This would allow for the nesting of style sheets within a document.

elements are only allowed in the of the document. There should be a way of adding and subtracting style sheets from within the document. This would allow for the nesting of style sheets within a document. In its finest resolution, the current notation attaches style values to one HTML element. There should also be a way to specify style settings for attributes.

The order of the statements in the style sheets is irrelevant; the more specific ones override the more general ones. A precise definition of the rules for this is needed. E.g., wwhich is the more general among print.head.font.size = 20pt and h1.font.size = 14pt .

Limitations

While a style sheet may look like a procedural program, it lacks many of the constructs of traditional programming languaguages, e.g.: compound statements, variables, and/or. Rather, the style sheets are declarations of constraints.

Much due to the above point, some seemingly normal statements will not be allowed. Notably, all conditional statements must be resolved when the style sheet is read. The statement h1.font.size > 20pt ? h2.font.size = 15pt is illegal since the value of h1.font.size is allowed to change.

is illegal since the value of h1.font.size is allowed to change. Statements can not be granted groupwise influence. E.g., one cannot specify that statement A should always have the same influence as statement B.

The notation is quite verbose. Fetching and parsing a cascade of complex style sheets is potentially expensive. Caching will reduce the cost.

Implementation

Acknowledgement

Appendix A

A more complex example

# # This is an initial style sheet. It should provide fallback values # with low influence. Also, at the end, the user has added some # favorite settings # 0% # 0% impact, i.e. fallbacks # first, set some common defaults font.family = times font.size = 12pt # alternative units are px, mm, cm font.slant = normal font.weight = normal h1.font.size = font.size * 3 h2.font.size = font.size * 2.5 h3.font.size = font.size * 2 strong.font.weight = bold em.font.slant = italics tt.font.spacing = proportional align.style = left # paragraph alignment h1.align.style = center space.left = 0pt # set the white space surrounding paragraphs space.right = 0pt space.above = 4pt space.below = 4pt space.first = space.left + 0.5cm # i.e. some extra indentation head.space.above = 15pt # straying from the 4pt default above list.space.left = 1cm # extra indentation for all lists list.space.first = 1cm # window-wide settings AGE > 3d ? window.background = pale_yellow : window.background = white window.foreground = black window.width = 400px window.height = REAL_HEIGHT - 50px window.margin.left = 2cm window.margin.right = 2cm window.margin.above = 2cm window.margin.below = 2cm # # paper works different # print.font.size = 10pt # # The user has redefined some of the default values below # 100% # first, redefine influence to dictatorship font.family = helvetica # # after this, the rest of the influence is handed over to the style # sheets of the incoming documents #