XML and CSS : Structured Markup with Display Semantics

You are here: irt.org | Articles | Extensible Markup Language (XML) | XML and CSS : Structured Markup with Display Semantics

Published on: Sunday 2nd January 2000 By: Pankaj Kamthan

• Introduction
  • Advantages of Authoring XML Documents with CSS
• Authoring XML Documents with CSS
  • Authoring Software
  • Authoring Approaches
  • Stylesheet Types
  • Associating CSS Stylesheets with XML
• Rendering XML Documents with CSS
• Applications
  • XML Application Classification
  • An XML Application without a DTD
  • Extensible Hypertext Markup
  • Mathematical Markup
  • Graphical Markup
  • Remarks
• Limitations of CSS
  • Overoptimism : Handle CSS with care
  • CSS Design
• CSS Vs. XSL-FS as the XML Style Language of Choice
  • Remarks
• Conclusion
• References

Introduction

In the last year, XML has emerged as a "universal" data format in a variety of application areas, such as physical sciences, engineering, and electronic commerce. Optimal presentation of such data to the user in a desired manner then is an important issue. One way of doing that is to use the traditional CSS approach by taking advantage of CSS support for XML in CSS, Level 2 (CSS2).

The objective of this article is to discuss the viability of CSS in decorating XML documents. We assume that the reader is familiar with the basics of XML, CSS and [X]HTML. For pointers to tutorial introductions to these languages, see the list of references.

Advantages of Authoring XML Documents with CSS

Style sheets are an essential step in XML deployment, as without them there is no way to define the presentation of XML documents which use new schemas.
- Tim Berners-Lee, Press Release of Associating Style Sheets with XML documents

• Presentability. This is the most obvious benefit; the stylesheets are used to style or "decorate" the document.
• Servability. CSS (or some type of style sheet mechanism) is, as the above quote points out, a requisite for browsing XML documents on the Web. However, XML is a meta-language and authors can construct their own elements (and/or DTDs). The freedom in XML of authors creating their own tags comes with a price: XML tag names have no predefined semantics. This results in all sorts of ambiguities: an <img> could mean an image, or an imaginary number; even the seemingly obvious <manual> could mean a technical book or a form of human labour. (In an informal language (such as English), we (humans) know the difference due to the "context." However, such semantical distinctions are not possible in formal languages being processed by machines.) In such a case, a user agent would not know how to "display" elements of these "home-brewed" languages. This is where the use of a stylesheet language such as CSS becomes necessary, which provides the display semantics to an XMl document..
• Accessibility. Use of CSS in the document makes it accessible, particularly with people with visual or aural disability. There are various accessibility features of CSS.

Authoring XML Documents with CSS

Authoring Software

XML Spy is a professional validating XML editor that provides three integrated views on XML documents: an enhanced grid view for structured display and editing, a low-level source view with syntax coloring, and an integrated browser view that supports CSS stylesheets. Among other features, it includes Unicode and character-set encoding as well as support for XHTML and XML Namespaces. Another useful feature of XML Spy is that a DTD may be edited simultaneously with the XML document that references it. Here is a screenshot of an example that we will discuss later:

XMetaL is another notable environment for authoring XML documents with CSS. These visual environments simplify the editing process (and thus reducing the burden on the author) by including required directives or tags. For simple documents, any text-editor (such as Emacs) can be used (assuming that the author is well-versed in XML as well as CSS).

Authoring Approaches

The use of CSS in XML involves the following steps:

1. Authoring the XML document.
2. Authoring the CSS style sheet.
3. Associating the CSS style sheet with the XML document.
4. Rendering the XML document associated with the CSS style sheet.

Stylesheet Types

There are two types of stylesheets possible with XML documents:

1. Internal Stylesheets. These are not possible directly, as the XML document will not understand what the <style> tag means. However, using for example an XHTML namespace, the CSS style instructions can be embedded in an XML document. See the section Extensible Hypertext Markup for an example.
2. External Stylesheets. These are possible in the same manner as with HTML, so we will not discuss this issue any further.

Associating CSS Stylesheets with XML

Although the XML specification has been in existence since February 1998 and the CSS (CSS2) specification since May 1998, the mechanism to associate a stylesheet with an XML document was formalized only in June 1999.

The association consists of inserting the XML processing instruction at the top of the document, before the root element of the XML document and after the XML prolog. The processing instruction has two required attributes type and href which respectively specify the type of stylesheet (Internet Media Type text/css) and its address (path). An example is:

