<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="transformer.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Experimenting with XSLT to transform XHTML into...XHTML</title>
<meta name="author" content="Patrick H. Lauke" />
<meta name="copyright" content="&copy; splintered.co.uk" />
<meta name="description" content="Using XSLT to transform XHTML into another form of XHTML. In this instance, to create something akin to a summary/listing of key elements." />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
<style type="text/css">
body { margin: 1em; text-align: left; }
</style>
<link rel="home" title="splintered home page" href="/" />
<link rel="up" title="splintered experiments" href="/experiments/" />
</head>

<body>
<h1>Experimenting with <acronym title="eXtensible Stylesheet Language Transformation">XSLT</acronym> to transform <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> into...<acronym title="eXtensible HyperText Markup Language">XHTML</acronym></h1>
<p>Admittedly, I'm a novice when it comes to <acronym title="eXtensible Stylesheet Language Transformation">XSLT</acronym>.</p>
<p>However, this does not stop me from playing around with the technology for my own evil purposes...</p>
<p>I've seen quite a number of excellent <acronym title="eXtensible Stylesheet Language Transformation">XSLT</acronym> examples that demonstrate how the technology can be used to transform one type of <acronym title="eXtensible Markup Language">XML</acronym> format into another - Atom into <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>, for instance.</p>
<p>Here's an off the wall idea though: why not use it to change a simple <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> file like this one into...another <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> file? Yes, I know, not earth-shattering, but it was a weird thought that I needed to get out of my system.</p>
<p>If you have a browser capable of client-side <acronym title="eXtensible Stylesheet Language">XSL</acronym> 
transformations (<acronym title="Internet Explorer">IE</acronym>6.0 or any Gecko-based 
one will do), you can view this simple page as it appears after being processed 
through this <acronym title="eXtensible Stylesheet Language Transformation">XSLT</acronym>.</p>
<ul>
<li><a href="./">View the regular file</a></li>
<li><a href="./?transform=1">View the transformed file</a></li>
<li><a href="./transformer.xsl">View the transformation file</a></li>
</ul>
<h2>Technical side note</h2>
<p>All I'm doing to trigger the transformation is adding <code>&lt;?xml-stylesheet 
type="text/xsl" href="transformer.xsl"?&gt;</code> via a small <acronym title="PHP Hypertext Processor">PHP</acronym> 
switcher that looks for the presence of the <code>transform</code> GET variable.</p>
<p>View the source of the regular file, and compare it with the source of the 
transformed one. For added fun, if you use Mozilla or Firefox, load up the transformed 
file in the DOM inspector to see what the transformation really created.</p>
<p>Putting my accessibility hat on, it may also be worth noting: tests using JAWS 
4.01 and <acronym title="Internet Explorer">IE</acronym>6 indicate that the screenreader 
is perfectly happy working on the transformed version of the page (<abbr title="id est" lang="la">i.e.</abbr> it reads 
the result <strong>after</strong> the transformation).</p>
<p>Originally, this page (and the transformed version) were sent to the browser as <code>application/xhtml+xml</code>. <acronym title="Internet Explorer">IE</acronym>, however, doesn't like that, and prompts for download.</p>
<p>My initial thought was to then send both versions as <code>application/xhtml+xml</code> 
for browsers that support it, and simple <code>text/html</code> for others. Unfortunately, 
this prevents <acronym title="Internet Explorer">IE</acronym> from applying the 
client-side transformation in the transformed file.</p>
<p>Third idea was to just send both versions as <code>application/xml</code>. 
Once again, <acronym title="Internet Explorer">IE</acronym> didn't play ball, 
refusing to then display the regular <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 
file as a web page.</p>
<p>Final, slightly kludged, solution - involving some server-side scripting:</p>
<ul>
<li>send both versions as <code>application/xhtml+xml</code> for browsers that support it (<abbr title="exempli gratia" lang="la">e.g.</abbr> Firefox)</li>
<li>send the regular file as <code>text/html</code> for <acronym title="Internet Explorer">IE</acronym></li>
<li>send the transformed file as <code>application/xml</code> for <acronym title="Internet Explorer">IE</acronym></li>
</ul>
</body>
</html>