Content rendering messed up on Apple feeds

[mttjj]

I'm subscribed to some feeds from Apple - new items in the iTunes store and new items in the Mac App Store. Here's the feed for the MAS: http://itunes.apple.com/us/rss/topmacapps/limit=25/xml

Anyway, the formatting in those feeds is messed up. Here's an example of what I'm talking about. I've since unsubscribed to the iTunes music feed but I remember having this issue with that feed as well. Not a huge deal but would be nice to be fixed.

[ticky]

This seems to be broken because of this piece of CSS;

img {
  max-width: 100%;
}

Disabling that seems to fix the way it displays those images. Not sure what the best way to alleviate that would be as I understand that's to make images responsive when they're in plain copy. Tables break that somewhat.

The borders on the table structure also seem to be coming from this CSS. Not sure that the reader should be setting styles for this unless there's a good reason.

[benubois]

@matthewjj thanks for reporting this.

@geoffstokes thanks for the fix.

Updated this to

table img {
  max-width: none;
}

Going to leave the table borders as they are because I'd rather have tables use for tabular data look right than tables used for layout look wrong.

[ticky]

@benubois Perhaps it'd be good to update the table border CSS to not apply to table elements with border="0" applied? This would make it an explicit choice for the content provider to disable them if they're not desired, and likely remain compatible with people who are sending tabular data, who I imagine wouldn't be disabling a border. You should be able to do this by adding something like :not([border="0"]) to your table styles.

[benubois]

@geoffstokes thanks, but I'm not sure that would be sufficient tables are generally styled through CSS so the attributes don't tell us much about original intent. If anything I'd say border="0" is common to try to normalize browser styles on tabular data.

I'm happy with the current setup. Tables for layout are less common than tabular data especially in RSS feeds, but if there's some logic that can figure out when to have a border and when not to I'll add it.

[ticky]

Yeah, fair enough. Flicking through the AnandTech RSS feed I'm seeing some articles with table styling specified and some without. I guess content providers just can't be trusted enough to make assumptions like that. :smile:

Maybe the solution is instead to contact publishers who are abusing tables in RSS. (Looking at you, Dinosaur Comics)

[peterc]

Stumbled across this as we are finding the RSS feeds for our email newsletters have borders everywhere in Feedbin :) Tables are used because it just converts the formatting from the email (where table is a necessary evil, alas). We might look at other ways to deal with the problem, but just wanted to highlight another instance why tables might still be used.

[benubois]

@peterc,

Yes, Ruby Weekly is probably the one remaining place I still see tables as layout once-per-week :)

I'm sure there are countless more newsletters taking the HTML from the email and putting it in the RSS feed too.

I had an idea for how to address this though. A very simple test. If <table> is the first tag of the content, then that could be a good indication that tables are being used for layout. Then Feedbin could style them differently.

Do all of your email templates start with <table>?

[peterc]

Haha, a handy coincidence :) So I checked and.. not exactly. We are transitioning systems. Our old ones do start with tables, our new ones start with a tracking pixel IMG tag. But.. I could get that moved to the end instead and in theory have <table> at the start so it seems like a reasonable way forward that shouldn't catch anything it shouldn't.

[benubois]

OK this is live. It works when the content starts with <table>.

I think semantic markup + tables could be a good fit here. That way Feedbin (and other RSS clients) could benefit from the markup and CSS could be used to reset HTML elements to look consistent in email clients.

[peterc]

We're going to continue to improve it but this looks like a fantastic start, thanks! :)