Test

Powered by Blogger.

Sunday 29 April 2012

RSS feed by XML using CSS

Improving an XML feed display through CSS and XSLT

XML feeds, though useful, are boring to look at in a browser because they are simple XML files. It's possible though to make them easier on the eye, and in this article we'll look at two ways of doing that. First, we'll use simple CSS properties to format each XML node, and then we'll use a little more complex but much more powerful XSL transformation.


Introduction

XML feeds have become a common way for people to keep updated on their favorite websites, no matter what specification they follow (RSS, Atom, etc.). XML files suffer though from poor usability by nature as they are not friendly to look at in the browser. Your feed handler (e.g. FeedDemon, FeedReader, NewsGator, etc.) will, of course, display them in a nicely formatted way, but in this article we'll see two ways to spice up their boring browser display:

    Using CSS definitions on the individual notes
    Applying an XSL Tranformation file

For our example, we'll assume that we are serving feeds in RSS 2.0 format, but the principles discussed should apply for any type of XML feed. You can rest assured that this type of formatting will not change the way your readers use your feeds. I first got this idea after reading a blog entry by Pete Freitag.
First, the original XML feed

So, Let's a take a look at a typical RSS 2.0 feed: an example of a possible "latest articles" feed for this site:
<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/css" href="itemof.css" ?>
     <rss version="2.0">
     <channel xmlns:html="http://www.w3.org/1999/xhtml">
   
      <html:hr/>
   
         <title>rtechinsane.in</title>
        <html:hr/>
         <link>http://www.rtechinsane.in</link>
         <description>The latest articles from rtechinsane.in</description>
         <language>en-us</language>
         <copyright>Copyright 2012 rtechinsane.in</copyright>
         <docs>http://blogs.law.harvard.edu/tech/rss/</docs>
         <lastBuildDate>Mon, 23 April 2012 00:00:00 MST</lastBuildDate>
        
         <item>
             <title>Improving an XML feed display through CSS and XSLT</title>
            <photo>
         <html:img src="img.jpg" width="80" height="80" />Flannel Bush
      </photo>
             <description>XML feeds, though useful, are boring to look at in a browser because they are simple XML files. It's possible though to make them easier on the eye, and in this article we'll look at two ways of doing that. First, we'll use simple CSS properties to format each XML node, and then we'll use a little more complex but much more powerful XSL transformation.</description>
             <pubDate>Sun, 06 Mar 2005 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=24</link>
         </item>
        

         <item>
             <title>Identity fields in Oracle and SQL Server</title>
            <photo>
         <html:img src="img.jpg" width="80" height="90" />Flannel Bush
      </photo>
             <description>While it may be relatively easy to create an incrementing and unique identifier inside a table in SQL Server, things get tricky with Oracle. In this article, we'll see the differences between the two databases and offer a way of solving the problem.</description>
             <author>email@yoursite.com </author>
        <pubDate>Mon, 17 Mar 2003 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=23</link>
         </item>

        
         <item>
             <title>Exporting Word files to HTML</title>
            <photo>
         <html:img src="img.jpg" width="80" height="80" />Flannel Bush
      </photo>
             <description>In this article we will first discuss the case for and against using Word as your HTML editor. Then we will see how to properly save a Word file to smaller, more compact HTML files. Third and last, we will see how to do this through code, and possibly create a batch process for converting numerous Word files to HTML at once.</description>
             <author>email@yoursite.com </author>
             <pubDate>Wed, 05 Mar 2003 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=22</link>
         </item>

        
     </channel>
     </rss>

We are not doing anything new here. We are following the RSS 2.0 specification to create this feed: a channel wrapper with its feed properties, including as many item nodes as we want of the latest posts (with their own properties). Here's what this feed looks like through the browser:

XML Feed with no formatting

Basic yes, friendly to look at no. So, let's see how to improve this display.
Formatting through CSS

The principle here is that since a feed is made up of XML nodes, we can apply CSS formatting on them to change the way they display in the browser. First we need to add the CSS reference inside the XML file. This can be a full URL with the domain, or simply a website relative address:
1     <?xml version="1.0" encoding="ISO-8859-1" ?>
2     <?xml-stylesheet type="text/css" href="/includes/css/rssfeed.css" ?>
3     <rss version="2.0">

Under channel, we have the mandatory title, which is the feed title. To edit the display of this node to a bigger text size we can simply add this to our CSS:
1     channel title {
2         font-size:140%;
3     }


