10.4: Improve the layout of RSS feeds in Safari

Jun 01, '05 09:48:00AM

Contributed by: derPlau

Tiger only hintI've been using Safari 2.0 to read RSS feeds, and though it's taken a while to get used to, I quite like it. One problem, though, is that every site has its own style sheet, and Safari doesn't import those style sheets with feeds. In general, this is a Good Thing, but it can lead to some unfortunate page layout issues. In particular, I've been annoyed by block quotes:

Those (usually large) blocks of text, such as this one, that are usually intended to indicate an extensive quotation from some other source.
Often, sites use the blockquote tag to identify their block quotes; in this case, Safari will indent the quote (much like the one above), which clearly sets apart the quote and thereby improves readability. This is great -- but some sites use different tags, which are defined in their own style sheets to set them apart like the block quote above. Of course, since Safari doesn't import those style sheets in RSS mode, block quotes from these sites tend to flow along with the rest of the text without being set apart in any way, which can be confusing.

Fortunately, Safari offers users the option of writing their own style sheet, which then gets used rather than Safari's default style sheet whenever both style sheets define a style (similarly, individual sites' style sheets are then used rather than the user style sheet). All we need to do is have a look at the HTML code for the pages using tags other than blockquote for their block quotes, figure out what tags they use, and define our preferred style for those tags in our user style sheet. Note that this is only worthwhile for sites whose feeds you view frequently.

The only trick is to try to make sure that our style only affects RSS feeds, so as not to interfere with the layout of other sites that use the tags we're defining (also, just to be safe, it's a good idea not to make too gaudy a style, so that if the style does "leak into" other sites it doesn't look too bad).

In Safari's RSS mode, the main text of an article is placed within a div with class articlebody. The two most common tags I've encountered (other than blockquote) to identify a block quote are divs with class blockquote and dd tags. So what we want to do is make a user style sheet that tells Safari to use a style of our choice every time it encounters a blockquote, div.blockquote, or dd tag inside a div.articlebody (note that I'm including blockquote tags here, even though Safari automatically formats them. This is so I can ensure consistency across all different types of block quotes. To do so, use your favorite text editor to make a file called my.css or whateveryouwant.css; save this file where it won't get in the way. Then include something like the following in your file:

.articlebody div.blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: #eeeeee;
}
 
.articlebody blockquote {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: #eeeeee;
}

.articlebody dd {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: #eeeeee;
}
This code tells each of the blockquote types to be offset from the left margin of the enclosing text, to have a light-grey background, and to be positioned within the background in ways that are pleasing to my eye. You can get rid of the grey background by removing the background line from each block.

Now you just need to tell Safari to use your shiny new style sheet. Go to Safari's Preferences, choose the Advanced tab, then choose "Other" from the Style Sheet popup. Choose the style sheet you just made, and voila! You may have to quit and relaunch Safari for changes to take effect (it certainly seems to be the case that if you change the style sheet while Safari's running, you have to quit and relaunch Safari to see the changes).

Comments (4)


Mac OS X Hints
http://hints.macworld.com/article.php?story=20050519110746198