Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

10.4: Improve the layout of RSS feeds in Safari Web Browsers
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).
    •    
  • Currently 1.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (1 vote cast)
 
[11,677 views]  

10.4: Improve the layout of RSS feeds in Safari | 3 comments | Create New Account
Click here to return to the '10.4: Improve the layout of RSS feeds in Safari' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
10.4: Improve the layout of RSS feeds in Safari
Authored by: krove on Jun 01, '05 12:12:30PM

You ought to also contact the sites of interest and ask that they use semantic HTML where

<blockquote></blockquote>
is actually used for a blocked-off quotation.

In this day and age of modern browsers with CSS support, there is no reason that any other tag be used to surround such text on a web page!

Of course, the semantic web is still a pipe dream because so many sites (and companies that run them) are still throwbacks to the 90s. Ugh...



[ Reply to This | # ]
Efficient CSS with grouping and shorthand
Authored by: danielmark on Jun 01, '05 01:09:53PM

If all of the declarations are identical, you can group the selectors using the comma operator. Also, you could try shorthand declarations, remembering the clockwise spatial order: top right bottom left (or TRBL, "terrible" mnemonic). Note the even lazier padding declaration, which takes advantage of the "repetition" effect; that is, if opposite sides are the same (top and bottom, left and right), you can omit the second width.

Cleaner, more efficient code results. One of the hallmarks of web standards, even. For example:

.articlebody div.blockquote, 
.articlebody blockquote, 
.articlebody dd {
    margin: 0.5em 0 0.5em 3em;
    padding: 0.25em 1em;
    background-color: #EEE;
}



[ Reply to This | # ]
10.4: Improve the layout of RSS feeds in Safari
Authored by: pediddle on Jun 11, '05 05:09:14PM
Here's what I use to make reading Fark.com's RSS Feed less of a pain. Without this, the article subjects are often too long to fit on a line and become unreadable.

Note also the "body" selector, which makes it much less likely that this rule will be applied to non-Safari-RSS documents.


/* Make article titles in Safari's RSS reader smaller and able to span multiple lines.
 * Good for reading Fark.com. */

body[onClick="articleClicked(null)"][onLoad="setup(null)"] .content .articlehead .subject {
    white-space: normal !important;
    font-size: 85% !important;
    letter-spacing: 0.03em !important;
}
The "white-space: normal" rule allows lines to wrap, instead of being truncated with an ellipses.

[ Reply to This | # ]