What this workshop will cover
- Why use CSS to present XML?
- How to style XML with CSS
-
Caveats: dangers and drawbacks
==>
Conventional approaches to presenting XML
-
XML to HTML through script (PERL, XMLScript, PHP etc.)
-
XML to (X)HTML through XSLT
-
XML to PDF through XSLT and XSL:FO
- These all involve changing the XML into something else.
- Other output is usually styled with CSS anyway.
-
Why not just use XML+CSS?
==>
Browsers already support XML+CSS
- Mozilla, Firefox, Opera, Safari, Camino, K-Meleon, Konqueror and Internet Explorer support styling XML with CSS.
- You'll notice IE comes last...
-
...because its CSS support is pathetic.
==>
Linking XML and CSS
- Attach a CSS stylesheet to your document by using an xml-stylesheet processing instruction:
-
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>==>
A CSS Ruleset
-
p{
font-size: 12pt;
text-align: justify;
}==>
Selectors we will use
- div{...} (type selector)
- div p{...} (descendant selector)
- title[level="m"]{...} (attribute selector)
- quote:before{...} and quote:after{...} (pseudo-selectors)
-
More details:
http://www.w3.org/TR/CSS21/selector.html==>
Properties we will use
- display: block | inline | none; (hiding and showing elements)
- width: 60%; (sizing elements)
- margin-top: 1em; (space around elements)
- text-align: left | right | center | justify;
- font-size: 150%;
- font-family: georgia, "times new roman", serif;
- font-style: italic; font-weight: bold;
-
color: black;
background-color: white;
==>
Steps in building a stylesheet
- 1. Specify which elements to hide.
- 2. Specify which elements are blocks.
- 3. Set margins on block elements.
- 4. Set text alignment on block elements.
- 5. Set font size on block elements.
-
6. Style inline elements.
==>
Caveats, dangers and limitations
- No interactivity (without script)
- Print support in browsers is rather flaky
- Images can't be displayed (without using the XHTML namespace or scripting hacks)
-
CSS selectors are not as flexible as XPath
==>
Recommended uses
- Static display
-
Proofing
==>
Alternate stylesheets for proofing
-
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet title="Full view" href="gowers_full.css" type="text/css" ?>
<?xml-stylesheet title="Names only" href="names_only.css" alternate="true" type="text/css" ?>
<?xml-stylesheet title="teiHeader only" href="teiheader_only.css" alternate="true" type="text/css" ?> -
See this example.
==>
Beyond CSS: Using JavaScript
-
Add a link to a JavaScript file:
<script xmlns="http://www.w3.org/1999/xhtml type="application/ecmascript" src="xml_events.js"></script> -
Run JavaScript code when the XML file loads:
window.addEventListener('load', doSetup, false); -
Use this code to attach events to XML elements and display graphics.
See this example. -
Using this functionality, and E4X, you can add many sophisticated features.
==>
References
- W3Schools on XML and CSS (Basic)
- W3C on XML and CSS (slightly more advanced)
-
This presentation and associated materials
==>