Request for Comments: STYLESHEETS

raisch@ora.com (Rob Raisch)
Date: Thu, 10 Jun 1993 15:23:20 -0400
From: raisch@ora.com (Rob Raisch)
Message-id: <199306101923.AA29318@ora.com>
To: www-talk@nxoc01.cern.ch
Subject: Request for Comments: STYLESHEETS
Forwarded from comp.infosystems.www newsgroup:  (Sheesh, this is what comes
from not following the conversation regarding gatewaying the list to the 
group and vice versa.  <grin>)

</rr>
-------------------------------------------------------------------------
O'Reilly & Associates would like to solicit comments from the WWW online 
community on the following proposal to include support for 'stylesheets' 
in HTML documents.

	Date:		June 6 1993

	Title:		Stylesheets for HTML

	Author:		Robert Raisch
			Manager, Online Systems
			O'Reilly & Associates

	Abstract:

		Many interesting documents in the WWWeb are now being
		designed to support features or attributes of specific
		browsers/renderers.  While this is not, in itself, a
		bad thing, the optimal state would be one where the
		document carried with it information which allowed 
		browsers to make 'appropriate' decisions which were
		aligned with the intent of the original author.

		This RFC proposes an easily parsable format to deliver
		stylistic information along with Web documents.  While
		the actual format of this information is of little 
		general interest to the Web community, an attempt has 
		been made to support a simple subset of generally useful 
		style HINTS or SUGGESTIONS.  This is not meant to be an 
		exhaustive list and suggestions for improvement would 
		be most welcome.

		In no way should this proposal be considered an attempt
		to stipulate *required* behavior.  The sole purpose of
		the included format is to suggest behavior which will
		allow a browser to render a specific document in a form
		which more closely resembles the document as envisioned
		by it's creator.

	The author is indebted to the Global Network Navigator Project and
	Digital Media and Design Groups of O'Reilly and Associates.

	Please direct comments to the newsgroup, or to 'raisch@ora.com'

--------------------------------------------------------------------------
NOTE:

	The format described is supported in libWStyle, a stylesheet parser
	library which will be released to the WWW developer community, REAL
	SOON NOW.

	This document will be made available through the Web.  Due to 
	the nature of certain discussions on the net, it is published here 
	as a plain text document.  Apologies to Web purists.  </rr>

--------------------------------------------------------------------------


WWW HTML STYLE GUIDE RECOMMENDATIONS		- Robert Raisch
						  O'Reilly & Associates
						  02 June 1993


Need
----

	There is a need within the WWW to be able to specify rendering
specific information along with the content tagging in a WWW document.
It is not appropriate to use HTML for this purpose, since one of the 
first principles of HTML is to encode objects within a document, not how 
they might be rendered in a particular environment.


Executive Summary -- The Short Form
-----------------------------------

	o	HTML documents would include a LINK STYLE tag which would 
		point to a stylesheet associated with the current
		document.

	o	Stylesheet literate browsers or renderers would use this
		tag to retrieve the actual stylesheet.

	o	Multiple stylesheets could be used per document to include
		stylistic changes.  Once a new stylesheet was loaded it
		would hide, not overwrite, the previous stylesheet.  The
		previous stylesheet would become visible once an empty
		LINK STYLE tag was encountered.

	o	Stylesheets are defined in a easy to parse, compact form
		to minimize the time required to retrieve and interpret
		them.

	o	Styles are suggestions or hints about behavior, not rules.



What we're doing here
---------------------

	This document is an attempt to codify those rendering aspects
which would be most useful in the specification of an HTML object.  This is
not meant to be an exhaustive list of rendering possibilities, nor is it 
a set of "rules set in stone" which must be obeyed.  Rather, this is really 
a set of HINTS or SUGGESTIONS to the renderer which might be used to display 
particular HTML objects in the fashion the author of a document originally 
intended.

	It is suggested that renderers which cannot adhere to some style
specified in this document might make an attempt to remain true to the
spirit of the author's original intent.  (Few renderers short of a true
X-terminal will be able to implement the full set of styles defined here.)

	An example of this might be the use of a 'o' (small-oh) to represent 
the 'round mark', or the interpretation of a color style specifying red on 
white characters as a "reverse video" or "blinking" attribute on terminals 
which do not support color.

	
The Styles
----------

	The styles defined specify the recommended behavior of HTML objects
