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.
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.
<LINK REL="style" HREF="http://NYT.com/style">The LINK element is used to indicate the URL of the style sheet. Multiple style sheets can be referenced from the same document, and will be appended to the cascade and merged as they are encountered.
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.
A one-statement style sheet that sets the font size of the h1 element:
h1.font.size = 24pt 100%The percentage at the end of the line indicates what degree of influence that is requested (here 100%). If this is the initial style sheet (i.e. the one under user control), this request can be fulfilled, i.e. all headline elements will be rendered using helvetica. If the statement comes in a later style sheet, any unclaimed influence is granted.
h2.font.size = 20pt 40%Here, the requested influence is reduced to 40%. If a style sheet later in the cascade also requests influence over h2.font.size, up to 60% can be granted. When the document is rendered, a weighted average of the two requests is calculated, and the final font size is determined.
30% h1.font.family = timesThis stylesheet first requests a default influence of 30% which is applied to all following statements unless otherwise specified. This leaves 70% of the influence to upcoming style sheets which may set other values. For continuous values, e.g. the font size, mixing influences is not problematic -- one simply calculates the weighted average if they differ. For discrete values, e.g. the font family, it may not be obvious how to mix 40% helvetica and 60% times. Some will argue that font families certainly can be parameterized and mixed, others that one should select the request with the highest influence. The issue deserves more research for which this proposal leaves room.
40% font.family = times h1.font.family = helvetica 100%The first statement sets the font family of all elements to times. An alternative syntax using well-known wildcard symbols is *.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/styleIn this example, parameters from the user's environment is taken into account when determining the style sheet values. The C-style syntax of the first statement reads: If the document is older than three days, the background color should be pale yellow, else the backgound color should be white. The second statement references other style sheets. If the height of the display is less than 30 cm, the NYT style will inherit the remaining influence, otherwise the LeMonde style will be given these rights.
RELEVANCE > 80 ? h1.font.size *= 1.5In newspapers, the size of the headlines tell us how important the editor believes the article is. As digital agents and personalized information filters become available, the typography of HTML documents should also be influenced by the relevance of each document for each individual user. Given a relevance factor, the above statement multiplies the font size of h1 by 1.5.
http://NYT.com/style 30% http://LeMonde.com/style 70%This style sheet sets no parameters of its own. Instead, it references two other sheets and assigns them different weights. If no previous style sheets has claimed influence, the resulting presentation will be a mix of NYT (30%) and LeMonde (70%).
speech.*.weight = 35db speech.em.weight = 40dbCurrent browsers consider the computer screen to be the primary presentation target, but HTML -- different from the page description languages -- has the potential of supporting many output media, e.g. paper, speech and braille. Each medium has its own characteristics which may require different presentation parameters to be set. The example above sets values for the speech medium. while all previous statements by default set values for all media.
align.style = left head.align.style = center print.head.align.style = rightBoth HTML elements and media types have been grouped to allow for more general statements. In the above example, the first statement establishes a default left alignment for all elements in all media. The second statement changes the setting for headline elements (h1 .. h6) in all media. The last statement is more specific; it requests headlines to be right-aligned when printed. print is itself a group consisting of e.g. print_color and print_mono.
font.size *= 2 100%This single statement style sheet will, if given the influence, double the font size of all paragraphs. A style sheet like this could conveniently be merged in when the user selects "double font size" from a pulldown menu. One could easily duplicate the functionality of e.g. Mosaic's font options this way. Also, one can imagine far more powerful user interfaces that takes into account the advantages of cascading style sheets:
User Author Font o-----x--------------o 64% Color o-x------------------o 90% Margin o-------------x------o 37% Volume o---------x----------o 50%Here, x represents the handles of slide bars. The output of this interaction is the percentage values that are attached to the statements in the user's style sheet.
# # 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 #slides