Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Mozilla's Potpourri of Rendered XML  : Page 2

Mozilla 1.0 is busting out and it can display a lot more than just text, links, and images. Check out the interaction of display standards at work in this new browser.

Multiple Integrated XML Standards
In addition to plain-vanilla XHTML, Mozilla recognizes several XML DTDs (Document Type Definitions), MathML and SVG. However, neither MathML nor SVG support is complete in the current Mozilla builds. For MathML, presentation markup is ready, but content markup is not. MathML content markup is syntactic sugar (handy features) that simplifies the marking-up process. Without content tags, all mathematical formulae are still possible, it just takes more effort. Mozilla's SVG support, on the other hand, is still missing basic features, such as <text> support. You've been warned. Depending on the version, you might notice that SVG colors are a little odd, too. Despite these problems, you can still do a lot.

When you create a web page that exploits the new DTD support, you should name it with an .xml extension, even if the page contains some HTML. This content excerpt from Listing 1, example1.xml, shows how the browser can draw together several standards into one document:

<?xml version="1.0"?> <!DOCTYPE example [ <!ELEMENT example ANY> ] <example xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mathml="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cml="http://www.xml-cml.org/">

The keyword xmlns in the preceding example is the XML Namespace way to refer to an XML DTD. Each xmlns line enables the named DTD in the browser. Even though the DTDs are referred to by URLs, nothing is "loaded"—it is just a hint to the browser to use its knowledge of that DTD. The DTD support means that every tag has a prefix, so instead of <p> tags you have <html:p> tags. These prefixes are verbose and not required, but it helps you read the code. The <example> tag shown above would contain all the content in the file—much as the <html> tag contains the content in a standard HTML file, so the last tag in the file must be </example>. The first three DTDs reference the XHMTL, MathML, and SVG namespaces, and the fourth DTD is for CML, the Chemical Markup Language used by scientists.

The DOCTYPE declaration is also very important. Mozilla has a "compatibility mode" for old-fashioned non-standard Web pages. A correctly chosen DOCTYPE declaration tells the browser to run in "strict mode", which is needed for XML. It doesn't matter that this page is not a pure HTML page. You just need the browser to switch to strict mode. There are lots of different DOCTYPEs that turn strict mode on. Constructing a custom DOCTYPE, technically an "internal subset", as done here, is one way. Our DOCTYPE is a document that only supports the <example> tag. Mozilla doesn't understand , but because of the fundamental XML support, it can still be used as an invisible container for the other tags. That's its only use here.

You can think of the xmnls keyword as similar to #include (C/C++) or use (Perl) directives. There is also some similarity with RDBMS schema creation scripts. The names in different DTDs can clash with each other, just like global variable declarations in two #include files, or two .sql files. The current solution is to create a kind of Frankenstein's Monster DTD combining MathML and HTML together. Here it's done without worrying about name collisions—the examples are simple and no serious problems occur.

Example 1 contains a page of content with all these markup languages at work (remember that since IE is incapable of displaying the examples, Example 1 will show either an error or XML source code when viewed in IE). Figure 1 shows how the page renders in Mozilla.

Figure 1: Mozilla window showing multiple markup languages rendering simultaneously in a single page.
If you choose View … Source … from the browser menus, you can see all the content—no plugins. Note that the CML markup example at the bottom looks very plain—that's what happens when Mozilla encounters a DTD that it can parse (read in) but can't render (display). It just dumps the content out as plain text by default. In contrast, it's obvious that SVG and MathML have special support in the browser, because they display nicely.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date