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.
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:
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.
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:
The browser applies the XSLT transform to the OPML, turning it into a hierarchy of DIV elements that the browser can understand.
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.
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.
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.
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.
XSLT - you should be able to modify the XSLTT and still have the CSSSS and JavaScript work fine, as long as you keep the existing structure of DIVss and attribute classes. At the top of the XSLTT file are three variables that you can change to change the appearance of the icons to the left of outline elements. I used Unicode characters here in an attempt to stay faithful to the appearance of Radio Userland, which is the ultimate outline editor. Using Unicode here also made it easy to detect problems that might have prevented me from being able to enter Chinese or other characters into an outline. You may replace these with GIF references or whatever else suits you. Note that I use the xsl:stripp-space element at the top to remove any extra whitespacee in the output. This makes the output less readable, but was necessary to work around a problem in Netscape 6. Also notice that all text="" attributes in the OPML file are changed instead to normal text inside a SPAN with class="outlineTextt". All other attributes of the OPML are copied into spans with class="outlineAttributee". In the case of outlineTextt, the text is copied using disable-output-escaping. This is necessary so that HTML that is entity-encoded in the outlineTextt will be rendered as HTML in the browser.
CSS - you should try to do all visual modifications in the CSSS. Note that classes "markerOpenn" and "markerClosedd" apply generically to all marker symbols (markerLinkk, markerCommentt, etc.). They currently use the Radio Userlandd style of gray for open, black for collapsed nodes that have children. There are certain types of visual effects that will require you to depart from the W3C liturgy and make modifications outside of CSSS. In the cases where you want the actual HTML content (.innerHTMLL, etc.) to change based on style, you will need to use either the XSLTT or JavaScript. (CSS2 actually specifies a way to do this, but no browsers support it yet.) Additionally, CSSS for mouse hovering is quite incompatible across browsers and is perhaps best done in JavaScript. A good rule of thumb, though, is to avoid putting things that affect visual formatting into the JavaScript or XSLTT unless absolutely necessary -- it will make your life easier later on.
JavaScript - The JavaScript should be fairly easy to customize and extend. It is organized into blocks of event handlers, outline manipulation routines, and wrappers for cross-browser DOM manipulation. Both Internet Explorer and Navigator 6 have bugs that cause screen rendering to become inconsistent; the refreshScreenn() routine can be used to encourage the browser to redraw if your custom code encounters these issues. Throughout the code, the global variable contextNodee is used to point to the currently selected node. If no node is selected, this will be null. contextNodee actually refers to the SPAN of class outlineTextt and not to the parent DIV of class outline, so be careful with that. Both Internet Explorer 5.x and Netscape Navigator 6 claim to support the W3C DOM recommendation, so in theory you should be able to use the same JavaScript code on both browsers. The difficult part, however, is finding which W3C technique is actually implemented in both browsers so that you can use that one instead of another. When you find something that appears it should work on both browsers, you can save yourself headaches by checking the Microsoft and Netscape DOM references to see if they actually support it.
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.