Search

I’m a Plone developer trying to move xhtml 1.0 transitional to valid html5 through xslt. This forum gave me a lot of ideas. I finally just opted to use this:

  <xsl:template match="*[not(node())]">
  <xsl:copy>
    <xsl:for-each select="@*">
        <xsl:variable name="LocalName" select="local-name()"/>
        <xsl:attribute name="{$LocalName}"> 
            <xsl:value-of select="."/>
        </xsl:attribute>
    </xsl:for-each>
    <xsl:comment/>
  </xsl:copy>
</xsl:template>
<xsl:template match="script[not(node())]">
  <xsl:copy>
    <xsl:for-each select="@*">
        <xsl:variable name="LocalName" select="local-name()"/>
        <xsl:attribute name="{$LocalName}"> 
            <xsl:value-of select="."/>
        </xsl:attribute>
    </xsl:for-each>
    <xsl:text disable-output-escaping="yes">// Stop XSLT from closing tag
    </xsl:text>
  </xsl:copy>
</xsl:template>
<xsl:template match="@*|area[not(node())]|base[not(node())]|br[not(node())]|col[not(node())]|command[not(node())]|embed[not(node())]|hr[not(node())]|img[not(node())]|input[not(node())]|keygen[not(node())]|link[not(node())]|meta[not(node())]|param[not(node())]|source[not(node())]">
  <xsl:copy>
     <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

So basically select all the emtpy tags and add an xml/html comment, except for script (add a valid javascript comment instead) and the void elements (just put them ack as they were). No idea if it has any impact on indenting, but it solved my empty tag issues.

I’ve managed to shorten the code some more.

<!-- Set output to HTML5 -->
<xsl:output doctype-public="html" doctype-system=""/>

<!-- Get empty elements -->
<xsl:template match="*[not(node())]">
  <xsl:copy>
    <xsl:copy-of select="@*"/>
    <xsl:comment/>
  </xsl:copy>
</xsl:template>

<!-- Exclude void elements -->
<xsl:template match="area[not(node())]|base[not(node())]|br[not(node())]|
        col[not(node())]|command[not(node())]|embed[not(node())]|
        hr[not(node())]|img[not(node())]|input[not(node())]|
        keygen[not(node())]|link[not(node())]|meta[not(node())]|
        param[not(node())]|source[not(node())]">
  <xsl:copy-of select="."/>
</xsl:template>

Interesting Thijs, I’m not experienced enough with either Symphony or XSL to really comment on this but I’ll check it out later.

Hi,

I have a requirement to embed audio/video files with html5 (since application is also accessible in iphone/ipad), can anyone please give directions how to do this with symphony?

@Girija - Few questions…

  1. Where are you hosting the audio/video files?
  2. Or are you using a service like Vimeo or YouTube?
  3. Have you setup your Symphony site yet? If so, can you post the XML and XSLT you have for the video/audio page?

would anyone be interested in an adaptation of paul irish’s html5 boilerplate for symphony and xslt?

@fawx - did you do one? I actually made an attempt at one that I sent to Paul Irish. I don’t know how good it is, but I’m open to hear how I can improve it.

Here you go :)

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<xsl:text disable-output-escaping="yes"><![CDATA[<!doctype html>]]>
</xsl:text>
<xsl:text disable-output-escaping="yes"><![CDATA[
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
]]></xsl:text>

<head>
    <meta charset="utf-8" />
    <xsl:text disable-output-escaping="yes"><![CDATA[
    <!--[if IE ]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <![endif]-->
    ]]></xsl:text>
    <title></title>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="stylesheet" href="/workspace/assets/css/style.css?v=1" />
    &lt;script src="/workspace/assets/js/libs/modernizr-1.6.min.js">&lt;/script>
</head>

<body>



    <xsl:text disable-output-escaping="yes"><![CDATA[
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">&lt;/script>
    &lt;script>!window.jQuery && document.write(unescape('%3Cscript src="/workspace/assets/js/libs/jquery-1.4.2.min.js"%3E%3C/script%3E'))&lt;/script>

    &lt;script src="/workspace/assets/js/plugins.js">&lt;/script>
    &lt;script src="/workspace/assets/js/script.js">&lt;/script>

    <!--[if lt IE 7 ]>
    &lt;script src="/workspace/assets/js/libs/dd_belatedpng.js?v=1">&lt;/script>
    <![endif]-->

    &lt;script>
    var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; 
    (function(d, t) {
        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
        g.async = true; g.src = '//www.google-analytics.com/ga.js'; s.parentNode.insertBefore(g, s);
    })(document, 'script');
    &lt;/script>
    ]]></xsl:text>
</body>
<xsl:text disable-output-escaping="yes">
<![CDATA[</html>]]>
</xsl:text>

</xsl:template>

</xsl:stylesheet>

So basically select all the emtpy tags and add an xml/html comment, except for script (add a valid javascript comment instead) and the void elements (just put them ack as they were). No idea if it has any impact on indenting, but it solved my empty tag issues.

@tjonkman - would you mind posting a full stylesheet and some example xml with your solution? For some reason, I am having difficulty getting your solution to work.

@miathrom thanks, thats a nice start!
@fawx do you have a different method?

It would be nice to see a solution that would allow for further manipulation of each tag. For example, when the lang, dir and class attributes need to be manipulated.

I went and made my own version of Paul Irish’s HTML5 boilerplate based upon various code found throughout the forums. I’ve put it up as a gist on github for now, but can turn it into a utility if people agree with my approach.

I added {$current-page} as a class to the html tag because I personally find it more useful there, and I’m using rainerborene’s headjs utility in favour of modernizr, which places an ID instead - so the two won’t clash. Moreover the class would persist even when JavaScript is turned off.

You’ve left a blank <title> element in there ;o)

Also, correct me if I’m wrong, but this comment

<xsl:comment><![CDATA[[if (gt IE 9)|!(IE)]><!]]></xsl:comment>

Won’t that fail for non-ie browsers? As it’s IE browsers that understand conditional comments and not others?

Ignore that particularly stupid question. I would delete it only the forum won’t let me. (Perhaps it’s trying to help me look like an idiot, damn you forum shakes fist)

Added in a $page-title param, thanks for spotting that. I like the fact that we keep extending it to take more advantage of Symphony.

(Perhaps it’s trying to help me look like an idiot, damn you forum shakes fist)

Didn’t your mother teach you to think before you click “Post”? thinking…

this is what i’ve been working off of.

@bzerangue I don’t think a complete stylesheet will help much because mine are tailored to Plone XDV theming. It basically uses a python product to create the stylesheet on the fly, you don’t have to write any xsl if you do an xhtml site. Only when you try funny stuff, you might need to grab for xsl (like writing plone’s xhtml1.0 transitional to html5).

With XDV theming you use regular html site content to inject into a html template of you making. From what I can gather from some of the posts, symphony delivers the content in xml format? There won’t be any other usable overlap between the code I think.

Nonetheless, the basic idea of the xsl should also work for symphony. What I’m using is a recursive template. The first xsl:template selects all empty elements and gives general instructions, the second xsl:template selects all void elements and overides the general instructions. Not enough of a xsl wizz to know how it plays together with matching “/”, but my first guess would be put it after that. If that doesn’t work, google tends to help after a few hours :)

I keep coming back to this because, like Nick Dunn

What frustrates me is using mode="html" to get the leanest HTML markup (no self-closing ,
etc), but losing indenting.etc), but losing indenting.

Nick, you mention working on the 'html5 hack extension' "to add indentation back in". Have you worked on this yet?

Also I would like to know what seems to be the most recent/best version of the 'html5 hack extension'. At the moment I believe it's the one hosted by Micheal-e on Github but I'm not sure.

Nick, you mention working on the 'html5 hack extension' "to add indentation back in". Have you worked on this yet?

I did get it working and used it on my personal site for a while (extension currently disabled) because I found some bugs. The code is a series of regular expressions that matches an HTML tree and adds indentation again. The main problem I had was it would also affect content inside form elements, so text within <textarea> would become indented and distorted.

To be honest, I gave up when I realised that post-manipulating markup to this extent is rather a vain task. Perhaps it would be useful for debugging purposes (if you don't have Firebug) but I'm leaning towards compressing markup as much as possible.

If you want to try, here's the code. It's pretty much lifted verbatim from a sample I found elsewhere (can't remember the resource to fully credit, sorry). I'm reluctant to pursue this folly any further, but if you have success please let me know :-)

Also I would like to know what seems to be the most recent/best version of the 'html5 hack extension'. At the moment I believe it's the one hosted by Micheal-e on Github but I'm not sure.

I am afraid this is true. But it's a fork of the domain7 repo (which is maintained by bauhouse). If bauhouse drops me a line, I can prepare a pull request.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details