in terms of:

	Category			Style Name
	-----------------------		----------
	character rendering		font
	object justification		justify
	page layout			column
	break behavior			break
	special marks			mark
	vertical object layout		vert
	horizontal object layout	indent
	links contained in objects	link


	Each style has a number of arguments or attributes which can be
specified per HTML object, and in the general case, as a default for all
HTML objects which are not further refined.


Stylesheet Identification 
-------------------------

	HTML specifies a header element called <LINK> which can be used for a
wide variety of purposes.  I suggest that the following form be followed:

	<LINK STYLE={URL}>

	It is expected that stylesheet literate browsers would retrieve the
stylesheet from it's URL, and use the information contained therein to make
appropriate rendering decisions.  (See Appendix II and III)



-----------------------------------------------------------------------------
 Definition of Recommended Styles, Attributes and Values
-----------------------------------------------------------------------------

font(family,spacing,size,weight,slant,foreground,background,line,longname)(fo) 

	Describes the characteristics of character representation.

(fa)	family= 	FAMILY  (ti,he,sy,ty)			 DEFAULT:ti

		Describes the 'subjective' style of a font.  This is not
		meant as a font name, per se.  Rather it is a suggestion 
		of a particular style of character representation.
		Recommended values are: 

			times,		-- in the style of Serif Times Roman
			helvetica, 	-- in the style of Sans Serif Helvetica
			system, 	-- default system font style
			typewriter	-- default "tty" font style

(sp)	spacing=	SPACING	(mo,pr)				 DEFAULT:mo

		Describes the intra-character spacing rule for a particular
		character representation.  Recommended values are:

			monospaced, 	-- each character takes up same space
			proportional	-- each character takes up diff space

(si)	size=		UNITS 	point size 			 DEFAULT:14

		Describes the size of the character representation in
		general UNITS, which could be interpreted as a typographic
		'point' size.  Recommended values are: 1-n

(we)	weight=		WEIGHT  (ul,li,me,de,bo)		 DEFAULT:me

		Describes the general weight of a character representation
		in the following recommended terms:

			ultralight, 	-- lightest
			light, 		-- lighter than "normal"
			medium, 	-- "normal" weight
			demibold, 	-- heavier than "normal"
			bold		-- heaviest

(sl)	slant=		SLANT   (ro,it,ob)			 DEFAULT:ro

		Describes the slant or angle of a character representation
		in the following terms:

			roman,		- normal upright representation
			italic,		- forward inclination
			oblique		- backward inclination (???)

(fo)	foreground=	COLOR					 DEFAULT:''

		Describes the recommended foreground color representation
		for a character.  Colors are specified as 'inherit', text
		names, (eg. black, white, magenta), or as RGB color 
		values in hexidecimal, (eg. 0x000000, 0xffffff, 0xff00ff)
		
(ba)	background=	COLOR					 DEFAULT:''

		Describes the recommended background color representation
                for a character.  Colors are specified as 'inherit', text
                names, (eg. black, white, magenta), or as RGB color 
                values in hexidecimal, (eg. 0x000000, 0xffffff, 0xff00ff)

(li)	line=		LINE    (no,un,th,ov)			 DEFAULT:no

		Describes the recommended representation of attendant 
		lines in the character style.  Recommended values are:

			none,		-- no line highlighting object
			under,		-- line under object (underline)
			through,	-- line through object (strikeout)
			over		-- line over object (overline)

(nu)	number=		UNITS	number of lines			 DEFAULT:1

		Describes the recommended number of attendant lines in
		the character style.  Recommended values are: 1-n

(lo)	longname=	STR	platform specific font name	 DEFAULT:''

		Describes, in a platform specific fashion, the recommended
		font name for a character representation.  A possible 
		value might be:

		-adobe-courier-bold-r-normal--0-190-75-75-m-110-iso8859-1

-----------------------------------------------------------------------------

justify(style,hyphen,kern) (ju)

	Describes the characteristics of character and line justification.

(st)	style=		JUST style of justification (no,le,ce,ri,fu) DEFAULT:le

		Describes the recommended justification of an object.
		Recommended values are:

			none, 		-- no justification (PRE)
			left, 		-- justify object to the left
			center, 	-- center object
			right, 		-- justify object to the right
			full		-- fully justify object

(hy)	hyphen		BOOL words can be hyphenated if possible DEFAULT:0

		Describes the recommendation that words which cross line
		boundaries may be hyphenated to better represent the 
		object.  Recommended values are either:

			 FALSE (0) or TRUE (not FALSE)