<?xml-stylesheet type="text/css" href="foo.css"?>

Rendering XML Documents with CSS

At the time of this writing (second week of October 1999), rendering support for XML/CSS is in a state of flux. Browsers that support the combination of XML and CSS are:

• Microsoft Internet Explorer 5. The CSS2 support is incomplete but rendering of XML documents with CSS2 is fairly stable. The caveats are: it uses an obsolete version to associate stylesheets, the document is required to use "html" as the namespace name prefix if HTML elements/attributes are being used, XML entity expansion has problems and printing can lead to unpredictable results.
• Mozilla (Netscape Communicator 5) in the beta releases (called "milestones"). The CSS2 support in Mozilla is incomplete and rendering of XML documents with CSS2 is unstable. In progress is NGLayout, a native document format for Mozilla's graphics-rendering engine, which is able to format XML documents using external CSS stylesheets.
• ICEBrowser by ICESoft, which is currently in trial version. It allows displaying of MathML, an XML application for mathematical notations, with CSS2 stylesheets.
• Amaya which is a W3C test-bed browser. It also natively supports XHTML, an XML application that reformulates (or "XMLizes") HTML and CSS2.

Applications

The examples in this section vary from "home-brewed" elements to the ones based on "standard" XML DTDs (that is, XML applications that either exist as an accepted standard or are moving towards one).

XML Application Classification

The following two broad categories of XML applications are expected:

1. XML Applications without a DTD. This can be considered as the simplest case. The author creates his/her own elements to be used with the content, and may or may not decide to provide a corresponding DTD. Without appropriate documentation, these elements are "meaningless" and without a formal DTD the use of the elements is limited to that XML document instance.
2. XML Applications with a DTD. The DTD could be internal where it is embedded in the XML document. This is usually recommeded for small DTDs. The DTD can also be external as a "standalone" or available "publicly." In the latter case, it can be referenced via an FPI (Formal Public Identifier).

In the foregoing, we shall see the examples of all of above categories.

AN XML Application without a DTD

The following is a simple XML fragment that we wish to present:

<?xml version="1.0" standalone="yes" encoding="UTF-8"?>
<quote>
  <title>
    The quick brown fox jumps over the lazy dog
  </title>
  <comment>
    This quote has <property>all the alphabets</property> of the English language.
  </comment>
</quote>

To display this fragment in a document-like fashion, we must first declare which elements are inline-level (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks). After that, we can "decorate" the rest of the content. Here is a sample CSS stylesheet:

property {display: inline; font-style: italic; color: rgb(000,000,128);}
quote, title, comment {display: block; margin: 0.5em;}
title {font-size: 1.5em;}

The first rule declares property to be inline, in italic and navy; the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level (with a bit of a margin added in the end). Finally, the title is given a larger font size than the rest of the text. the The presentation of the document can be further improved by adding more rules to the stylesheet.

The following is the XML markup with the associated stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="quote.css"?>
<quote>
  <title>
    The quick brown fox jumps over the lazy dog
  </title>
  <comment>
    This quote has <property>all the alphabets</property> of the English language.
  </comment>
</quote>

The following is another example using the same CSS stylesheet, quote.css:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="quote.css"?>
<quote>
  <title>
    Able was I ere I saw Elba
  </title>
  <comment>
    This quote is a <property>palindrome</property>.
  </comment>
</quote>

Extensible Hypertext Markup

Extensible HyperText Markup Language (XHTML) is a reformulation of HTML in XML. For XHTML documents being served as XML documents (using the Internet Media Type text/xml), there are HTML Compatibility Guidelines for CSS2 that define style properties which are applied to the parse tree of the XML document (differences in parsing will produce different visual or aural results, depending on the selectors used):

1. CSS style sheets for XHTML should use lower case element and attribute names.
2. In tables, the tbody element will not be inferred by the parser of an XML user agent. Therefore, you should always explicitly add a tbody element if it is referred to in a CSS selector.
3. CSS defines different conformance rules for HTML and XML documents; the XML rules apply to XHTML documents delivered as XML.

Here is an example of an XHTML document with the associated stylesheet referenced externally:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<?xml-stylesheet type="text/css" href="book1.css"?>
<html xmlns="http://www.w3.org/TR/xhtml1/strict" xml:lang="en" lang="en">
<head>
  <title>Books</title>
