he Mozilla browser, developed as an Open Source project under the auspices of Netscape/AOL, is a nearly complete rewrite of the now ancient Communicator 4.x browser suite. In this article you’ll see Mozilla’s fresh approach for rendering Web page content onto the screen. HTML (and XHTML) are no longer the only game in town?Mozilla has direct support for other languages, such as MathML (mathematical equations) and SVG (two dimensional vector diagrams).

The sample code in this article doesn’t use plugins or foreign content of any kind, except for the occasional image. Instead, the code displays content using only Mozilla’s fundamental support for XML entities. To get the maximum benefit from the samples, you should be using Mozilla 0.99 or later. You should also install the TEX and Mathematica fonts available at www.mozilla.org/projects/mathml/. Follow the install instructions at that page.

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 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:

         ]   

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

tags you have tags. These prefixes are verbose and not required, but it helps you read the code. The tag shown above would contain all the content in the file?much as the tag contains the content in a standard HTML file, so the last tag in the file must be . 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 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.