In a recent post, I wanted to break out a paragraph into a callout or sidebar -- a little box of goodness inset into the body of my post. This proved rather more difficult than I'd planned.
Initially, I crafted the callout by hand, using a DIV for the box, and two DIVs within that for the title and body. I putzed with the CSS for a while to get it looking the way I wanted, and when I finally got it looking the way I wanted, I pulled the styles out and coded them in my blog's stylesheet.
So far, so good. This was shaping up to be a minor pain, but nothing I couldn't handle. The first big hiccup happened when I realized that the styles for my DIVs weren't showing up in Google Reader for my RSS feed (you may have noticed this).
Diagnosing this problem turned out to be a much bigger rathole than I expected. Initially, I thought that perhaps my feed just wasn't referencing my stylesheet, so I started playing with this. Before long, I ended up writing a simple WordPress plugin to add a stylesheet reference to my feed. No matter which event I hooked, though, I couldn't get the feed to do what I wanted it to do. After way too many attempts to fix this, I finally stumbled on some blogs that pointed out the root problem here: feed readers generally don't use stylesheets.
[callout title=Feed readers - FAIL]Needless to say, when I found out that feed readers don't actually use stylesheets, I was floored. Not only that, but this appears to be a problem almost across the board. There's a clear opportunity here for someone to step up and lead the way on this issue - someone, please carry this ball forward![/callout]
So, the real solution, it appears, is to have the styles embedded in the DIV definitions. This is ugly for all sorts of reasons that are probably obvious to you, but it's the only way I can see to solve this problem if I want styles in my feed (which I do).
Given that constraint, I elected to make another plugin -- this time, to let me use quicktag-style encoding to type my callout into my post and translate this into appropriately-styled DIVs for display. As evidenced by the callout in this post, this is progressing nicely. I've checked this plugin into the WordPress plugin repository, though I'm sure there's still some fine-tuning to come.
When have you extended a system that didn't quite do what you wanted it to?
Related articles by Zemanta
- 18 WordPress Plugins for RSS Management and Tweaks (mashable.com)
- Google Reader Steps Up Personalization Efforts (shankrila.com)
- Google Reader sneaks in a couple of awesome updates (thenextweb.com)
![Reblog this post [with Zemanta]](https://i0.wp.com/img.zemanta.com/reblog_e.png?w=525)
Nice catch! And thanks for the heads-up. So far we've been lucky stretching/extending web stuff, but there have been a few…challenges with papervision3d (through Flash).
The problem is that if your stylesheet were added to the reader then everything within the reader would gain that style which would be the real fail. The only way to get styles is to do what you've proposed here and place the styles into the content itself. Of course, you should keep in mind that not everyone is reading your blog through a read that supports this sort of thing, like a mobile device for example. RSS isn't really about styling it's about publishing content so you should really think about this carefully as you pour more CSS into a place that it really doesn't belong IMO.
That is, indeed, the challenge. I'd love it if readers would support stylesheets where appropriate (like, for instance Google Reader), but they don't. I understand the issue you're raising about styles being applied across all feeds, which could be a problem, but I don't know that this is an insurmountable problem – merely one that the feed readers haven't elected to tackle.
I also understand the “content, not style” argument, but there's a point where that argument runs out of gas. When I'm paging through Google Reader, I'm seeing plenty of pictures, fonts, and colors in feeds — everything up to and including embedded video clips. If we're really worried about some clients not being able to render all content, don't you think we should start with the youtube clips? Incidentally, I tried this out in Google Reader on a Windows mobile phone in WinMo IE, and it works fine. I'd love to get some feedback about where it's not working as intended – maybe there's a way to refine this technique a bit.
I'll be the first to admit that the approach I'm taking isn't ideal – in fact, I hope this is obvious given all the other techniques I tried first. Given that everything else failed, though, I'm pretty happy with how this is working right now.
The problem is that if your stylesheet were added to the reader then everything within the reader would gain that style which would be the real fail. The only way to get styles is to do what you've proposed here and place the styles into the content itself. Of course, you should keep in mind that not everyone is reading your blog through a read that supports this sort of thing, like a mobile device for example. RSS isn't really about styling it's about publishing content so you should really think about this carefully as you pour more CSS into a place that it really doesn't belong IMO.
That is, indeed, the challenge. I'd love it if readers would support stylesheets where appropriate (like, for instance Google Reader), but they don't. I understand the issue you're raising about styles being applied across all feeds, which could be a problem, but I don't know that this is an insurmountable problem – merely one that the feed readers haven't elected to tackle.
I also understand the “content, not style” argument, but there's a point where that argument runs out of gas. When I'm paging through Google Reader, I'm seeing plenty of pictures, fonts, and colors in feeds — everything up to and including embedded video clips. If we're really worried about some clients not being able to render all content, don't you think we should start with the youtube clips? Incidentally, I tried this out in Google Reader on a Windows mobile phone in WinMo IE, and it works fine. I'd love to get some feedback about where it's not working as intended – maybe there's a way to refine this technique a bit.
I'll be the first to admit that the approach I'm taking isn't ideal – in fact, I hope this is obvious given all the other techniques I tried first. Given that everything else failed, though, I'm pretty happy with how this is working right now.
Note: see http://componentoriented.com/content-management… for more details on the plugin I wrote to address this need.