the helvetica scenario

I use Google Reader a lot, and lately I’d been feeling somewhat frustrated with its use of space. It is the means through which I consume the majority of my online information, and I wanted it to be a little more efficient about presenting that info.

So, I was very happy to discover Helvetireader, a Greasemonkey script for applying a much more minimalist style to Reader. It removes many of the UI elements, forcing much wider use of keyboard shortcuts. I was already a big fan of Reader’s keyboard shortcuts, and Helvetireader prompted me to get familiar with a few others that I hadn’t even thought to look for.

At the moment, the script just adds two elements inside the page’s head tag — one link tag to change the favicon, and another linking to the stylesheet. I have been tweaking the script a little to get things a little more how I like them. What I did is just add a style element, define its InnerHTML, and append it as a child to the head tag. I put my tweaks inside a new userscript, but you could just as easily edit the Helvetireader script. Just make sure that your adjustments come after Helvetireader’s CSS.

So, the javascript I have for adding the style tag looks something like the following:

var newStyle = document.createElement('style');
newStyle.type = 'text/css';
newStyle.innerHTML = "CSS GOES HERE";
document.getElementsByTagName("head")[0].appendChild(newStyle);

The biggest thing that I wanted to change was removing the links above the feed tree. It takes up like half the height of the page and I never use any of them. Even with the browser window maximised, I could only see a tiny subset of my feeds. You might say that I was mad as hell and not going to take it anymore. Luckily, fixing this was a simple matter:

#selectors-box, #add-box { display: none; }

In list view, the little star icon was kind of off center, and the date overlapped with the icon on the right. The star icon being low also made the whole bar taller than it should have been and the top of some of the text underneath was being exposed. The following fixed that:

#entries.list .collapsed .entry-icons { top: -5px ! important; padding-bottom: 5px; }
.collapsed .entry-date { margin: .2em 30px 0 0 ! important; }

When an article is expanded, the options at the bottom only show up when you hover over them. They also overlapped with the little gear icon. I think they might have been pushed down a bit or something as well. As is typical with CSS that I write, I’m never quite sure what is actually necessary. I tend to just get stuff working, maybe pare down a few really obvious things, and then not mess with it. So don’t take any of this as authoritative, it’s just stuff that seems to work for me.

.entry-actions { height: 1.2em ! important; padding-top: -0px ! important; }
.entry-actions:hover { padding-left: 25px ! important; }

Unfortunately, Javascript doesn’t have nice multi-line strings or heredocs, and I didn’t really feel like putting all of my CSS on one line. So, I cheated a little like so:

newStyle.innerHTML = "\
#selectors-box, #add-box { display: none; }\n\
#entries.list .collapsed .entry-icons { top: -5px ! important; padding-bottom: 5px; }\n\
.collapsed .entry-date { margin: .2em 30px 0 0 ! important; }\n\
.entry-actions { height: 1.2em ! important; padding-top: -0px ! important; }\n\
.entry-actions:hover { padding-left: 25px ! important; }\n\
";

Not ideal perhaps, but not too terrible, I’d say. And that’s usually good enough.

I’ve only been using this for a day or so, but I’m really liking it so far. I suspect that I would probably feel the same even if I didn’t have a huge fetish for Helvetica.

EDIT: updated css