We can follow this principle to format the rest of the notes. One issue that we have to keep in mind is that if there is more than one node named title, then they will all inherit the same properties. In the example shown, the second tag will also display with font size 140%. To fix this, we will need to create a separate CSS property for it and change the size:
1     channel item title {
2         font-size:100%;
3     }

Our feeds most often contain properties that we may not necessarily want to have them display in our improved version. So. we can group all nodes that we want to hide and change their display property to hidden. The order of the nodes in the XML file will be maintained, unless you can figure out a way to change this through CSS.

Here is a complete CSS file as an example:
1     channel link, channel language, channel copyright, channel managingEditor, channel webMaster, channel docs, channel lastBuildDate {
2         display:none;
3     }
4     rss {
5         font-family:Verdana, Arial, Helvetica, sans-serif;
6         font-size:0.7em;
7         line-height:130%;
8         margin:1em;
9     }
10     /* HEADER */
11     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
12     channel title {
13         display:block;
14         padding:0.4em 0.2em;
15         color:#FFF;
16         border-bottom:1px solid black;
17         font-weight:bold;
18         font-size:140%;
19         background-color:#4483C7;
20     }
21     channel description {
22         display:block;
23         float:left;
24         font-size:130%;
25         font-weight:bold;
26         margin:0.5em;
27     }
28     /* CONTENT */
29     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
30     channel item {
31         background-color:#FFFFEE;
32         border:1px solid #538620;
33         clear:both;
34         display:block;
35         padding:0 0 0.5em;
36         margin:1em;
37     }
38     channel item title {
39         background-color:#538620;
40         border-bottom-width:0;
41         color:#FFF;
42         display:block;
43         font-size:110%;
44         font-weight:bold;
45         margin:0;
46         padding:0.3em 0.5em;
47     }
48     channel item description {
49         display: block;
50         float:none;
51         margin:0;
52         text-align: left;
53         padding:0.2em 0.5em 0.4em;
54         color: black;
55         font-size:100%;
56         font-weight:normal;
57     }
58     channel item link {
59         color:#666;
60         display:block;
61         font-size:86%;
62         padding:0 0.5em;
63     }
64     channel item pubDate {
65         color:#666;
66         display:block;
67         font-size:86%;
68         padding:0 0.5em;
69     }

   

Here's a screenshot of the resulting output:

XML feed with CSS formatting

No comments:

Post a Comment

RSS

Categories

Followers

Blog Archive

Sunday 29 April 2012

RSS feed by XML using CSS

Improving an XML feed display through CSS and XSLT

XML feeds, though useful, are boring to look at in a browser because they are simple XML files. It's possible though to make them easier on the eye, and in this article we'll look at two ways of doing that. First, we'll use simple CSS properties to format each XML node, and then we'll use a little more complex but much more powerful XSL transformation.


Introduction

XML feeds have become a common way for people to keep updated on their favorite websites, no matter what specification they follow (RSS, Atom, etc.). XML files suffer though from poor usability by nature as they are not friendly to look at in the browser. Your feed handler (e.g. FeedDemon, FeedReader, NewsGator, etc.) will, of course, display them in a nicely formatted way, but in this article we'll see two ways to spice up their boring browser display:

    Using CSS definitions on the individual notes
    Applying an XSL Tranformation file

For our example, we'll assume that we are serving feeds in RSS 2.0 format, but the principles discussed should apply for any type of XML feed. You can rest assured that this type of formatting will not change the way your readers use your feeds. I first got this idea after reading a blog entry by Pete Freitag.
First, the original XML feed

