Making RSS Pretty

Abstract: Look at this and revel in the beauty of how nicely it formats. It's plain RSS, but (at least in most browsers) it will appear as a normal web page.

Normally when you view an RSS file in a browser, you just get an XML parse-tree diagram, which is very inscrutible and un-informative to casual users. I've come up with a few ways to improve this situation. None of these affect how the RSS actually looks in an RSS reader/aggregator.

My ideas here are neither original nor earthshattering, but I figure it might be interesting/useful for somebody out there, so I'm rounding them up for your amusement:

The Comment Approach

Just add a comment to the XML, early on in the file, like this:

<?xml version="1.0"?>
<rss version="2.0">
<!--

  Hey!
  This web page is actually a data file that is meant to be
   read by RSS reader programs.
  See http://interglacial.com/rss/about.html to learn
   more about RSS.

-->
<channel>
[...]

If this RSS appears to the user a plaintext, they'll see the comment just as you're seeing it now. If the RSS appears to the user as an XML parse tree, they'll still see the comment in the parse tree.
This works equally well for RSS and RDF and Atom.

I command all within the sound of my voice to add such a comment to their RSS output!

(Incidentally, whether the RSS appears as plaintext or as a parse tree seems to depend on the MIME type that the server sends it with -- text/plain or text/xml. But I've seen MS Internet Explorer occasionally override the server's mime type on other kinds of files based on local file-extension associations, so one never knows what it might do.)

The XMLCSS Approach

While most people are familiar with CSS as the language to format HTML, it can also be used to format XML. For example, this web page:
  http://haidalanguage.org/date/today_rss.xml
is styled by this CSS:
  http://interglacial.com/rss/rss.css

CSS allows assigning colors and positions to bits of text in the RSS file based on their containing element; and non-ancient CSS implementations even support inserting arbitrary text, as with this rule:

  link:before { content: "URL: " }
...which means that when the link element is displayed, the text "URL:" will be displayed before the element's content. CSS also allows hiding whole elements. For example, I hide all these elements, to make the visible RSS more concise:
  image, guid, ttl, skipHours, skipDays, updateBase { display: none }

Anyway, the way you can apply a CSS stylesheet to your RSS files is by copying my stylesheet from here:
http://interglacial.com/rss/rss.css
and then adding this xml-stylesheet line to your RSS, like this:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="http://yourserver.com/path/rss.css"?>
<rss version="2.0">[...]

(Of course, you can name the CSS file whatever-you-want.css -- but I find "rss.css" self-explanatory.)

CSS for styling RSS is a good first hack, and is probably more than enough for most purposes. (This is true for any XML doctype is general as well as for RSS specifically. Once, when I was very bored, I made this reductio ad obsurdum of CSS+XML styling for my FOAF file: http://interglacial.com/~sburke/sburke_foaf.xml )

A notable limitation of CSS is that it can't, for example, say that this bit of RSS:

  <link>http://www.weebls-stuff.com/toons/33/</link>

contains a URL which should be made into a link. As problems go, this is not a major one, but the next approach solves this.

(Another limitation of CSS is that it can only display data in the order that it appears in the XML file -- there's no good way to say "put the content of the Link element here, and the content of the Title element here, regardless of which you actually see first", because all that a CSS rule can mean is "when you see this kind of element, make it look like this". This too is fixed in the next approach.)

The CSS approach works just as well for RDF and Atom as for RSS, but my particular CSS won't format RDF or Atom; it'd need to be altered to target different the element names. (Hint: just google for atom.css or rdf.css, I bet you'll find something decent from someone else.)

XSL to render RSS as HTML

The XSL language is rather more complex than CSS because it is meant for something more potentially complex: taking any kind of XML and turning into just about anything else. Luckily, modern web browsers have a little XSL subsystem inside that you can use for turning your RSS (or any XML) into viewable HTML. The HTML isn't stored anywhere, but the browser displays it anyway.
(Again, this doesn't affect how the RSS actually looks or works for an RSS reader.)

This example of an RSS feed I provide uses XSL to control how the browser displays it:
  http://interglacial.com/rss/somethingawful.rss
And even:
  http://interglacial.com/rss/boy_on_a_stick_and_slither.rss

Here's the XSL:
  http://interglacial.com/rss/smb_rss2html.xsl

And here's the CSS that the resultant HTML uses:
  http://interglacial.com/rss/smb_xslrss.css

(That's quite a bit of acronym stew there -- SMB XSL RSS CSS. But I'll note in passing that the SMB there doesn't stand for "Samba" -- it's just my initials.)

The way you can apply a XSL stylesheet to your RSS files is by copying my stylesheet from here:
  http://interglacial.com/rss/smb_rss2html.xsl
  http://interglacial.com/rss/smb_xslrss.css
and then adding this xml-stylesheet line to your RSS, like this:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="http://yourserver/whatever/smb_rss2html.xsl"?>
<rss version="2.0">[...]

And then in your smb_rss2html.xsl file, find where it says "http://interglacial.com/rss/smb_xslrss.css" and change it to "http://yourserver/wherever/smb_xslrss.css"

The XSL approach works just as well for RDF and Atom as for RSS, but my particular XSL won't format RDF or Atom; it'd need to be altered to target different element names. (Hint: google for atom.xsl or rdf.xsl)

(One XSL problem that I've run into is that value-of's disable-output-escaping option doesn't seem to work directly, such as would be ideal for feeds with escaped HTML; but there is a workaround to basically make it work.)

Note that the approaches I've described here aren't exclusive of eachother -- you can freely have an RSS file that starts out like this:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="http://yourserver.com/path/rss.css"?>
<?xml-stylesheet type="text/xsl" href="http://yourserver/whatever/smb_rss2html.xsl"?>
<rss version="2.0">
<!--

  Hey!
  This web page is actually a data file that is meant to be
   read by RSS reader programs.
  See http://interglacial.com/rss/about.html to learn
   more about RSS.

-->
<channel>

The CSS would kick in only for browsers that don't support XSL (but do support XML CSS), although I don't happen to know offhand of any browsers like that. I'm told that Safari is such a browser.


sburke, 02004-06-21, updated 02006-01-09