Push and Pull Models
In HTML, there is only one
way of applying styles with an external stylesheet, and that is by using Cascading Style Sheets (CSS). In this case, the structure of the output is usually determined by the
source HTML, while the CSS stylesheet determines the appearance of each item
within that structure. There are exceptions to this – some aspects of CSS2,
such as tables and the use of absolute positioning, allow the stylesheet to
control the structure of the output. Unfortunately, CSS2 is not well supported
by browsers, and absolute positioning can give a display that is very dependent
on the size of the browser window.
The CSS model can be
referred to as a push model. The source document controls the format, while
the stylesheet controls the appearance within that structure. An alternative
model is a pull model, where the stylesheet provides the structure, and the XML document acts
as a data source. As we will see in a moment, XSLT can support both push and
pull models, each being appropriate in different circumstances.
The Push Model with CSS
This extract from a Shakespearean play (HamletExtract.xml)
will be used in the following samples to illustrate the push model of
stylesheet design:
<?xml version="1.0"?>
<EXTRACT>
<ACT><TITLE>ACT I</TITLE>
<SCENE><TITLE>SCENE I. Elsinore. A
platform before the
castle.</TITLE>
<STAGEDIR>FRANCISCO at his post. Enter
to him BERNARDO</STAGEDIR>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>Who's there?</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>Nay,
answer me: stand, and unfold yourself.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>Long
live the king!</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>Bernardo?</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>He.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>You
come most carefully upon your hour.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>'Tis
now struck twelve; get thee to bed, Francisco.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>For
this relief much thanks: 'tis bitter cold,</LINE>
<LINE>And I
am sick at heart.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>Have
you had quiet guard?</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>Not a
mouse stirring.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>BERNARDO</SPEAKER>
<LINE>Well,
good night.</LINE>
<LINE>If you
do meet Horatio and Marcellus,</LINE>
<LINE>The
rivals of my watch, bid them make haste.</LINE>
</SPEECH>
<SPEECH>
<SPEAKER>FRANCISCO</SPEAKER>
<LINE>I
think I hear them. Stand, ho! Who's there?</LINE>
</SPEECH>
</SCENE>
</ACT>
</EXTRACT>
Jon Bosak has marked up all
of Shakespeare's plays in XML. An index to them can be found at http://www.andrew.cmu.edu/user/akj/shakespeare
and a zip file to download them all at http://metalab.unc.edu/bosak/xml/eg/shaks200.zip.
With a play such as this, we will generally want our display
to follow the structure of the source. We can style the XML with CSS in just
the same way as we would with HTML. All we have to do is associate styles with
element names as we have here in Hamlet.css:
ACT TITLE {
display:block;
font-size:24pt;
font-weight:bold;
margin-bottom:12pt;
}
SCENE TITLE {
display:block;
font-size:16pt;
margin-bottom:6pt;
}
STAGEDIR {
display:block;
font-style:italic;
margin-top:6pt;
margin-bottom:6pt;
}
SPEAKER {
display:block;
}
LINE {
display:block;
margin-left:2em;
}
If we add a line to reference the CSS stylesheet near the
top of the file HamletExtract.xml to create HamletCss.xml:
<?xml version="1.0"?>
<?xml-stylesheet
type="text/css" href="Hamlet.css"?>
<EXTRACT>
<ACT><TITLE>ACT I</TITLE>
then we can view the file in IE5 or Netscape 6. This is the
result in IE5:
As you can see, the order of the text in the display is the
same as that in the XML source, which is what we mean by a push model.
If you are used to using CSS with HTML, you might have
noticed in particular the statement:
within each style rule. This is used here to ensure that
each of the elements starts on a new line. The alternatives are display:inline
and display:none.
You probably don't use these in HTML, as HTML contains elements such as <DIV>
and <P>
that are implicitly block elements, while others, such as <I>
and <B>,
are implicitly inline elements. However, with XML, elements do not contain
implicit display features like this, so the line is essential. I will not
discuss the rest of the CSS here, since it is covered in more detail in Chapter
9.
