Wednesday, March 21, 2007

Valid XHTML - hacking the template

pencil icon, that"s clickable to start editing the post
Work in progress

Certain changes has to be done to the template to ensure that the it resolves to valid XHTML 1.0.

Namespace declarations

The template default has all the namespace declarations in the root <html> element which in principle is clean and simple:
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>
The problem is that the stay there even after the trip through the template engine, where the layout tags are resolved, and results in invalid XHTML (W3C validator) - extra namespace declarations shouldn't really be a problem, but the (stupid) DTD's that define XHTML 1.0 are NOT namespace aware and these declarations are seen as extra and invalid attributes. The solution is to move these declarations to the elements where they are needed, like ex. changing:
<b:include data='blog' 
           name='all-head-content'/>
to
<b:include xmlns:b='http://www.google.com/2005/gml/b' 
           data='blog' 
           name='all-head-content'/>

Resolved entities

Maybe the biggest problem with the transition from the SGML-ish HTML to the XML-ish XHTML is the collision between defined entities and the parameter splitter in URL's, as described in the article Ampersands (&'s) in URL's. To make bad worse the template engine resolves these entities, so that ex. and &amp; ends up like & (missing the 'amp;'). To get around this problem and extra 'amp;' has to be inserted, so that:
'"http://www2.blogger.com/email-post.g?blogID=59174493096083971&amp;postID=" + data:post.id'
is changed to
'"http://www2.blogger.com/email-post.g?blogID=59174493096083971&amp;amp;postID=" + data:post.id'
and this will end up like:
http://www2.blogger.com/email-post.g?blogID=59174493096083971&postID=7652344227457000560
for this post.

Custom elements in style comments

    <style id='page-skin-1' type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name:     Minima Stretch
Designer: Douglas Bowman / Darren Delaye
URL:      www.stopdesign.com
Date:     26 Feb 2004
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
This problem does partly come from the template engine again since it removes CDATA declaration as the recommendation says in 4.8. Script and Style elements. In fact in C.4. Embedded Style Sheets and Scripts it says:
Use external style sheets if your style sheet uses < or & or ]]> or --.
which is the case here, but since the template stays as one file this ends up invalid (blogger should just split it into a custom css-file (there are plenty of them already). To eliminate this problem I have two options, one is to embed it in a comment section.
Therefore, the historical practice of "hiding" scripts and style sheets within "comments" to make the documents backward compatible is likely to not work as expected in XML-based user agents.
since these variables are only needed on the server side and not in the final web page, so ignoring it doesn't do any harm. The other options is to try to create a CDATA section

The lang attribute

A minor change to follow the recommendation is in C.7. The lang and xml:lang Attributes