Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with:

Converting XHTML To Text-Only Version Using ColdFusion And XSLT

Posted by Ben Nadel
Tags: ColdFusion

The other day, I was having a discussion about sending emails using ColdFusion. At one point, the conversation turned to email format. To me, in this day an age, it seems silly to even worry about text-only versions of emails. I mean really - are there even any clients anymore that can't handle HTML formatting? I think even BlackBerrys can handle HTML formatted emails. As such, I generally have no problem building apps that only send out HTML versions.

But, I did think it would be a fun exercise to come up with a way to take XHTML content for emails and automatically convert it into a text-only version. I really love writing and working with XML and it just seemed that XML Transformations using XSLT would be the right tool for the job. The following demo is what I came up with after a little bit of trial and error. I'm no XSLT expert (far from it), so it's not perfect. But, considering that this is automatically created, "just in case" content, I think it's pretty good:

  • <!--- Save HTML content. --->
  • <cfsavecontent variable="strHTML">
  •  
  • <h1>
  • Thank you for your purchase!
  • </h1>
  •  
  • <p>
  • Invoice number: <strong>12345</strong><br />
  • Price: <strong>$19.95</strong>
  • </p>
  •  
  • <hr />
  •  
  • <h2>
  • Purchased Products
  • </h2>
  •  
  • <table cellspacing="5" border="1">
  • <tr>
  • <td>
  • Muscle Girls Gone Wild
  • </td>
  • <td>
  • $10.95
  • </td>
  • </tr>
  • <tr>
  • <td>
  • Female Muscle - The Definitive Guide
  • </td>
  • <td>
  • $9.00
  • </td>
  • </tr>
  • </table>
  •  
  • <hr />
  •  
  • <p>
  • If you have any questions about your order please
  • contact us at
  • <a href="mailto:orders@amazon.com">orders@amazon.com</a>.
  • </p>
  •  
  • </cfsavecontent>
  •  
  •  
  • <!--- Define the XSLT --->
  • <cfsavecontent variable="strXSLT">
  •  
  • <?xml version="1.0" encoding="ISO-8859-1"?>
  • <xsl:transform
  • version="1.0"
  • xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  •  
  • <!--- Store variable for new line. --->
  • <xsl:variable
  • name="new-line"
  • select="'&#10;'"
  • />
  •  
  • <!--- Store variable for double-new line. --->
  • <xsl:variable
  • name="new-lines"
  • select="concat( $new-line, $new-line )"
  • />
  •  
  •  
  • <!---
  • Match the root node plus any nodes that are not
  • matched specifically by the templates defined
  • below.
  • --->
  • <xsl:template match="*">
  • <xsl:apply-templates select="text()|*" />
  • </xsl:template>
  •  
  • <!--- For all text nodes, output trimmed value. --->
  • <xsl:template match="text()">
  • <xsl:value-of select="normalize-space( . )" />
  • </xsl:template>
  •  
  • <!--- Denote primary header with hrule. --->
  • <xsl:template match="h1">
  • <xsl:apply-templates select="text()|*" />
  • <xsl:value-of select="$new-line" />
  • <xsl:text>---------------------------------</xsl:text>
  • <xsl:value-of select="$new-lines" />
  • </xsl:template>
  •  
  • <!--- Denote secondary headers with hash marks. --->
  • <xsl:template match="h2|h3|h4|h5">
  • <xsl:text>## </xsl:text>
  • <xsl:apply-templates select="text()|*" />
  • <xsl:value-of select="$new-lines" />
  • </xsl:template>
  •  
  • <!--- Turn block level elements into text-only. --->
  • <xsl:template match="p|blockquote|li">
  • <xsl:apply-templates select="text()|*" />
  • <xsl:value-of select="$new-lines" />
  • </xsl:template>
  •  
  • <!--- Add new line after table. --->
  • <xsl:template match="table">
  • <xsl:apply-templates select="*" />
  • <xsl:value-of select="$new-line" />
  • </xsl:template>
  •  
  • <!--- Turn table rows into bracketed values. --->
  • <xsl:template match="tr">
  • <xsl:apply-templates select="*" />
  • <xsl:value-of select="$new-line" />
  • </xsl:template>
  •  
  • <!--- Bracket table values. --->
  • <xsl:template match="td">
  • <xsl:value-of select="'[ '" />
  • <xsl:apply-templates select="text()|*" />
  • <xsl:value-of select="' ]'" />
  • </xsl:template>
  •  
  • <!---
  • Strip out any inline tags (and start them off with
  • an initial space so that nested and sibling tags don't
  • get concatenated text).
  • --->
  • <xsl:template match="strong|em|span|a">
  • <xsl:text> </xsl:text>
  • <xsl:value-of select="text()" />
  • </xsl:template>
  •  
  • <!---
  • Replace hrule with manual dashes.
  • NOTE: template also named for manual execution.
  • --->
  • <xsl:template match="hr" name="hr">
  • <xsl:text>. . . . . . . . . . . . . . . . .</xsl:text>
  • <xsl:value-of select="$new-lines" />
  • </xsl:template>
  •  
  • <!--- Replace break tag with new line. --->
  • <xsl:template match="br">
  • <xsl:value-of select="$new-line" />
  • </xsl:template>
  •  
  • </xsl:transform>
  •  
  • </cfsavecontent>
  •  
  •  
  • <!---
  • Convert to the HTML to text only. As we are doing this,
  • we need to wrap the HTML in a root node so that the XML
  • document we parse is well formatted.
  • --->
  • <cfset strTextOnly = XmlTransform(
  • ("<data>" & strHTML & "</data>"),
  • Trim( strXSLT )
  • ) />
  •  
  • <!--- Strip out doc type. --->
  • <cfset strTextOnly = Trim(
  • REReplace(
  • strTextOnly,
  • "<[^>]*>",
  • "",
  • "one"
  • )
  • ) />
  •  
  •  
  • <!--- Output the text-only verson. --->
  • <cfset WriteOutput( strTextOnly ) />

