Validating your HTML/CSS for use in Xopus

In Internet Explorer Xopus relies on the contentEditable feature. But unfortunately activating contentEditable will change the look and feel of the HTML output of your XSLT. The goal of most of our CSS and HTML best practises is to prevent or workaround these effects.

In practise a designer will create some HTML that has to be used in Xopus. To test how that HTML looks in Xopus, you usually have to convert it into an XSLT and start Xopus to see the effects of contentEditable. Another approach would be adding the contentEditable attribute to the body element in your HTML file. But that does not give an accurate picture, since Xopus can prevent quite a lot of the unwanted contentEditable behavior, so the results of setting contentEditable in the HTML would be worse (and very hard to fix).

Another approach would be converting the HTML to XHTML and using the following stylesheet in Xopus:

<?xml version="1.0">
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/*">
    <xsl:copy-of select="document('xhtml.xml')/*"/>
  </xsl:template>
</xsl:stylesheet>

The XML and XSD used are irrelevant, so for performance use some of the small examples shipped with Xopus. The XHTML file is given a .xml extension to ensure that the webserver will serve it with the right content type. And of course this will only show contentEditable artifacts in Internet Explorer.

Using this technique a designer can test his/her own HTML/CSS directly in Xopus. Now you can have HTML optimized for Xopus before you start coding XSLT.

Note that this method only applies to Xopus 3. Xopus 4 will no longer use contentEditable. This means that in Xopus 4 your HTML will look and behave exactly as it would look and behave outside of Xopus.

Modified: February 29th 2008
By: Laurens van den Oever