On Display: XML Web Pages with Opera 4.0
April 19, 2000
In the second article in his series examining next-generation browser XML support, Simon St. Laurent examines the Opera 4 browser, comparing its XML support with that of Mozilla, reviewed previously. If you haven't read the Mozilla article yet, I suggest you read it in tandem with this piece. - E.D.
Opera 4.0 beta 2 renders XML content using an overlapping, but somewhat different, set of tools from those used by Mozilla. While much of the core is the same, some of the details, especially linking, are different. Both browsers are still pre-release, so it's probably too much to expect interoperable implementations. XML browsers are also still in uncharted territory - XLink isn't finished, the rules for using HTML with XML are still developing, and there's an enormous amount of integration work yet to be done.
The Good News: Similar Foundations
Opera 4.0 is built on the same combination of XML and Cascading Style Sheets (CSS) that the Mozilla project has used as its base. The core set of tools described in the previous article, including the stylesheet processing instruction and the display property of CSS2 work the same way in both Mozilla and Opera 4.0.
Loading the Mozilla display property example into Opera 4.0 beta 2, shown below in
Figure
1, shows that the basics work the same way. The block and inline
elements are rendered properly. The lists are rendered correctly as lists, though
there is a
problem in Opera with the numbering of the ordered list. (There was a related issue
with
Opera's rendering of HTML OL lists that has supposedly been fixed - see http://sue-sims.nu/opera/resources/40-issues.html). The table renders properly as
well.
|
|
Figure 1 - Loading the previous display test and its style sheet display1.css into Opera produces similar results to Mozilla. |
Similarly, the table of books displays just as it did in Mozilla.
|
|
Figure 2 - Loading the books table (books1.xml + books1.css) into Opera works the same as it did with Mozilla. |
This shared foundation means that it's now quite simple to use Mozilla and Opera as viewers for various kinds of XML documents, from documents filled with formatting to tables that need a "boxy" presentation. In the common browser role of passive viewer, these two tools can do an excellent and highly compatible job of presenting XML as the stylesheets demand. (Full compliance testing with CSS1 and CSS2 is another issue, still to be resolved - that evaluation may have to wait until a production release.)
The Bad News: Different Linking and HTML handling
Opera does very well, if not perfectly, on lots of XML+CSS tests. The foundations are there, and seem solid. Aspects of XML browsing beyond the core of XML and CSS presentation are still difficult, yet fixable. Opening the more sophisticated book catalog that we built for Mozilla in the previous article brings up a page without displaying the expected images, and with marked links that don't work, as shown in Figure 3 below.
|
|
Figure 3 - Loading the more sophisticated books table (books2.xml + books2.css) into Opera produces a simpler and less functional result than it did in Mozilla. |
To a considerable extent, this isn't Opera's fault. The World Wide Web Consortium hasn't issued any guidelines on what an "XML browser" would look like, or much suggestion as to how to process XML and HTML when the two are mixed together in a single document. Amaya, the W3C's own browser, provides some implementation examples, but doesn't itself support generic XML and CSS presentation. The links we created for Mozilla probably shouldn't work in Opera - they are, after all, built using a draft of XLink that's been out of date for nearly nine months. The W3C has a number of specifications in development that may change the rules yet further, notably Extensible Style Sheets and XHTML. The infrastructure needs a substantial cleanup as more and more pieces have become attached.
To support linking through this time of uncertainty, Opera's designers have taken an undocumented step, which should make it easier for them to support a variety of linking approaches in XML languages in the near future. It isn't XLink, but it opens the way to describing linking semantics within Cascading Style Sheets. Perhaps best of all, it provides a way to support whatever flavor of simple links emerge from the XLink process without needing to change code. The code needed for this example was dredged from the CSS file Opera 4 uses to support WML, so it may well not be something they're encouraging developers to use in general.
It would be wise for Opera to submit a more detailed explanation of what they're doing here to the W3C, and contribute to the on-and-off discussions about the relationship between stylesheets and linking. While the Opera approach is intriguing, its non-standard and undocumented (though non-damaging) nature could be improved substantially with some political work to complement the technical work they've done.
Making the linking from the more sophisticated book presentation example work in Opera requires only the addition of two lines to the stylesheet. The original stylesheet looked like:
catalog {display:table;}
book {display:table-row;}
book *{display:table-cell; padding:5px;}
title {color:blue; text-decoration:underline;}
The new style sheet is identical, except for the title element:
catalog {display:table;}
book {display:table-row;}
book *{display:table-cell; padding:5px;}
title {color:blue;
text-decoration:underline;
set-link-source:attr(href);
use-link-source:current;}
The two new CSS properties identify the source of the linking target information
(set-link-source), and tell the browser to use that information on the
current element (use-link-source). We've told the browser to use the
href attribute as the source of the linking target, and to make that a link
to the current (title) element. The pictures still won't display, but Opera
will now connect the links specified by the title elements, as shown in Figure 4.
|
|
Figure 4 - Loading the modified books table (books3.xml + books3.css) into Opera produces a document with active links. |
The use-link-source property does accept another value, next, in
the stylesheet Opera uses for rendering Wireless Markup Language, but in this case
it
shuffles the links around to make the title links point to the books following them.
(The
link on XML Elements of Style would point to the XML Bible, and so on).
The image display issues are harder to resolve, though Opera has taken the same guess
that
Netscape has regarding how to integrate HTML with XML, using a namespace identifying
HTML
elements as coming from the HTML 4.0 recommendation. Elements from the HTML vocabulary
that
use the namespace http://www.w3.org/TR/REC-html40 will be rendered as HTML. It
appears that a bug in the rendering somewhere is keeping the book jackets from appearing
in
the table above, but hopefully this will be fixed. (In some of my experiments with
images
and CSS2 tables I was able to crash the Opera 4 beta 2 browser, a reminder of the
perils of
software that isn't quite finished.)
Getting it Working
Since the table example doesn't work, we'll try some a simpler stylesheet to demonstrate
mixing HTML with XML. We'll start with a slightly modified version of the books document,
adding an HTML h1 headline to it and pointing to a different style sheet:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="books4.css"?>
<catalog xmlns:html="http://www.w3.org/TR/REC-html40" >
<html:h1>XML Books</html:h1>
<book>
<cover xml:link="simple" show="replace"
href="http://www.amazon.com/exec/obidos/ISBN=007212220X/">
<html:img
src="http://images.amazon.com/images/P/007212220X.01.MZZZZZZZ.jpg"/>
</cover>
<author>Simon St. Laurent</author>
<title xml:link="simple" show="replace"
href="http://www.amazon.com/exec/obidos/ISBN=007212220X/">
XML Elements of Style</title>
<pubyear>2000</pubyear>
<publisher>McGraw-Hill</publisher>
<isbn>0-07-212220-X</isbn>
<price>$29.99</price>
</book>
<book>
<cover xml:link="simple" show="replace"
href="http://www.amazon.com/exec/obidos/ISBN=0764532367/">
<html:img
src="http://images.amazon.com/images/P/0764532367.01.MZZZZZZZ.jpg"/>
</cover>
<author>Elliotte Rusty Harold</author>
<title xml:link="simple" show="replace"
href="http://www.amazon.com/exec/obidos/ISBN=0764532367/">XML
Bible</title>
<pubyear>1999</pubyear>
<publisher>IDG Books</publisher>
<isbn>0764532367</isbn>
<price>$49.99</price>
</book>
...
In the new stylesheet, books4.css,
we'll use block and inline elements instead of table structures to
contain our images and links. We'll also tell Opera to note the link in the
cover element as well as the one in the title element.
catalog {display:block;}
book {display:block; padding:5px;}
book *{display:block;}
title {color:blue;
text-decoration:underline;
set-link-source:attr(href);
use-link-source:current;}
cover {set-link-source:attr(href);
use-link-source:current;}
The result is shown in Figure 5 below.
|
|
Figure 5 - Loading the modified books catalog (books4.xml + books4.css) into Opera produces a document with active links, and almost presents images. |
Opera notes the HTML origin of the h1 element, and renders it using its
built-in expectations for HTML - note that we didn't specify anything in the style
sheet
regarding h1. Oddly, the images don't load immediately, but can be brought in -
right-clicking on the word IMAGE will produce a pop-up menu that lets you load the
image,
presenting the scene shown in Figure 6.
|
|
Figure 6 - Opera can display the images, though the beta requires a bit of user intervention. |
Clicking on either the cover (whether the image loaded or not) or the book title will activate the link and navigate to the relevant Amazon.com page. As Figure 7 shows, the same document and style sheet work well in the Netscape 6 preview release (built on Mozilla.) We've effectively built a cross-browser XML document!
|
|
Figure 7 - Netscape Navigator 6 PR1 also displays the page, loading the images immediately. |
|
||||||||||||||
While Opera Software still has some polishing to do, as well as some documentation to write, Opera 4.0 beta 2 feels like a solid step forward into XML web development. The use of CSS to implement linking may prove controversial, though at least it is done in the context of a major effort to support CSS thoroughly. The Opera approach can be used as a foundation for implementing the XLink standards (past, as supported by Mozilla, and present, in the latest draft) under development at the W3C, though further W3C action would be needed to make this official.
Browsing XML is getting tantalizingly close!