The appearance of the web can be improved by a style sheet mechanism that:
While the proposed style sheet mechanism is general enough to apply to all versions of HTML, it is being developed in conjunction with HTML3 and closely matches its design guidelines.
<HEAD> <TITLE>Title</TITLE> <STYLE notation=css> h1: font.faily = helvetica <STYLE> <LINK rel=stylesheet href="bill.style"> </HEAD>Typically, a company-wide style sheet will reside in one location and be referenced through a LINK. The author may add style hints in the STYLE element. If conflicts arise, the hints inside STYLE will override those referenced through LINK.
[Discuss the author/reader balanced approach]
P: font.family = helvetica EM: back.color = #F00
h1, h2: font.family = helvetica[Note that element groups replaces the previously proposed element regular expressions (h[12]: font.family = helvetica).]
H1.punk: font.color = #0F0 <H1 class = punk>Way too green</H1>[The previously proposed H1[punk] notation has been dropped.]
width = 500px height = 600pxWhile regular expressions are not fully supported in the style sheet notation, one can address all elements through an asterisk:
*: font.family = helveticaDropping the addressing field completely will have the same effect:
font.family = helvetica[Caution: sometimes the two notations will mean different things, e.g:
margin.left: 1cm *: margin.left: 2cmThe first sets the margin of the document to 1cm, the second sets the margin of all elements to 2 cm]
/H1 P/: font.style = boldThe initial "/" indicates the start of a pattern search. The trailing "/" is optional. All property assignments are performed on the last element of the search pattern. Subclasses can be stpcified in the search pattern:
/H1 P.ingress/: font.style = boldThe above examples are sequential patterns. Only top-level start tags are regarded in sequential search patterns.
By specifying a hierarchical search pattern, one can set properties based on the ancestors of an element. E.g., since headlines often are rendered in bold, one may want to assign a different color to the STRONG element within an headline:
/H1(STRONG/: font.color = redClass specifications are allowed in a search pattern.
[Should combinations of sequential and hierarchical patterns be allowed?]
font.size spatial, relative font.family font.style font.color colorTo allow for oversized big caps in headlines and initial caps (e.g dropdown) in body paragraphs:
oversize.fontExample of use:
H1: font.style = big caps H1: oversize.font.size += 3 # a la Netscape P: font.style = initial dropped P: oversize.font.size *= 4 # i.e. cover 4 line's height P: oversize.font.style = sans & italic & bold[We may want to allow for a more structured naming scheme for styles, e.g.:
font.weight font.slant]
margin.left spatial margin.rigth spatial margin.top spatial margin.above spatial
indent.left spatial indent.rigth spatial indent.top spatial indent.above spatial indent.first (hmm)
back.color color back.image url[Should we also support stipples, i.e. bitmaps that mask a foreground and background color? I think not since there is no accepted distribution formats available, and you can chive the same effects with a gif.]
add.before add.afterExample:
H1: add.before =
line.indent (indentation for the first line, alternative is line.indent or margin.first) line.leading (alternative names size, spacing) indent align width height
Should link properties be attached to the anchor tag? This is in line with the rest of the proposal, but seems less than intuitive:
A: font.color = #00F /H1(A/: font.color = #F00Perhaps a separate property:
html: txtlink.color = #00FThen, one could also set per element link properties:
P: txtlink.color = #00F H1: txtlink.color = #F00[Too much flexibility??]
Should one be able to set different values according to the type of link, e.g. text or image?
P: text.link.color = #00F P: image.link.color = #0F0 P: link.style = 3DWill this mean we'll have to extend the language for each new media type that comes out?
Kevin proposes:
txtlink.color = blue
txtlink.color = blue < AGE / 7d < "Background Color"
imglink.color = default
imglink.size = 3px
imglink.style may be line, bevel, default, none
txtlink.style may be underline, double underline,
inverse, default, none
*: numbering = on|off *: number.style = arabic|lowerroman|upperroman|loweralpha|upperalpha *: number.inherit = on|off
inches (in) pixels (px) centimeters/millimeters (cm/mm) ems (em) ens (en) points (pt) characters(ch) picas (pa)
Different ways to specify red:
EM: font.color = #F00 EM: font.color = #FF0000 EM: font.color = 255, 0, 0 EM: font.color = 1.0, 0.0, 0.0
In addition to setting the font sixe with a spatial value, one can specify a number in the range 1-7.
h1: font.size = 4 h1: oversize.font.size += 2[There should be a way for the user (only?) to set the array of fonts]
P: font.family = futura, helveticaReally, it's the job of the window system to find alternate fonts with similar properties if the most-wanted is not available. However, window systmes cannot be trusted for this job.
[Clearly, there are mutually exclusive styles, but the grammar should not define those]
Example:
P: font.style = bold & italic & underline & uppercaseThe case styles would display text as follows:
plain: "John Smith studies at MIT." small caps: "john smith studies at mIT." big caps: "John Smith Studies At MIT." lowercase: "john smith studies at mit." uppercase: "JOHN SMITH STUDIES AT MIT."[surely, more styles will be added to this list. Will the term "style" conflict with "style sheet"?]
The following environemnent variables are available for use in style sheets:
Set the left margin to be 1/10 of the widow width, but always more than 2em and less than 20em:
html : margin.left = 2em < WIDTH/10 < 20emLet the color of the background fade frow white to yellow as the document ages. After two days (2d), the fading process is complete:
html : color.background = white < AGE/2d < yellowLet the color of text links change from re to blue as the document loads:
html : text.link = red < FETCHED < blue
h2: font.size = h1[font.size] * 0.8 P : font.size = H1.foo[font.size] - 12 pt[What's the best notation for referencing other values? Previously, this document suggested: "H1.foo:font.size]"]
The notation for setting relative values:
h1: font.size = 4 h1: oversize.font.size += 2
define "My Gray" "191, 191, 191" P : font.color = "My Gray"This would be a simple and workable scheme. What do we gain from going one step further and introduce variables?
When the indicated preferences conflict, the style sheet mechanism needs a way to resolve the disagreement. In this propoasl, both the reader and the author can indicate weight behind their preferences:
font.family = helvetica ! important font.color = black ! insist[Bill proposes using a standard notation for the priority, e.g. "h1: font.family=courier ; priority=insist"] In the end -- if the conflict escalates -- the reader should have the last word.
The list below indicates the hierarchy of style hints:
reader lens used for interactive control, e.g. "zoom in" reader insist e.g. to compensate for handicap author important/insist to indicate special weight reader important author normal default weight, no tagging needed reader normal taken from initial document application default hardcoded fallback valuesIn addition to the important and insist tags, the legal tag indicates that there are legal reasons for the choice of styles, e.g. a font size requirement.
Example:
P: font.size = 12pt ! legal[Discuss the weight assigned to the "legal" tag. Basic strategy: give high weight if the request is reasonable, but "pink" is never a legal requirement.]
The browser should warn the reader when style hints tagged "legal" are overridden and this isn't clear from the context. Contexts where this should be clear:
One should also keep in mind that:
term alternates image : img back : background, bg fore : foreground, fg pt : point, points pa : pica, picas etc.
h1: font.size = 12pt; back.color = #F00 h1, h2: font.family = helvetica; font.size = 12pt
reader: author: style sheet: property: element: document: value: hint: