Converted from OOImpress: Style for the Web: CSS and XSLT

1.   Style for the Web: CSS and XSLT

Henry S. Thompson HCRC Language Technology Group

Division of Informatics

University of Edinburgh

© 2003 Henry S. Thompson

2.   Overview of the material

Why a style language?

Style control for HTML

Two approaches to style for XML:

When you see this, it means there’s accompanying information in the Additional Notes

2

3.   Why a style language?

Separating form from content

Separating structure from appearance

Single source, multiple delivery media

4.   Three stages on the way

Document Compilers:  ASCII text with formatting instructions and body text intermixed

WYSIWYG Word Processors:  Out-of-band formatting instructions change appearance on-screen; proprietary file formats.

(Semi-)Structured Markup:  Markup has either intrinsic or extrinsic rendering consequences.

5.   Is this progress?

The old document compilers

6.   Is this progress?, cont'd

The WYSIWYG systems

7.   SGML . . .

SGML solved the proprietary format problem

But for a long time there was no standard way of formatting SGML documents for printing or viewing

8.   . . . and HTML

So HTML (nearly/post-hoc an SGML application), by mandating a rendering semantics for all its semi-structural markup, filled a real need.

But it was

9.   Three Problems; Three Solutions:  Electronic Style!

9

Style standard for SGML?

Customise HTML page appearance?

Extend HTML tag-set and control style?

Style for XML, London 1998-11-25
Technology Appraisals
Henry S. Thompson

10.   Cascading Style Sheets

Level 1 Accepted Recommendation per W3C, December 1996

Level 2 Accepted Recommendation, May 1998

Addresses the problems of:

Initially driven by the need for site designers to differentiate the appearance of their pages from one another

Focus accordingly is on controlling the colour, size and shape of regions and fonts

11.   A pretty CSS example

12.   CSS

HTML example:

<HTML>
<HEAD><TITLE>Example file</TITLE></HEAD>
<BODY>
<H2>Example text</H2>
<P>Here is some text. It's a paragraph of text in fact. But with very little content. Pretty boring if you ask me.
<P>
And some more text. 
Again with very little content. All marked up
in vanilla HTML.
</BODY></HTML>

13.  

14.   CSS

You can change the way HTML tags are rendered:

15.  

16.   CSS rules

CSS style rules associate properties with elements in your documents which match selectors

The basic structure of a rule looks like this:

selector[, selector ...] {pname: pvalue[;  pname: pvalue ...]}

Simple examples:

verbatim {white-space: pre}

H1 {text-align: center;  font-variant: small-caps}

The first would provide style for an XML doc't

The second would change HTML's H1

5

17.   CSS: Cascading Style Sheets

Customising HTML

Formatting XML

18.   Associating rules with documents

Contents of STYLE element in the HTML header

Destination of an appropriate LINK element

In STYLE attributes on any HTML element

5

6

19.   CSS selectors

Rules can have one or more selectors, separated with commas

Simple names select elements by name

In addition to element type names, other selector syntax includes

20.   CSS selectors:  Vertical context

Sometimes you need context-sensitive selectors

For depth-sensitive rendering

OL {list-style-type: lower-alpha}

OL OL {list-style-type: lower-roman}

For context-appropriate rendering

H1 {font-weight: bold;font-size: large}

H2 {font-weight: bold;font-style: italic}

H3 {font-style: italic}

H2 EM,H3 EM {font-style: normal}

Note that in the last rule we have two selectors, separated by commas, sharing the same result

21.   CSS boxes

CSS uses a nested-boxes rendering model, and every block element is rendered into a box

Boxes all have margins, borders and padding (outside in)

All four margins and paddings (left-,right-, top-, bottom-) have width properties, and a shorthand property for setting them all together

22.   CSS borders

Borders, in addition to widths, have colours and styles, plus shorthand properties for various combinations

There are also float and clear properties to allow a modest amount of displacement and flow-around.

CSS2 goes a lot further with this

23.   CSS box example

P { margin: 3ex; border-width: thin;

 border-style: solid;

 border-left: double;

 text-align: justify;

 border-color: blue; padding: 2ex 4ex}

gives the following for a sample paragraph

24.   CSS property values

Some are symbolic, e.g. font-style: italic