So, Let's a take a look at a typical RSS 2.0 feed: an example of a possible "latest articles" feed for this site:
<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/css" href="itemof.css" ?>
     <rss version="2.0">
     <channel xmlns:html="http://www.w3.org/1999/xhtml">
   
      <html:hr/>
   
         <title>rtechinsane.in</title>
        <html:hr/>
         <link>http://www.rtechinsane.in</link>
         <description>The latest articles from rtechinsane.in</description>
         <language>en-us</language>
         <copyright>Copyright 2012 rtechinsane.in</copyright>
         <docs>http://blogs.law.harvard.edu/tech/rss/</docs>
         <lastBuildDate>Mon, 23 April 2012 00:00:00 MST</lastBuildDate>
        
         <item>
             <title>Improving an XML feed display through CSS and XSLT</title>
            <photo>
         <html:img src="img.jpg" width="80" height="80" />Flannel Bush
      </photo>
             <description>XML feeds, though useful, are boring to look at in a browser because they are simple XML files. It's possible though to make them easier on the eye, and in this article we'll look at two ways of doing that. First, we'll use simple CSS properties to format each XML node, and then we'll use a little more complex but much more powerful XSL transformation.</description>
             <pubDate>Sun, 06 Mar 2005 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=24</link>
         </item>
        

         <item>
             <title>Identity fields in Oracle and SQL Server</title>
            <photo>
         <html:img src="img.jpg" width="80" height="90" />Flannel Bush
      </photo>
             <description>While it may be relatively easy to create an incrementing and unique identifier inside a table in SQL Server, things get tricky with Oracle. In this article, we'll see the differences between the two databases and offer a way of solving the problem.</description>
             <author>email@yoursite.com </author>
        <pubDate>Mon, 17 Mar 2003 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=23</link>
         </item>

        
         <item>
             <title>Exporting Word files to HTML</title>
            <photo>
         <html:img src="img.jpg" width="80" height="80" />Flannel Bush
      </photo>
             <description>In this article we will first discuss the case for and against using Word as your HTML editor. Then we will see how to properly save a Word file to smaller, more compact HTML files. Third and last, we will see how to do this through code, and possibly create a batch process for converting numerous Word files to HTML at once.</description>
             <author>email@yoursite.com </author>
             <pubDate>Wed, 05 Mar 2003 00:00:00 MST</pubDate>
             <link>http://www.rtechinsane.in/articles/show.cfm?id=22</link>
         </item>

        
     </channel>
     </rss>

We are not doing anything new here. We are following the RSS 2.0 specification to create this feed: a channel wrapper with its feed properties, including as many item nodes as we want of the latest posts (with their own properties). Here's what this feed looks like through the browser:

XML Feed with no formatting

Basic yes, friendly to look at no. So, let's see how to improve this display.
Formatting through CSS

The principle here is that since a feed is made up of XML nodes, we can apply CSS formatting on them to change the way they display in the browser. First we need to add the CSS reference inside the XML file. This can be a full URL with the domain, or simply a website relative address:
1     <?xml version="1.0" encoding="ISO-8859-1" ?>
2     <?xml-stylesheet type="text/css" href="/includes/css/rssfeed.css" ?>
3     <rss version="2.0">

Under channel, we have the mandatory title, which is the feed title. To edit the display of this node to a bigger text size we can simply add this to our CSS:
1     channel title {
2         font-size:140%;
3     }


We can follow this principle to format the rest of the notes. One issue that we have to keep in mind is that if there is more than one node named title, then they will all inherit the same properties. In the example shown, the second tag will also display with font size 140%. To fix this, we will need to create a separate CSS property for it and change the size:
1     channel item title {
2         font-size:100%;
3     }

Our feeds most often contain properties that we may not necessarily want to have them display in our improved version. So. we can group all nodes that we want to hide and change their display property to hidden. The order of the nodes in the XML file will be maintained, unless you can figure out a way to change this through CSS.

Here is a complete CSS file as an example:
1     channel link, channel language, channel copyright, channel managingEditor, channel webMaster, channel docs, channel lastBuildDate {
2         display:none;
3     }
4     rss {
5         font-family:Verdana, Arial, Helvetica, sans-serif;
6         font-size:0.7em;
7         line-height:130%;
8         margin:1em;
9     }
10     /* HEADER */
11     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
12     channel title {
13         display:block;
14         padding:0.4em 0.2em;
15         color:#FFF;
16         border-bottom:1px solid black;
17         font-weight:bold;
18         font-size:140%;
19         background-color:#4483C7;
20     }
21     channel description {
22         display:block;
23         float:left;
24         font-size:130%;
25         font-weight:bold;
26         margin:0.5em;
27     }
28     /* CONTENT */
29     /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
30     channel item {
31         background-color:#FFFFEE;
32         border:1px solid #538620;
33         clear:both;
34         display:block;
35         padding:0 0 0.5em;
36         margin:1em;
37     }
38     channel item title {
39         background-color:#538620;
40         border-bottom-width:0;
41         color:#FFF;
42         display:block;
43         font-size:110%;
44         font-weight:bold;
45         margin:0;
46         padding:0.3em 0.5em;
47     }
48     channel item description {
49         display: block;
50         float:none;
51         margin:0;
52         text-align: left;
53         padding:0.2em 0.5em 0.4em;
54         color: black;
55         font-size:100%;
56         font-weight:normal;
57     }
58     channel item link {
59         color:#666;
60         display:block;
61         font-size:86%;
62         padding:0 0.5em;
63     }
64     channel item pubDate {
65         color:#666;
66         display:block;
67         font-size:86%;
68         padding:0 0.5em;
69     }

   

Here's a screenshot of the resulting output:

XML feed with CSS formatting

No comments:

Post a Comment