</head> 
<body>
  <img class="img" src="book.gif" alt="Book Cover" width="93" height="140" />
  <p id="title">Digital Typography</p>
  <p id="author">Donald Knuth</p>
  CSLI Publications<br />
  1999<br />
  <p>1575860104</p>
  <div class="desc">
    A collection of essays on <topic>typography</topic> from its mechanical and 
    photographic past into its digital future. The author discusses the <span class="topic">
    typography</span> of mathematics, and the mathematics of <span class="topic">typography
    </span>. He examines the history, the art, and the mathematical ideas that 
    joined them.
  </div>
</body>
</html>

where book1.css is the corresponding CSS stylesheet. The following is the XML document using XHTML namespace http://www.w3.org/TR/xhtml1/transitional with prefix html and the associated stylesheet referenced externally:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="book2.css"?>
<book xmlns:html="http://www.w3.org/TR/xhtml1/transitional">
  <cover><html:img src="book.gif" alt="Book Cover" width="93" height="140" /></cover>
  <title>Digital Typography</title>
  <author>Donald Knuth</author>
  <publisher>CSLI Publications</publisher>
  <year>1999</year>
  <isbn>1575860104</isbn>
  <desc>
    A collection of essays on <topic>typography</topic> from its mechanical and 
    photographic past into its digital future. The author discusses the <topic>
    typography</topic> of mathematics, and the mathematics of <topic>typography
    </topic>. He examines the history, the art, and the mathematical ideas that 
    joined them.
  </desc>
</book>

where book2.css is the corresponding CSS stylesheet. The following is the skeleton of the XML document using XHTML namespace with the associated stylesheet embedded:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"?>
<book xmlns:h="http://www.w3.org/TR/xhtml1/transitional">
  <h:style>
    <!-- Stylesheet Content here -->
  </h:style>
    <!-- Markup Content here -->
</book>

Mathematical Markup

Mathematical Markup Language (MathML) is a language for expressing mathematical notation in XML. All MathML elements fall primarily into one of three categories: presentation elements, content elements and interface elements. The math element serves as a top-level interface element. Every other MathML element is either a presentation element or a content element. MathML allows encoding both the notation as well as the structure of a mathematical expression. Presentation markup captures the notational structure of an expression.

The following is an example of MathML Presentation Markup that uses CSS in an XHTML document using the MathML namespace name http://www.w3.org/Math/MathML. The style instructions are shown in bold.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xmlns:m="http://www.w3.org/Math/MathML">
<head><title>Quadratic Formula</title></head>
<body>
<span style="font-style: italic">
  <math>
  <m:mrow>
    <m:mi>x</m:mi>
    <m:mo>=</m:mo>
    <m:mfrac>
    <m:mrow><m:mo>-</m:mo><m:mi>b</m:mi>
      <m:mo>&PlusMinus;</m:mo>
      <m:msqrt m:style="color: #ff0000">
      <m:mrow>
        <m:msubsup><m:mi>b</m:mi><m:mn>2</m:mn></m:msubsup>
          <m:mo>-</m:mo>
          <m:mn>4</m:mn><m:mi>ac</m:mi>
      </m:mrow>
      </m:msqrt>
      </m:mrow>
      <m:mrow><m:mn>2</m:mn><m:mi>a</m:mi></m:mrow>
    </m:mfrac> 
  </m:mrow> 
</math> 
</span>
</body> 
</html>

It will render natively in the Amaya browser, which can display both presentation and structure of the MathML markup, as shown below:

Note that the position of the cursor (in our case at "b") in the figures is synchronized to simplify editing. A useful interpretation of "colouring" part of the formula in red could be to emphasize that it is the discriminant, the quantity responsible for the nature of the roots of the quadratic equation.

CSS-Compatible Attributes in MathML

There are specific MathML styling properties in form of certain attributes, whose names and acceptable values are defined by CSS1. In general, the MathML syntax for each attribute is intended to be a subset of the CSS syntax for the corresponding property.

The <mstyle> element is used to make style changes which affect the rendering of its contents. <mstyle> can be given any attribute accepted by any MathML presentation element; it can also be given certain special attributes. Roughly speaking, the effect of the <mstyle> element is to change the default value of an attribute for the elements it contains.

The syntax of certain attributes is specified using one of the symbols css-fontfamily or html-color-name, as shown in the following table:

Here is an example of the MathML markup (of the "Golden Mean") using the <mstyle> element:

<math>
  <mrow>
    <mfrac>
      <mrow><mn>1</mn><mo>+</mo>
        <mstyle color="#ff0000">
          <msqrt><mrow><mn>5</mn></mrow></msqrt>
        </mstyle>
      </mrow>
      <mrow>
        <mn>2</mn>
      </mrow>
    </mfrac> 
  </mrow>
</math>

This should render as:

Besides manipulating fonts or colours, the <mstyle> element can also be used to adjust the quality of certain notations such as stretchiness of a parenthesis or width of the line in a fraction.

Graphical Markup

Scalar Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. The style sheet support in SVG, as much as possible, conforms to CSS2. SVG uses CSS properties to describe many of its document parameters, in particular, for the following:

• Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is painted such as fill and stroke colors, linewidths and dash styles.
• Parameters having to do with text styling such as font-family and font-size.
• Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

The following facilities from CSS2 are supported in SVG:

• CSS2 syntax rules, including allowable data types
• Style sheet declarations, including selectors.
• SVG supports both external CSS style sheets and the inclusion of style rules within an SVG document using <style> elements and style attributes attached to specific SVG elements.
• CSS2 rules for assigning property values, cascading and inheritance
• @font-face, @media, @import and @charset rules within style sheets

The following is a SVG graphic with use of CSS, with style attributes attached to specific SVG elements:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990812.dtd">
<svg width="400" height="400" >
  <title>Circles</title>
  <desc>Three circles</desc>
  <g style="stroke:black; fill:none; stroke-antialiasing:true" >
    <circle cx="70" cy="100" r="50"
      style="fill:blue; stroke:none" />
    <circle cx="190" cy="100" r="50"
      style="fill:white; stroke:navy; stroke-width:4" />
    <circle cx="310" cy="100" r="50"
      style="fill:none; stroke:blue; stroke-width:4; stroke-dasharray:4 2" />
  </g>
</svg>

The resulting graphic will look like this:

Remarks

The following observations are in order:

• Even if an XML document does not have a DTD, by definition, it should be well-formed.
• The most important CSS2 properties for XML are display, patterns and selectors. CSS2 Specification gives a short CSS2 tutorial to XML.
• For colour support, we have used colour names, as well RGB values for the colour. For the reasons of accessibility, use of RGB values is preferable. Similarly, use of "em" for size/spacing is preferred over other forms.
• The CSS stylesheet book1.css uses classname preceded by a period (.) notation, introduced in CSS1. This has been deprecated in CSS2 and replace by the notation [class~=value].
• The last two examples presented include inline styling instructions merely for illustration. This practice should be discouraged for two reasons: it mixes content with presentation and, if the instructions are repeated, they increase the size of the document.

Limitations of CSS

The limitations of CSS as a presentational language for XML documents pointed out in this section range from social to technical.

Overoptimism : Handle CSS with care

Use CSS with care. It is the long-awaited salt on the Web-food; a little is necessary, too much is not good cooking.
- Robert Caillau, Second Edition of "Cascading Style Sheets: Designing for the Web"

CSS can be used to style any XML application, but that does not mean it is always "meaningful." The use of CSS with Synchronized Multimedia Integration Language (SMIL) is perhaps of little use. Similarly, although we have attempted to show some relevance, CSS has limited use with MathML markup. Presenting a mathematical expression in a certain font or colour, or adjusting its placement on a Web page is only useful to a certain extent. This has no direct bearing whether the user will understand the concept any better.

CSS Design

Although CSS style sheets can be very effective for improving the presentation of HTML documents, it has a number of limitations (a CSS Object Model is in the works) that can prohibit its effectiveness for complex XML applications:

• CSS cannot grab an item from one place and use it again in another place.
• CSS has no concept of sibling relationships.
• CSS is not a programming language; it does not support decision structures and cannot be extended.
• CSS cannot calculate quantities or store variables.
• CSS cannot generate text.
• CSS uses a simple box-oriented formatting model that will not extend to advanced applications of the markup, such as multiple column sets.
• CSS does not have a sufficient support for internationalization (i18n).

These reasons have motivated the work on a new stylesheet language for XML, the Extensible Stylesheet Language (XSL). XSL is a simplified version of the Document Style Semantics and Specification Language Online (DSSSL-O), the style language for Standard Generalized Markup Language (SGML). Most of the features desired of a stylesheet language (mentioned above as limitations of CSS) have been incorporated in the XSL "family" of languages: XSL Formatting Semantics (XSL-FS) and XSL Transformations (XSLT).

CSS vs. XSL-FS as the XML Style Language of Choice