URLs appear in a few places, e.g. background-image: url(http://www...)

Most are

25.   The 'Cascade' in CSS

What happens when there is more than one rule which provides a value for a property on a given element?

The highest priority value assignment wins

When no assignment is found, the value is either inherited or defaulted

This explains why our original H1 example was bold

26.   CSS priority

A number of things contribute to determining priority

27.   CSS cascade example

The following are in increasing order of priority

LI

UL LI

UL OL LI

LI.special

OL LI.special

#hotone

28.   CSS for XML for real

In principle, it's easy

In practice

Style sheet linkage is via a PI

8

29.   CSS: Summary

30.   What is DSSSL?

An ISO standard (ISO 10179:1996)

A style language

A transformation language

A hopeless acronym

A lost opportunity!

31.   XSL: Extensible Stylesheet Language

32.   XSL: Extensible Stylesheet Language

Main properties

33.   What is XSL for?

Portable standard style specification

Single source documents, multiple delivery media

Multiple document types, single house style

Just as much complexity as you need

34.   What is XSL not for?

Controlling filling and line breaking:

Page or line fidelity:

Carefully crafted page layout:

User interaction:

35.   XSLT process architecture

CSS takes document tree and decorates it with formatting properties

XSL takes a document tree and builds a new document tree which it then decorates

36.   XSLT Transformations

XSLT style sheet: template rules

XSLT processor

37.   XSLT Transformations

From XML to XML

38.   XSLT Processing

Three places it can happen

39.   Key style concepts

Modular

Localised

Scoped

Unbiased

40.   Process architecture

CSS takes a document tree and decorates it with formatting properties

XSLT takes a (source) document tree and builds a new (result) document tree

If the result tree's vocabulary defines appearance, then XSLT can be a style language

41.   XSLT is XML

No parentheses!

XSLT is notated with XML element types

DSSSL semantics without DSSSL syntax

42.   Template rules

The main component of an XSL stylesheet is the template rule

Each template rule contains

43.   Simple rule example

Restriction on
match context
The el't type
to match

 <xsl:template match='div/title'>

 <fo:block font-weight='bold'>

 <xsl:apply-templates/>

 </fo:block>

</xsl:template>

Pattern

The for- matting object
to be created
The content of the formatting object:
use the subordinate results

div

Block [f-w: bold]

title

. . .

T

h

e

s

T h e  s . . .

44.   XSL and CSS

We could try translate our example into CSS as follows:

div title { font-weight: bold }

But that would actually be wrong:

XSL does not require a one-to-one relation between source and destination

45.   Richer patterns

XSL can restrict matches based on

These are expressed in the form of path expressions, which are shared with the draft XPointer proposal

The common part is called XPath

46.   XPath patterns

/ for (root's) children

// for (root's) descendants

.. for parent

name for matching elements

@name for matching attributes

[. . .] for conditions

12

47.   Specificity

With all these pattern variants, what happens if two rules match?

Drawing on both DSSSL and CSS, there are a set of precedence rules

Basically, the richer the pattern, the higher precedence

If all else fails, there is a numeric priority attribute

48.   Iconic actions

The 'action' part of a rule isn't much like an action at all

It's more like a picture of what you want in the way of formatting objects

Nesting is specified directly

So you can build up quite detailed formatting object structures

The special xsl:apply-templates element type determines where the formatting objects resulting from processing the children of the matched node should be plugged in

49.   Action example

This 'action' builds a rich result structure  <p>  <span style='font-size: 150%'>  <xsl:value-of  select='@name'/>  <xsl:text>. . . .</xsl:text>  </span>  <em>  <xsl:apply-templates/>  </em>  </p>

50.   Plugging in results

<x:templ match='demo'> <HTML>  <BODY>   <x:apply-templates/>  </BODY> </HTML>
<x:templ match='para'> <P>  <x:apply-templates/> </P>

HTML

BODY

demo

P

P

para

para

. . .

. . .

T

h

e

f

T

h

e

s

T h e  f . . .

T h e  s . . .

51.   Combining XSLT and CSS

Add a <style> element to the template for the root

52.   Selection

You may not always want to just invoke processing on a node's children in the ordinary way

You can supply a select attribute on xsl:apply-templates to specify what you want processed

If all you want is the text content of an element or attribute as such

53.   Example of select

 <xsl:template match='/'> <HTML>  <HEAD>  <TITLE>  <xsl:value-of  select='doc/title'/>  </TITLE>  </HEAD>  <BODY>  <xsl:apply-templates/>  </BODY> </HTML> </xsl:template>

14

54.   Reordering using select

You may not even want material to appear in the output in the same order it appears in the source, e.g. if the source was derived from a database

select can be used to reorder by pulling out first one child type, then another, etc.

 <xsl:apply-templates select='a'/> <xsl:apply-templates select='b'/>

All a's will end up before all b's, regardless of where they started

xsl:sort provides more detailed control

55.   Defaults

XSL has two default rules, similar to DSSSL's

15

56.   XSLT for Transformation as such

XML to XML can be very useful

Sophisticated applications can be built by combining multiple XSLT-implemented transformations

57.   The identity transformation

The core of every serious transformation

<xsl:template  match="@*|*|comment()|processing-  instruction()"> <xsl:copy>  <xsl:apply-templates  select="@*|node()"/> </xsl:copy> </xsl:template>

58.   Variables

XSLT is a pure functional language

You can bind variables

 <xsl:variable name="currencySymbol">  &#163; </xsl:variable> <xsl:variable name="title"  select="/catalog/title"/>

And access them

 <xsl:value-of  select="$currencySymbol"/>

59.   Combining several documents

The document function allows access within a stylesheet to named other documents

If bound to a variable, can then be used as the starting point for a search

 <xsl:variable name="catalog"  select="document('exa15.xml')/*"/> . . . <xsl:value-of select= "$catalog/entry[number='E102']/price"/>

60.   Implementations of XSL

James Clark has implemented most of XSLT

IE5+ with the MSXML4 product (http://msdn.microsoft.com/xml/) supports the whole language

Others are implementing subsets of the formatting semantics

Usage is increasing very rapidly

61.   Recall: XSL Transformations

Three places it can happen