SIMPLE STYLE SHEETS
FOR SGML & HTML
ON THE WEB

World-Wide Web conference spring 1995
Developer's day --- 14 April 1995
Darmstadt

Context: Argo browser

• HTML viewer applet
• inline images handled by different applets
• upgrading to new formats is cheap

The HTML applet

1. real-time ``live'' formatting

   Seems to be the trend: Netscape, HotJava, Arena

2. implementation:

   FormattedText widget --
   SimpleSGML widget --
   HTML2 widget

   (widgets will become public in a few days)

Widget hierarchy (1)

• list of ``chunks'' (atomic units): words, hor. spaces (fixed or strechable), vert. spaces, parshapes, inline widgets
• 3 ``tracks'': main, left floats, right floats
• NB. nothing specific to SGML/HTML

• parser for simple SGML (``canonical form'', see Sperberg-McQueen & Goldstein)
• parser for stylesheets (actually Xlib/Xrm does most of the work)
• uses stack of styles, produces sequence of ``chunks''

Widget hierarchy (2)

• overrides some methods:
  • heuristic rules for omitted tags
  • more entities (WWW icon entities) [nyi]
  • forms (as inline objects) [nyi]
• currently accepts a mixture of HTML2 and HTML3
• NB. does no parsing

Assumptions (1)

1. Addressable units
   • whole elements only
   • by context or by ID
2. style sheet is static (declarative)
3. style sheet consists of rules; rules consist of: selector + property + value; value may be an expression
4. attributes not in selector, but in expression

Assumptions (2)

1. text is rendered roughly in the order it is received (exception: tables, math)
2. only appearrance specified, not interaction
3. SGML, not just HTML

Stream-based SS vs DSSSL

• Complementary!
• DSSSL needed for more complex layouts (re-arranging of text, columns)
• 2 (or more) links in a document?
  <LINK HREF="..." REL=STYLE NOTATION="...DSSSL...">
  <LINK HREF="..." REL=STYLE NOTATION="...W3O style...">

User preferences

Select 1, 2 or all 3

Combined just like X resources (override, replace, merge)

• pro:
  • flexible
  • already widely used
• con:
  • not always intuitive
  • maybe too flexible?

Style properties (1)

empty (*IMG.empty: true)

• needed by parser (omitted end tag)

emphasis (*STRONG.emphasis: 2)

• level of emphasis (at least 0, 1 2)
• allows browser to choose best method
• is this needed?

Style properties (2)

background (*A.textbackground: yellow)

• behind text only
• looks funny for longer, unjustified text
• maybe need separate background for paragraphs?

prebreak, postbreak (*P.postbreak: 0.0)

• break line, then insert vert. whitespace
• measured in ``standard line heights''
• maybe add units (mm, ex, pixels)?

Style properties (3)

leftindent, rightindent (*BQ.leftindent: 4.0)

• added to inherited margin
• measured in ``standard em'' (rel. to default font)
• measured from edge, discarding floats

track (*FIG.track: !ALIGN)

• 3 tracks: main, left/right float areas
• do we need more? (footnote, running head)
• NB ``title'' is not a track

Style properties (4)

minimized (*FOOTNOTE.minimized: true)

• contents are ``folded'' or put into pop-up
• different from hide

keepwidth (*CAPTION.keepwidth: true)

• tries to determine width of float from previous line
• not completely satisfactory: caption cannot precede figure

Style properties (5)

id (*id: !ID)

• assigns ID to an element
• usually taken from attribute
• allows assigning styles to individual element instances

insertbefore, insertafter (*CENTER.insertbefore: <DIV ALIGN=CENTER>)

• insert arbitrary text
• can be used to define new tags

math

• is currently unspecified :-(

Expressions

IDs

*@par12*EM.bold: true

an EM within an elt. with ID = ``par12''

attributes

*track: !ALIGN

value taken from ALIGN attribute

conditional

*flush: @ifmatch(!CLEAR, "[Ff].*", "both", !CLEAR)

2nd arg. is reg. exp.

More general expressions needed (in particular concatenation)

External influences

Cf. Cascading stylesheets and DSSSL (``length spec'')

• width of window
• age of document
• number of available colours
• user's history
• ...

Currently none specified

Odds & ends

• breakable, but invisible (cf. &shy;)
• in Unicode, but not in ISO :-(
• replaces Netscape's <WBR>

External vs in-line style sheets

• <LINK> vs <STYLE>
• priority?
• in-line handy for one-time styles

Other output formats

• Postscript, TeX, plain text,...