ODF visualization using WebKit


Today is day 1 of of the OdfKit Hack Week. We wrote a list of things we want to achieve this week. In order to avoid embarrassment, we’ll spare you the details and go straight through to an explanation of how you can use WebKit (or any modern browser) to visualize ODF documents. The general idea is to incorporate the ODF XML into a live HTML document.

Step 0: load content and styles into an HTML document

ODF files come in two flavors: single XML files and XML files in ZIP containers. Most people use the ZIP form exclusively. In both cases there are two XML elements of importance: <document-content/> and <document-styles/>. These are comparable to HTML and CSS respectively. We’ll avoid the details of how we load these elements into the DOM tree for now and simply state that we have two javascript variables:

Step 1: put the document contents in the web page.

Let’s start from a simple HTML document with a <div/> element where the ODF element <document-content/> can be imported.

The importing can be done like this:

The result is that the DOM tree has now mixed namespaces: elements from the ODF namespaces are imported into the HTML namespace. HTML viewers display the text inside the foreign elements even though there are no rules for rendering the foreign elements.

Step 2: adding document styles

Even though the added elements are in a foreign namespace, it is still possible to use CSS to give them styles. This is possible by using namespaces in CSS:

This simple CSS example already improves the visualization of the ODF elements a lot. It is, however, very general. There are only general ODF styles, but no user-defined styles. No panic! CSS selectors are flexible to allow these too. Here is an example of specific ODF style ported to CSS. The original ODF


So you see that it is possible to display ODF documents in a web browser or web widget. There is a demo with a more elaborate visualization at our demo page.


Post a comment