I'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.
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.
Mac OS X Hints
http://hints.macworld.com/article.php?story=20050519110746198