XBRL microformats examples

On the links on this page you will see example XHTML pages. On both of these you will want to use your browsers View source feature to see how they are marked up. Click on the "Get XBRL" link to obtain the XBRL (it runs the -- currently server side -- XSLT). And you can see the XSLT by clicking on that link.

The idea of embedding XBRL inside XHTML is inspired by the idea of a Microformat. Both of these examples were created by taking some real financials that were already in HTML (as many are), tweaking them into XHTML and embedding additional information. Thanks to Reuters Plc for permission to use their data.

Option 1: Microformatty

This approach follows conventional "microformat" syntax fairly closely:

If you view the source of the XHTML, you will see that each fact is accompanied by the information necessary to create an XBRL fact and its accompanying context and unit information. This format makes use of CSS classes to mark up the data: each fact is contained within a container of class "xbrl-fact", and within the container, classes are used to define the different information associated with a fact. A trivial piece of CSS turns off the display of all parts except the "xbrl-value" component, but it would be straightforward to do something more sophisticated that would allow the inspection of the other components.

The "highlight tags" link at the bottom is a trivial piece of JavaScript that changes the CSS style associated with the "xbrl-fact" components.

If you view the XBRL that is produced by the stylesheet you will see that it creates a large number of equivalent contexts. This is not XBRL best practice, but this is a limitation created by our desire to go from the XHTML to the XBRL in a single-pass XSLT stylesheet: consolidating the contexts is a tricky job to code using XSLT, but we regard this as an implementation detail. It would be straightforward to do in another language, and could be performed by an entirely generic "XBRL normaliser". Or possibly, an XSLT guru could show us how it can be done.

Option 2: Embedded XBRL

Our second attempt uses more "embedded" XBRL.

This approach follows an XBRL instance document more closely. Indeed, a skeleton instance document is included verbatim at the top of the document to define contexts and units. The HTML element that contains each figure has some added attributes that provide the necessary information to define the XBRL fact. This approach is similar to that used to embed SVG in XHTML (e.g. http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml).

Option 3: The initial approach

The route we took for the initial discussions of the XII Rendering WG was based on the "Embedded" approach. The last version of this comprised:

Option 4: Inline XBRL

This version is currently an Internal Working Draft within the XII Rendering Working Group. By including fragments of XBRL inline, within the XHTML, it makes the production of the XHTML document easier, and the transformation stylesheet become much shorter and simpler:

Another Example of Inline XBRL

* Microsoft's FY08 Q1 filing:

http://xbrl.standardadvantage.com/inlineXBRL/

General Comments

It's worth pointing out than the normalization issue and the microformatty versus embedded issue are somewhat independent. You could create a normalized, but microformatty approach, for example.

There is some complexity around the handling of scales. For example, if you are expressing the value 2,100,000 as "2.1", you need the MicroXBRL to surround the value that will be displayed, but the XBRL needs to capture the amount in full. Have a look at the way we are currently achieving that and see if you agree with the approach -- there will need to be some additional functions identified and written.

The IWD (Inline XBRL) approach uses XSLT 1.0, which means the transformation can be carried out inside the browser.

Unresolved issues with the approaches are documented on the OpenIssues page.