Chapter 14

Stylesheet

[talk about the reason for using a stylesheet, relationship to in tag attribute hints, trade offs]

[Disclaim official status. Emphasis experiemntal status... Not yet (if at all) accepted and implemented out side of viola.]

A Case Example

The screendump of a document under influence of stylesheet:

The HTML listing:


<HTML> <HEAD> <TITLE>A simple stylesheets test</TITLE> <LINK REL="style" HREF="../../viola/sgml/styles/HTML_sodium.stg"> </HEAD> <BODY> <H1>Simple stylesheets test</H1> <P> This document has links to three very simple stylesheets. The first stylesheet took effect from the beginning of this document. <P> Note that the above H1 is center aligned as specified by the stylesheet. Similarily, the following H2 is aligned to the right. <SECTION> <P>This and the next paragraph are living in a SECTION, and SECTIONs should have borders around it. <P>Some more text. </SECTION> <H2>Context Sensitivity</H2> <P> The following three ADDRESSes are each under influence of three different stylesheets. The point illustrated here is context sensitivity. That is, the Paragraphs take on different styles depending on whether they're inside or outside of the ADDRESS. A brief study of the stylesheet listings should make the evident enabling mechanism. <ADDRESS> <P>wei@ora.com <P>Digial Media Group, O'Reilly & Associates </ADDRESS> <LINK REL="style" HREF="../../viola/sgml/styles/HTML_address1.stg"> <P>Second stylesheet in effect starting from here. The text inside the address paragraphs should be blinking. <ADDRESS> <P>wei@ora.com <P>Digial Media Group, O'Reilly & Associates </ADDRESS> <LINK REL="style" HREF="../../viola/sgml/styles/HTML_address2.stg"> <P>Third stylesheet in effect starting from here. <ADDRESS> <P>wei@ora.com <P>Digial Media Group, O'Reilly & Associates </ADDRESS> </BODY> </HTML>
And the stylesheets. Here's "HTML_sodium.stg":
(BODY,HPANE,INPUT,P FGColor=black BGColor=grey70 BDColor=grey70 align=left (SECTION border=1 BDColor=red) (H1 FGColor=white BGColor=red BDColor=black align=center (H2,H3 FGColor=white BGColor=maroon BDColor=maroon align=right) (A FGColor=red) (BOLD,EMPH,STRONG fontWeight=bold) (CMD,KBD,SCREEN,LISTING,EXAMPLE fontSpacing=mono) (I fontSlant=italic) (ADDRESS align=left FGColor=black BGColor=grey70 BDColor=grey70 (P fontSlant=italic blinkColorOn=green blinkColorOff=black blink=1000)) )

The second stylesheet, "HTML_address1.stg":


(P FGColor=black BGColor=grey70 BDColor=grey70 align=left (ADDRESS align=left FGColor=black BGColor=grey70 BDColor=grey70 (P fontSlant=italic blinkColorOn=green blinkColorOff=black blink=1000)) )

And the third stylesheet, "HTML_address2.stg":


(P FGColor=black BGColor=grey70 BDColor=grey70 align=left (ADDRESS align=right (P fontSlant=italic)) )

An RFC on stylesheet

We'll look at the language used to describe the mapping between tags and style properties, and the interpretation of the language.

An example of the stylesheet for consideration.

Note that everything not in quotes is case insensitive.

(HEAD,BODY fontSize=normal BGColor=white FGColor=black (H1 fontSize=largest BGColor=red FGColor=white) (H2 fontSize=large) (P) (A FGColor=red) (CMD,KBD,SCREEN,LISTING,EXAMPLE fontSpacing=mono) (BOLD,EMPH,STRONG fontWeight=bold) (I fontSlant=italic) (ADDRESS (P fontSlant=italic)) (OL (LI numStyle=roman (LI numStyle=number (LI numStyle=alpha) ) ) ) (FOOTNOTE fontSize=small (P) ) )

From this stylesheet, you can derive the following information:

Note that properties are inherited down the tree, unless overridden. So, the color information that is specifed at the top is used all over, except for <H1> which redefines its own colors.

Having this inheritance behaviour also helps to keep the description short, as lots of information can be derived by the context in the tree structure.

The lone "(P)"s are there to engage the respective <P> tags to be in those particular contexts.

A document uses a <LINK REL="STYLE" HREF="URL_to_a_stylesheet"> to associate to a stylesheet. It's an open question as to whether we should allow multiple stylesheets in a document, and where this link can be specified (once only, in the <HEAD>?).

One more thing not mentioned in the above RFC. There should be a way to take attributes into account. For example, to make the following markup be rendered with red text and boxed in orange border.

<P STYLE="WARNING">Spike on duty</P> You'd write the style spec this way (in my syntax): (P BGColor=white FGColor=black {STYLE "WARNING" FGColor=red BDColor=orange})
GOTO Preface, Previous Chapter (13), Next Chapter (15)