Hack 60. Mix Content with XML Namespaces

An XML document can combine content of several different types.

The W3C (http://www.w3.org) XML Namespaces specification allows document syntax from several different types of XML documents to exist in one file. Firefox's Gecko rendering engine can display some documents that are of mixed type, but not all. This hack shows combinations that are both feasible and useful.

6.4.1. Play with XML Namespace Syntax

Here is the syntax for namespaces. An XML document has a default namespace, which is specified by a URL. The namespace URL is different than the document definition. This XHTML 1.0 fragment shows both:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
...

The URL in the DOCTYPE declaration says where the definition of this document is located. That's a hint to Firefox that explains what resources to use when displaying the document. The URL in the <html> tag says which URL belongs to the default namespace. That's a hint to Firefox that explains how to allocate tags found in the file to the right standard.

Here are the only namespaces that Firefox has special display support for:

http://www.w3.org/1999/xhtml
http://www.w3.org/1998/Math/MathML
http://www.w3.org/2000/svg
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

These namespaces are XHTML 1.0, MathML 1.0, SVG 1.0, and Mozilla's XUL, respectively. Namespace-less XML is also supported. Of these four URLs, the only sensible choices are to pick either XHTML or XUL as the default namespace. Beware that mixing all these content types is a potent cocktail. No group, not the Mozilla project or even the W3C, has determined in fine detail how various combination should work.

Mozilla supports many XML standards beyond this short list. None of the others have direct display support, however. RDF can provide display elements, but only indirectly via XUL templates. Indirect display is also possible for XSLT and Mozilla's XBL.

For completeness, here are the nondisplay namespaces that Firefox recognizes:

http://www.w3.org/XML/1998/namespace
http://www.w3.org/2000/xmlns/
http://www.w3.org/1999/xlink
http://www.w3.org/1999/XSL/Transform
http://www.mozilla.org/xbl
http://www.w3.org/1999/02/22-rdf-syntax-ns#
http://www.w3.org/2001/xml-events

6.4.2. Write Reports in XHTML, MathML, and SVG

High standard reports, papers, and presentations have text, mathematical formulas, diagrams, and illustrations as content. The combination of XHTML, MathML, and SVG provides a suitable descriptive environment in which no content needs to be captured as a rendered image. This is a bleeding-edge approach, though, because the standard Firefox release doesn't include SVG. That means the vast majority of Firefox users (those with the standard release) can't read such reports.

Here's a fragment of a document that holds both XHTML and MathML content:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:m="http://www.w3.org/1998/Math/MathML">
  <em>An equation
    <m:msup>
      <m:mi>x</m:mi>
      <m:mn>2</m:mn>
    </m:msup>
  </em>
...

Firefox displays the result like this:

An equation: x²

Notice how the emphasized styling from the XHTML <em> tag is also used by the MathML content. Notice also that, although the MathML namespace is used, there's no proper <math> tag surround the math content. If you use MathML properly by including the <math> tag, styling is done more formally [Hack #61] . Nesting other content inside SVG content won't work; write the SVG pieces so that they're pure SVG [Hack #62] .

6.4.3. Create Content Browsers with XHTML and XUL

You can mix Mozilla's Graphical User Interface XML dialect XUL [Hack #68] with XHTML (or HTML) in two ways.

The simple way is to use <iframe> tags. XUL, HTML, and XHTML all support <iframe>. If you are describing a user interface in XUL, a portion of the window should contain an XUL <iframe>. That frame in turn displays an HTML or XHTML document. This is useful in situations where the window must display both navigation controls and content, such as these:

Software installers that show a scrollable view of the license agreement text
Help windows
Content management systems
Web browsers, such as Firefox itself

To see an example of an XUL-XHTML blend, just look at the Firefox browser's interface. It's a set of XUL widgets (toolbars and menus) and a big <iframe> pane that displays HTML (the currently loaded page).

A more complicated twist is to put XUL and XHTML tags together in the same file. If you do this, XUL must be the default namespace and the document must be delivered from the server with the XUL MIME type [Hack #27] . Since XUL tags are all controlled by CSS styles, even the ones backed by XBL bindings, you can mash together XHTML and XUL styles in one CSS stylesheet. Mix up your XUL tags and HTML tags as much as you like, but expect some disconcerting layout results from interactions between these style property values:

display : block
display : inline
display : -moz-box

Keep everything either inside a set of XUL boxes or inside a set CSS blocks. Inside that chosen framework, use whatever special cases make sense.

This complicated arrangement might be useful for a content-management system. There, you can put sophisticated widgets next to content pieces, without having to go through the torture of extensive Dynamic HTML programming.