(ke)	kern		BOOL words can be kerned if possible     DEFAULT:0

		Describes the recommendation that characters may be kerned
		to better represent the object.  Recommended values are 
		either: 

			FALSE (0) or TRUE (not FALSE)

-----------------------------------------------------------------------------

column(num) (co)

	Describes the characteristics of columnar layout.

(nu)	num=		UNITS	number of columns to display	 DEFAULT:1

		Describes the maximal number of legal columns.  Recommended
		values are:  1-n

(wi)	width=		UNITS	width of a column		 DEFAULT:0

		Describes the maximal number of UNITS per column. In the
		case of a text object, UNITS might represent characters,
		while in the context of a graphical object, UNITS could
		represent picture elements (pixels.)  Recommended values
		are: 1-n

-----------------------------------------------------------------------------

break(location,object) (br)

	Describes the suggested behavior of an object in terms of it's
	"breakability."  (Break in the sense that the current object is
	broken, and the cursor or point of attention returns to the left-
	most point of reference.)

(st)	style=		BREAK	how to break (be, af)		 DEFAULT:af

		Describes the recommended style of breakage for the
		object.  Recommended values are:

			before,		-- break appears before object
			after		-- break appears after object

(ob)	object=		OBJ	what to break (no,it,li,ch)	 DEFAULT:no

		Describes the recommended element of the object upon
		which to break.  (For example, paragraphs traditionally
		break upon the paragraph itself (item), while titles
		or headers break upon each line.  Recommended values 
		are:  

			none, 		-- do not break
			item, 		-- break on the object itself
			line, 		-- break on each logical line
			character	-- break on each character
						(included for completeness)

-----------------------------------------------------------------------------

mark(object,preceed,before,replace,succeed,after) (ma)

	Describes a mark or signal which can appear with an object.

	(NOTE: a "mark" can be specified in a number of ways.  Recommended
	values for the mark are:
		none,		-- no not mark
		{string},	-- text which marks the object
		{icon},		-- a graphical element or icon
		arabic,		-- arabic numerals
		alpha,		-- alphabetic numerals
		roman,		-- roman numerals
		vert,		-- vertical bar
		horz,		-- horizontal bar
		round,		-- bullet or circle
		square,		-- square mark
		check,		-- check mark
		star,		-- star or asterix
		north,		-- northward pointing arrow
		south,		-- southward pointing arrow
		east,		-- eastward pointing arrow
		west		-- westward pointing arrow

	It is recommended that numeric marks (arabic,alpha,roman) be
	incremented based on each instance of a particular object, eg.
	the first instance of an object with the 'alpha' style of mark
	could be marked with 'A', and the succeeding elements markes
	with 'B', 'C', 'D', etc.  It is also recommended that upon a
	change of mark, eg. from alpha to roman, could reset the 
	current counter.
	)

(ob)	object=		OBJ	what to mark (no,it,li,ch)	 DEFAULT:no

		Describes what element within an object gets the mark.
		Recommended values are:

			none,			(as above)
			item,
			line,
			character
	
(pr)	preceed=	MARK	preceeding mark			 DEFAULT:no

		Describes the mark or signal which could appear before
		the previously mentioned element.

(be)	before=		UNITS	space btw mark and item		 DEFAULT:0

		Describes the recommended amount of space before an object 
		the mark appears.  (A UNIT takes on different interpretation
		depending on the context, textual or graphical.) Recommended
		values are: 1-n.


(re)	replace=	MARK	mark which replaces content	 DEFAULT:no

		Describes the mark or signal which could replace the 
		previously mentioned element.

(su)	succeed=	MARK	succeeding mark			 DEFAULT:no

		Describes the mark or signal which could appear after
		the previously mentioned element.

(af)	after=		UNITS	space btw item and mark		 DEFAULT:0

		Describes the recommended amount of space after an object 
		the mark appears.  (A UNIT takes on different interpretation
		depending on the context, textual or graphical.) Recommended
		values are: 1-n.

-----------------------------------------------------------------------------

vert(before,after,spacing,offset) (ve)

	Describes the characteristics of an object in terms of vertical
	geometry.

(be)	before=		UNITS	vertical space before object	 DEFAULT:0

		Describes the amount of space in UNITS before an object.
		(UNITS takes on different meaning depending on current
		context.  See "column.width")

(af)	after=		UNITS	vertical space after item	 DEFAULT:0

		Describes the amount of space in UNITS after an object.
		(UNITS takes on different meaning depending on current
		context.  See "column.width")

(le)	leading=	UNITS	vertical spacing between lines	 DEFAULT:0

		Describes the amount of space in UNITS between objects.
		(UNITS takes on different meaning depending on current
		context.  See "column.width")

(of)	offset=		UNITS	vertical spacing from baseline	 DEFAULT:0

		Describes the amount of space in UNITS between an object
		and the baseline.  (Allows supscripting and superscripting.)
		(UNITS takes on different meaning depending on current
		context.  See "column.width")


-----------------------------------------------------------------------------

indent(left,right,first) (in)

	Describes the characteristics of an object in terms of horizontal
	geography.

(le)	left=		UNITS	horizontal space before item	 DEFAULT:0

		Describes the amount of space, in UNITS, before or to the
		left of the object.

(ri)	right=		UNITS	horizontal space after item	 DEFAULT:0

		Describes the amount of space, in UNITS, after or to the
		right of the object.

(fi)	first=		UNITS	indent for object		 DEFAULT:0

		Describes the amount of space, in UNITS, before the first
		line of an object.


-----------------------------------------------------------------------------

link(location,mark,line,number,before,after,hide) (li)

	Describes the special characteristics of a link or selectable
	object.

(lo)	location=	TOKEN	(no,in,ri,le)			 DEFAULT:of

		Describes where a link might appear.  Recommended values
		are: 

			none,		-- suppress link marking
			inline,		-- mark links inline
			right,		-- mark links in right margin
			left,		-- mark links in left margin
			start,		-- collect links at start of object
			end		-- collect links at end of object

(ma)	mark=		MARK	mark to display as link		 DEFAULT:no

		Describes the mark to display, highlighting this link.
		(See mark previously for explanation of mark types.)

(li)	line=		LINE    (no,un,th,ov)			 DEFAULT:un

		Describes the line characteristics of a link.  Recommended
		values are: 

			none,		-- no line highlighting link
			under,		-- line under object (underline)
			through,	-- line through object (strikeout)
			over		-- line over object (overline)

(nu)	number=		UNITS	number of lines			 DEFAULT:1

		Describes the number of lines to use to highlight a link.
		Recommended values are: 1-n

(be)	before=		MARK	mark to display before link	 DEFAULT:no

		Describes the mark to display before the link.  (See mark
		previously for explanation of mark types.)

(af)	after=		MARK	mark to display after link	 DEFAULT:no

		Describes the mark to display after the link.  (See mark
		previously for explanation of mark types.)

(hi)	hide=		BOOL	hide link content		 DEFAULT:0

		Describes the intent to hide the content of a link.  This
		is included to handle the possibility of an object having
		a graphical mark which signifies a link where the actual
		textual component of the link (the text held between the <A>
		and it's matching </A>) is not intended to be displayed.  
		On a text-only display, the graphic might be ignored and 
		the text might be displayed in it's place. Recommended
		values are: 

			FALSE (0) and TRUE (not FALSE)

-----------------------------------------------------------------------------



APPENDIX I
EXAMPLE STYLESHEET FOR AN IMAGINARY HTML DOCUMENT
-----------------------------------------------------

# DEFAULT for all succeeding objects..

@DEFAULT fo(fa=ti,sp=pr,si=14,we=me,sl=ro,fo=in,bo=in,li=no,nu=1,fn='')
ju(st=le,hy=0,ke=0) co(nu=1,wi=80) br(lo=af,ob=it) 
ma(ob=it,pr=no,be=0,re=no,su=no,af=0) 
ve(be=0,af=0,sp=0,of=0) in(le=0,ri=0,fi=0)
li(lo=in,ma=no,li=un,nu=1,be=no,af=no,hi=0)

# TITLE object style (font size becomes 24)
@TITLE fo(si=24) 

# BODY object style (font family becomes helvetica, font size becomes 18)
@BODY fo(fa=he,si=18) 

# PARAGRAPH SEPERATOR object style (break after item, vertical space after =1)
@P br(lo=af,ob=it) ve(af=1)

# Headers
@H1 fo(si=32,we=bo) ve(be=1,af=2) @H2 fo(si=24,we=bo) ve(be=1,af=2)
@H3 fo(si=18,we=bo) ve(be=1,af=2) @H4 fo(si=16,we=bo) ve(be=1,af=2)
@H5 fo(si=14,we=bo) ve(be=1,af=2) @H6 fo(si=12,we=bo) ve(be=1,af=2)

# Some List Stuff
@UL in(le=5)
@LI ma(pr=ro,be=4) in(le=10,ri=10) 

# Standards
@B fo(we=bo) @I fo(sl=it) @U fo(li=un, nu=1)

# Anchors with some colour
@A fo(fo='yellow',ba='black')


-----------------------------------------------------------------------------

APPENDIX II
Stylesheet Layout and Parsing Considerations	--	(TECHNICAL DETAIL)
--------------------------------------------

	An example stylesheet follows the discussion of the various styles,
and details the recommended layout of a stylesheet.

	Each element of the stylesheet is uniquely marked and the name of 
each style and style attribute has been chosen to be unique to the first 
two letters, which makes parsing the style-sheet a simple task.

Parsing Rule #1:

	Lines which do not have as their first non-whitespace character
	either an '@' which signals the beginning of a new object definition 
	or an alphabetic [a-zA-Z], will be ignored to the end of the line.

Parsing Rule #2:

	Next we throw out all the newlines and scan the remaining buffer.
	An '@' (at-sign) signals the beginning of a new HTML object definition.

Parsing Rule #3:
	
	After the '@' and possible intervening whitespace, we expect the name 
	of an HTML object (eg. TITLE, H1, B, STRONG, etc.)

Parsing Rule #4:

	After the name, and intervening whitespace, we expect at least two
	characters which signal the beginning of a style. Legal values are:
		fo, ju, co, br, ma, ve, in, li

Parsing Rule #5:

	After the two character style specifier, scan to the '(' (open-paren)
	and ignore intervening data or whitespace.

... (I think you get the idea, but I'll fill this in later if necessary)

-----------------------------------------------------------------------------


APPENDIX III
Use of Stylistic Hints or Suggestions - Typical Scenario -- (MUY TECHNICAL!!)
--------------------------------------------------------

	A renderer which understands the <LINK STYLE> tag would use the URL
to retrieve the stylesheet, and run it through the WWW style library,
(libStyle.a -- to be supplied, currently in development.)

	Once the stylesheet has been loaded, when an HTML element is 
encountered within the document, the renderer has the option of calling the
style library, asking for advice on how to render the specific element.

For example:	(scans all styles and renderer sets attributes)

		***Renderer begins to scan document***

		***Renderer recognizes <LINK STYLE={URL}>***

		  loadStyleSheet( {URL});

		***Renderer sees a <TITLE> tag in the document***

		  current = firstStyle( styles = queryStyleSheet( TITLE));

		  while( current) {

		    switch( styleName( current)) {

		      case FONT: {
			while( nextAttr( current)) {

			  switch( attr) {

			    case FAMILY:
			      switch( attrValue(attr)) {

				case TIMES:
					***Renderer decides what to do here***
				case HELVETICA:
				case SYSTEM:
				case TYPEWRITER:
				default:
			      }
			    case SPACING:
			    case SIZE:
			    case WEIGHT:
			    case SLANT:
			    case FOREGROUND:
			    case BACKGROUND:  
			    case LINE:
			    case LONGNAME:
			    default:
			  }
			}
			break;
		      }
		      case JUSTIFY:
			break;
		      case COLUMNS:
			break;
		      case BREAK:
			break;
		      case MARK:
			break;
		      case VERTICAL:
			break;
		      case INDENT:
			break;
		      case LINK:
			break;
		      default:
			***Ignore -- Illegal style***
		    }
		    current = nextStyle( styles);
		  }


Another example:	(renderer sets attributes only for styles needed)

		***Renderer begins to scan document***

		***Renderer recognizes <LINK STYLE={URL}>***

		  loadStyleSheet( {URL});

		***Renderer sees a <TITLE> tag in the document***

			switch( getValue(TITLE, FONT, FAMILY)) {
			*** renderer decides what to do here***
				case UNKNOWN:	
				case TIMES:
				case HELVETICA:
				case SYSTEM:
				case TYPEWRITER:
			}

		***Renderer sees a <H1> tag in the document***

			switch( getValue( H1, BREAK, STYLE)) {
				case UNKNOWN:
				case BEFORE:
				case AFTER:
			}

		  etc.