XML Display

Displaying XML Documents

Raw XML files can be opened directly in most modern web browsers, but they won’t display like styled web pages unless you provide specific instructions.

Viewing Raw XML in Browsers

When you open a well-formed XML file (like the note.xml example below) directly in a browser like Chrome, Firefox, or Edge, it typically renders it as an interactive, color-coded tree structure:

<?xml version="1.0" encoding="UTF-8"?>
<note importance="high">
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

You can usually expand and collapse elements using (+) or (-) icons (or similar indicators) next to the tags. This default view helps visualize the XML hierarchy.

To see the actual raw text content of the XML file, you can use the browser’s “View Page Source” or equivalent option (often found by right-clicking on the page).

Note: Browser behavior can vary slightly. Some older browsers or specific configurations might display only the text content or handle XML differently.

Viewing an Invalid XML File

XML has strict rules for well-formedness (e.g., all tags must be closed, properly nested, attributes quoted). If you try to open an XML file with errors, browsers will typically display an error message instead of the tree view.

Example of an error: <message>Hello</em> (mismatched tags).

The error message usually indicates the location (line number, position) and type of the first error encountered. This is helpful for debugging.

Consider using an XML Validator (online tools or integrated into code editors) to check if your XML is well-formed and valid against a schema (DTD or XSD) if applicable.

Why Doesn’t XML Display Like HTML?

XML was designed primarily to structure and carry data, not to dictate its presentation.

Unlike HTML, where tags like <h1>, <p>, <img> have predefined meanings for browsers (how to render them), XML tags are defined by the author. A tag like <table/> in XML doesn’t inherently mean a data table to display; it could represent a piece of furniture.

Because browsers don’t know the intended meaning or display style for custom XML tags, they default to showing the raw structure or an error if the file isn’t well-formed.

Methods for Styling and Displaying XML Data

To display XML data in a user-friendly format (like a web page), you need to provide presentation instructions. Common approaches include:

1. 1. Transforming XML to HTML using XSLT: As covered in the XSLT chapter, you can write an XSLT stylesheet to convert your XML structure into standard HTML. This transformation can happen either server-side before sending the HTML to the browser, or client-side within the browser (using the <?xml-stylesheet ...?> processing instruction). The resulting HTML can then be styled using CSS.
2. 2. Parsing XML with JavaScript and Rendering HTML: Fetch the XML data using JavaScript (fetch API). Parse the XML into a DOM object (DOMParser). Use JavaScript DOM manipulation methods to create HTML elements dynamically based on the XML data and inject them into the web page. This approach offers maximum flexibility and is common in modern web applications (often using JSON instead of XML as the data format).
3. 3. Styling XML directly with CSS: You can link a CSS stylesheet directly to an XML document using the <?xml-stylesheet ...?> processing instruction. Modern browsers will apply the CSS rules to the corresponding XML elements.
4. 4. Server-Side Rendering: A server-side application reads the XML data (from a file or database), processes it, and generates a complete HTML page incorporating that data, which is then sent to the browser.

Example: Styling XML with CSS

While less flexible than XSLT or JavaScript rendering for complex layouts, CSS can be used for basic styling of XML documents directly in the browser.

1. Create your XML file (cd_catalog.xml):

<?xml version="1.0" encoding="UTF-8"?>
<!-- Link the CSS file -->
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<catalog>
  <cd available="true">
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd available="false">
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
  </cd>
  <!-- ... more cd elements ... -->
</catalog>

2. Create your CSS file (cd_catalog.css):

/* Apply styles directly to XML elements */
@charset "UTF-8";

catalog {
  display: block; /* Treat catalog like a block container */
  width: 80%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

cd {
  display: block; /* Each CD on a new line */
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Style unavailable CDs differently */
cd[available="false"] {
  opacity: 0.6;
  background-color: #eee;
  border-style: dashed;
}

title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

artist {
  display: block;
  font-size: 1.1em;
  color: #555;
  margin-bottom: 8px;
}

country, company, price, year {
  display: inline; /* Display these on the same line */
  margin-right: 15px;
  font-size: 0.9em;
  color: #777;
}

/* Add pseudo-elements for labels (optional) */
country::before { content: "Country: "; font-weight: bold; }
company::before { content: "Company: "; font-weight: bold; }
price::before   { content: "Price: $"; font-weight: bold; }
year::before    { content: "Year: "; font-weight: bold; }

When you open cd_catalog.xml in a modern browser, it should apply the styles defined in cd_catalog.css. Selectors work on XML element names and attributes just like in HTML.

Limitations of CSS Styling for XML:

• Cannot change the document structure (add/remove/reorder elements).
• Cannot easily generate complex content (like tables from flat data) purely with CSS.
• Browser compatibility, while generally good now, might have had quirks historically.

For significant structural changes or complex presentation logic, XSLT or JavaScript rendering are more powerful tools.