OPML and XSLT

OPML is "Outline Processor Markup Language" and is a very simple XML format for storing information in outline format.  Of course, XML itself is perfect for representing hierarchies, but OPML constrains the format enough that a wide variety of applications can build in OPML support with the comfort of knowing it will work with any other OPML tool.  For information stored in hierarchies, such as web browser bookmarks, web directories, collaborative outlines, song playlists, and even web-site content, OPML is a great balance between the wide open freedom of raw XML and the feeling of security of a formal vocabulary.  You should be able to read and understand the very small specification in just a few minutes.

OPML in the Web Browser

Since OPML is designed to represent information that real people usually want to look at, and since web browsers are accustomed to dealing with hierarchical data, OPML is an ideal fit.  The following files allow you to view, edit, and format OPML files in a web browser:

Getting Started

If you are using Internet Explorer 5.5 and have installed the latest MSXML processor, you can simply access the sample XML file directly.  If your browser does not support automatic client-side XSL transformation, then you can access an HTML version of the same file which is already transformed for you.  If you think you have installed the latest MSXML and are receiving an error trying to open the sample XML file, see the FAQ.

How it Works

To allow OPML to be used in the browser, all that is necessary is for the following line of XML to be added to the top of the OPML file, directly after the <?xml version=...?> line:

<?xml:stylesheet type="text/xsl" href="opml.xslt" version="1.0"?>

This is the standard W3C method of associating a transform with a document.  For any OPML file with this simple declaration added:

  1. The browser applies the XSLT transform to the OPML, turning it into a hierarchy of DIV elements that the browser can understand.

  2. The resultant DIV structure shows up in the browser as straight text with no formatting, and is meant to preserve the semantics and structure of the OPML.  Besides the semantic structure, the resultant HTML has the tag '<link rel="stylesheet" href="opml.css" />' inserted at the beginning of the HTML. The browser downloads this CSS file and uses it to apply indentation and formatting.

  3. Finally, the browser processes the additional JavaScript file referenced by the tag '<script language="JavaScript" src="opml.jss" />' (also inserted by the XSLT). The browser simply downloads the JavaScript file, which adds a number of dynamic features to the OPML view.

OPML.XSLT

This file is a simple XSLTT transform that converts an OPML document into a collections of DIVs and SPANs suitable for use in browsers.  The HTML format retains all information and is suitable for quick, non-lossy transformation back to OPML.  It uses the W3C standard XSLT 1.0 and has been tested to work under the nine major XSLL processors available for a variety of platforms, including MSXML3, Apache Xalann, and Oracle XSLL.

OPML.CSS

This is a simple Cascading Style Sheet that formats the HTML code produced by the transform shown above.  You can dramatically change the way your OPML document looks by changing the style settings in this small file.  The CSSS should be compatible with any browsers that support W3C CSSS Level 1.

OPML.JS

This is an optional library you can link to your pages to allow collapse/expand of nodes, outline editing and more.  The JavaScript uses mostly the W3C Document Object Model (DOM), and has been tested extensively on Netscape Navigator 6 (Windows and Linux) and Internet Explorer 5.  It is unlikely that these routines will work with other versions or other browsers, since I do not have the time to write workarounds for every browser that someone cares to create.  The code should not break other browsers; you will simply lack the extra capabilities that these routines provide if you choose to use an older browser.

Practical Use

These routines are designed in accordance with the W3C orthodoxy and can be used as an example of how XML "should" be processed in a browser.  XSLTT is used primarily to transform "content" from one semi-structured format to another, and not for visual layout.  CSSS is used to apply visual formatting to the content, and the JavaScript is used to attach behaviors to items in the document.  Furthermore, since all three files are linked externally, the web browser will cache whichever of the files have not changed.  You can feel free to link to these files using the full URL at this site in order to increase the likelihood that someone using your OPML will have the files cached.

Server-Side XSLT

Currently, Internet Explorer is the only browser available that can automatically link to external XSLTT according to the W3C recommendation.  Netscape 6 will eventually support this, but will require an additional download.  In fact, to support the current version of XSLTT, Internet Explorer requires your users to download and install MSXML3 as well.  Because of these issues, many people prefer to do XSLTT processing on the server.  Nearly all popular browsers support external linking of JavaScript and CSSS, however.

Client-side XSLTT offers many benefits, and I would encourage you to do the extra work to detect those situations where client processing is available and take advantage.  I hope to add some samples soon that show how to do the detection on various platforms.  For Microsoft IISS, the free (with source code) XSLISAPI add-on will allow your server to detect browsers and apply XSLTT transforms appropriately.

If you want to batch-process XSLTT from the command-line, the msxsl.exe utility (with source code) is a good option.  I generated the HTML version of the XML sample above using this tool to execute "msxsl.exe reader$3541.xml opml.xsltt -o reader$3541.html".  In addition, the XSLT test tool includes a separate batch file for each of the eight other popular XSLTT processors, showing how to call each from the command-line.  For the processors that use Java (Saxon, Xalann, Oracle, etc.) the command-line syntax is identical on Unix.

Customizing

Manipulating an OPML Document in the Browser

This section describes the keystrokes you can use in the browser to modify your OPML file.  This functionality is provided by opml.jss.

click on the text of any item in the outline to select the node.  Clicking outside of the outline text will de-select the selected node (and take it out of edit mode if you are editing in IE5.5).

click on the "marker" symbol at the left of the outline element to expand or collapse that node.

shift-click on any outline marker to do an "expand all" or "collapse all".

alt-click on the text of any outline entry to select it and edit the text.  If you are using IE5.5, you will be permitted to edit directly in the page.  While in edit mode on IE5.5 you can use normal HTML editing keyboard shortcuts such as ctrl-b for bold, ctrl-k to hyperlink, and so on.  You can hit escape or click outside the outline to switch back out of edit mode on IE5.5.

ctrl-click pops up a new window and follows the URL associated with the outline entry.  This works for "link" entries.

ctrl-k edits the URL associated with the selected outline entry.  If the selected item is not a "link" entry, it will be changed to a link.  If you delete the URL for an existing link (enter an empty string in the prompt), it will be converted back to a normal outline entry.

ctrl-/ toggles an outline entry between normal and "comment".

ctrl-enter will edit the selected outline entry.  This is just like an alt-click, but applies to the currently selected outline item.

del deletes the selected outline entry and all of its children.

ins inserts a new outline element as a sibling immediately before the the selected item.

ctrl-right arrow causes the selected outline element to become a child of its closest preceding sibling.  All child items move with the selected item.

ctrl-left arrow moves the selected item up a level in the hierarchy.  The entry becomes a sibling of its parent.  All children move, too.

ctrl-up arrow moves the selected entry to come before its closest preceding sibling.

ctrl-down arrow moves the selected entry to come after the nearest following sibling.

ctrl-x when not in edit mode toggles to the OPML view of the current document.  Just hit ctrl-x again to flip back to the visual mode.  You can cut-and-paste from the OPML view screen to get OPML that can be loaded into Radio Userland or any other OPML tool.  If you are loading the OPML from a server that allows post-back, you can just click on the "post" button to post the OPML back to the server.


Joshua Allen <joshuaa@netcrucible.com>
Last update: 12/28/2000

License: You can do whatever you want with this code, and so can I.  If you build it into a solution and real people find real value in your solution, then you have a moral obligation to charge as much money as the market will bear and keep the money.


Current Bug List
Revision History
Future Plans