In choosing a style sheet language for a particular document, it is important to consider whether the structure of the XML document is suitable for display. With CSS, the structure of the XML content must be virtually identical to the structure of the presentation. Since one of the goals of XML is a complete separation of content from presentation, many XML documents are difficult to display as you might wish using CSS.

Suppose we have the following XML document fragment:

<author>
<firstname>Albert</firstname> 
<lastname>Einstein</lastname> 
</author>

and the task is to present names in "Last name, First name" format. With CSS, you can apply properties only to the and elements, but to reorder them XML source as well as the CSS stylesheet would need to be modified. This is contrary to the XML philosophy.

XSL provides the most of the formatting objects and properties of CSS. Over 90 percent of the properties in XSL are properties that are already defined in CSS. This set of properties (and formatting objects), however, is not sufficient to accomplish all the goals of XSL. The XSL Specification introduces a model for pagination and layout that can be extended to page structures beyond the simple page models. To achieve this control, XSL has extended the CSS set of formatting objects and formatting properties. The XSL extensions to CSS are:

• More Powerful "Selectors" and "Tree Construction".
• Provision for an Extensible Page Layout Model.
• An Extended Formatting Model
• Internationalization and Writing-Modes.
• Linking.

Using the following XSL stylesheet, we can accomplish the task set in the previous example:

<xsl:template pattern="author">
  <xsl:sequence>
    <xsl:process select="lastname"/>
      <xsl:text>, </xsl:text> <!-- Note the whitespace after the comma. -->
    <xsl:process select="firstname"/>
  </xsl:sequence>
</xsl:template>

Remarks

Whether CSS or XSL should be the language of choice for formatting XML documents has stirred a debate. In conclusion, CSS and XSL-FS are complementary rather than competitive to each other. For simple applications, creating CSS stylesheets could be more useful; for the complex ones, we may need the XSL-FS machinery. Note also that, while CSS works with both HTML and XML, XSL works only with XML. Furthermore, CSS is already established as a standard, having been gone through two iterations (CSS1 and CSS2, with CSS3 under development) while XSL is still evolving.

We will discuss XSL-FS, including a detailed comparison with CSS, in a future work.

Conclusion

XML with CSS : Shaping Structured Content

Separating structure from presentation is the essence of (semantically) meaningful, maintainable, accessible and evolvable document markup for the Web. The XML-CSS combination simplifies the document creation process. XML uses markup to describe the structure and content of a document; CSS, on the other hand, makes it possible to present that document, while preserving the structure, to the user in a renderer. Thus, we have style (beautification) in a semantically (meaningful) way in XML documents. Following the guidelines for creating CSS stylesheets, these documents can reach a wider community.

References

• Extensible Markup Language (XML) 1.0 - By Tim Bray, Jean Paoli, and C. M. Sperberg-McQueen. W3C Recommendation, February 10, 1998.
• Cascading Style Sheets, Level 2 (CSS2) - W3C Recommendation, May 12, 1998. CSS2 continues in the tradition of CSS1, and then moves beyond fonts and text styles to three dimensional space. It allows authors and readers to attach style to HTML and XML documents.
• Cascading Style Sheets (Level 1) - W3C Recommendation (Revised), January 11, 1999. CSS1 is a simple style sheet mechanism that allows authors and readers to attach style to HTML documents.
• The CSS Object Model - By Philippe Le Hégaret. WWW8, Toronto '99, May 14, 1999.
• Namespaces in XML - By Tim Bray, Dave Hollander, Andrew Layman. W3C Recommendation, January 14, 1999.
• Extensible Stylesheet Language (XSL) - W3C Working Draft, April 21, 1999.
• Associating Style Sheets with XML documents Version 1.0 - By James Clark. W3C Recommendation, June 29, 1999.
• XHTML : HTML as an XML Application - By Pankaj Kamthan, September 1999.
• XML Namespaces : Universal Identification in XML Markup - By Pankaj Kamthan, September 1999.
• XML Spy - By Icon Information Systems. An XML editor for Windows 9x/NT that supports XML with CSS and XML namespaces.
• XMetaL - By SoftQuad, Inc. An XML editor for Windows 9x/NT that supports XML with CSS and XML namespaces.
• CSS, XHTML, XML, MathML, SVG, XSL - Computational Mathematics Laboratory, Concordia University, Canada. Web sites on information on CSS, XHTML, XML, MathML, SVG, and XSL, respectively.

View the profile on Pankaj Kamthan and the list of other Articles by Pankaj Kamthan.