As you can see, the HTML would need to be stored in some sort of content buffer and it would have to be XHTML compliant such that it could be parsed using XmlParse(). My HTML content doesn't happen to have any special characters (ex: ampersand); but, if it did, I assume they would have to be escaped prior to XML parsing. Once the XHTML is parsed, I then use ColdFusion's XmlTransform() and the given XSLT document to create the following output (copied from rendered page source):

Thank you for your purchase!
---------------------------------

Invoice number: 12345
Price: $19.95

. . . . . . . . . . . . . . . . .

## Purchased Products

[ Muscle Girls Gone Wild ][ $10.95 ]
[ Female Muscle - The Definitive Guide ][ $9.00 ]

. . . . . . . . . . . . . . . . .

If you have any questions about your order please contact us at orders@amazon.com.

For an automated process, I think that's pretty cool! I'm not sure I would even bother putting this into an application; but, if I needed to, it's nice to see that automatically converting HTML email content into text-only content is a rather straightforward task.



Reader Comments

Interesting post. Speaking of which, when you have a free moment, will you be so kind as to answering the email I just sent you.

Thank you kindly.

Have a great day.

Reply to this Comment

For a comprehensive XSL template to convert XHTML to Text you use the screen reader template that comes with XStandard as a good starting point.

Email newsletters - I use XSLT to transform XHTML to plain text for our newsletter module. It works nicely.

Reply to this Comment

Hey Ben-

I know you are a way busy guy, but you think maybe you can answer my question as soon as you get a chance. I dont mean to be a pain but its really important.

Thanks, and sorry to bother.

Have a happy holiday weekend.

Reply to this Comment

Ben!

The problem isn't so much if e-mail clients can or can't read HTML-based messages, it's the darn rendering engines running within the email clients or webmail clients that make it a horrendous effort to create equal looking e-mails ;-)

Luckily there's http://www.email-standards.org/ ;-)

Reply to this Comment

Hey Ben-

Just wanted to say thanks for answering my questions. Good answer. As always, it was really great talking to you.

Hope to see you again real soon ;)!

Reply to this Comment

mein gott! you forget that many people prefer to turn off html email rendering, not merely to avoid their bandwidth sucking aquaintances spamming them with twinkling eFun, but so that slimy requests for evil embedded links can't be used by noxious, pestulant spammers to verify their manky catalogues of addresses and domains.

gah.

Reply to this Comment

First, Ben I can't tell you how much time you've saved me over the years. Thanks so much!

Your article on Converting XHTML To Text-Only... really solved a problem I had today.

Just one more question on this. My HTML has entities like this: &rsquo; but the SAX xmltransform engine doesn't like this.

I can replace the entities I know about in any given HTML, but is there a more universal solution.

Reply to this Comment

@Clarke,

I'm glad to know that this has helped. Your question about the & is a most excellent one. In fact, I think I know where the answer is; but I have never looked into it before. On a different post, Eric Stevens said something about creating an XML entity to work with these kinds of values:

Also, &reg; isn't self referential in our code like I said in my last paragraph, it's actually this:
< !ENTITY reg "< sup >&#174;</ sup >">

Now, granted, I don't know what that means exactly, but I think it means that you can define the special meaning of "&" in XML to stand for HTML elements.

Let me look into this in the AM - it is something I am very curious in as well. Thanks for reminding me about this.

Reply to this Comment

Thanks for the great tips, Ben.

With your help, the fix I found was to add

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

to the top of the HTML file. I tried this before I wrote my previous comment, but I forgot that the actual HTML content has to be wrapped in <data> tags. I ended up wrapping the DOCTYPE inside the <data> tags which, of course, won't work.

One more thing, I think I found a bug in this code:

# <xsl:template match="strong|em|span|a">
# <xsl:text> </xsl:text>
# <xsl:value-of select="text()" />
# </xsl:template>

The 3rd line should be:
<xsl:value-of select="text()|*" />

The |* was missing.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.