Getting XHTML Valid Ampersands with the New Blogger Templates

If you have switched to the new Blogger templates, there are a couple of quirks to building XHTML valid pages. One is how to get your expressions to properly use the ampersand character. This post explains how to do that.
To begin, let's clarify our vocabulary a bit:
"&" is a single ampersand character. This is legacy HTML code that is invalid in modern XHTML.
"&" is an ampersand word. It has 4 characters and the last is a semi-colon. This was supported in HTML but is required in XHTML in place of the ampersand character.
As mentioned in another post, to build pages that are XHTML compliant you need to replace the "&" with "&". When using an HTML/XHTML editor (like DreamWeaver), this is a straightforward substitution. The same goes for using the Blogger "classic" templates - just replace any places you've used with "&" with "&". However, if you are using the new Blogger templates, this isn't has straighforward as you might think.
Consider a snippet from a new Blogger template that is supposed to build a link to be able to edit the current post on the current blog. The example below uses the "expr:href" element in the new Blogger templates that allows you to build an expression that when evaluated the value will be assigned to the "href" element of an HTML link. In this example, we are combining the URL to Blogger's edit feature with a variable for the blog ID and finally adding a variable for the post id of the current page. Blogger figures out the id for the page as it is generated and stored on the web server. Notice the use of the ampersand in that href expression - the code generated will not validate as XHTML.
This...
<a class='edit-link' expr:href='"http://www.blogger.com/post-edit.g?blogID=19459839&postID="+data:post.id' title='permanent link'> Edit < /a>
....produces the following invalid result:
<a class='edit-link' href='http://www.blogger.com/post-edit.g?blogID=19459839&postID=12345' title='permanent link'> Edit < /a>
You'd think that you could replace the ampersand character with the ampersand word. That approach will work with regular HTML/XHTML pages and will work with the pages generated by Blogger classic templates.... but won't work with the new Blogger templates. The problem is that with the new Blogger templates the valid ampersand word will, when the page is generated by Blogger, get converted back to the invalid single character character.
This...
<a class='edit-link' expr:href='"http://www.blogger.com/post-edit.g?blogID=19459839&amp;postID="+data:post.id' title='permanent link'> Edit < /a>
...still produces the same invalid result:
<a class='edit-link' href='http://www.blogger.com/post-edit.g?blogID=19459839&postID=12345' title='permanent link'> Edit < /a>
The trick to get what you want is to realize that valid ampersand word is itself actually composed of an ampersand character and then a short character string. So, to get the Blogger processing engine to take your template and generate valid XHTML pages (and knowing that it will convert a valid word into the invalid character) you need to get your template to do two things:
  1. Use the valid XHTML word for ampersand and let it get converted to the single ampersand character
  2. Also include in the template the three "mp;" characters which pass thru Blogger with no changes and will get appended to the single ampersand character in the output to re-form a valid XHTML ampersand word.
In that case, this....
<a class='edit-link' expr:href='"http://www.blogger.com/post-edit.g?blogID=19459839&amp;amp;postID="+data:post.id' title='permanent link'> Edit < /a>
.... will produce a valid result in the output:
<a class='edit-link' href='http://www.blogger.com/post-edit.g?blogID=19459839&amp;postID=12345' title='permanent link'> Edit < /a>
There you have it! Success!

No comments: