Another NetNewsWire style

Posted
8:43 PM 9 October 2005
Updated
8:51 PM 29 May 2011

A nagging desire to find a novel and useful application of the template.html file in a NetNewsWire style and thoughts regarding the limitations of web typography came together a few weeks ago while reading another of the many blog posts on the pros and cons of flexible vs. fixed width web layouts. Why not use a little JavaScript to make line spacing relative to line width?

I’m demonstrating this idea with a refinement of my previously published easy reading NetNewsWire style. It seemed appropriate to call my new style ‘Ollicle Flex’. Go ahead and install it if you are impatient, but to get the most out of it I suggest reading a little further first.

Installation and set-up

I have only tested this style in NetNewsWire 2.0.1 (Full version). If it is radically broken in the lite version let me know and I’ll see what I can do to fix it.

  • Ollicle Flex ollicle-flex.zip
    Posted on 4 February 2006. This is the one to download and install.

Here are the beta versions I posted along the way as I attempted to get this thing to work. I’m leaving them linked here - just in case:

  • Ollicle Flex β¹ ollicle-flexb1.zip
    Posted on 9 October 2005. Works fine on my G5 here at home. But not on my G4 at work.

  • Ollicle Flex β² ollicle-flexb2.zip
    Posted on 12 October 2005. The fix that worked for my work machine. But strangely breaks here at home.

  • Ollicle Flex β⁴ ollicle-flexb4.zip
    Posted on 27 January 2006. Major update with a couple of additional surprise features!

  • Ollicle Flex β⁵ ollicle-flexb5.zip
    Posted on 4 February 2006. Resolves a few significant JavaScript hiccups and handful of finicky CSS issues.

Double click the contained ‘Ollicle Flex.nnwstyle’. Selecting ‘Install style’ should copy this file to /Library/Application Support/NetNewsWire/Stylesheets/ where you can place or remove it manually should you choose to. If the style isn’t applied right away try switching to another style and back again.

The dynamic line spacing (and other features) for which I named this style requires you to enable JavaScript for news items in NetNewsWire’s preferences. Note that the JavaScript doesn’t work in Combined view. If you have some JavaScript phobia, you’ll still have some nice CSS, but you’ll be missing out on the good stuff.

Enable JavaScript for news items in NetNewsWire

While you have the preferences open you may wish to select your favoured font for feed reading. Crisp had Lucida Grande set. I have removed the CSS responsible for this font selection in Flex to allow you to make your own choice. Font sizing set here is also respected by the CSS of this stylesheet. Some people felt that the blue rollover on the feed title of Crisp was overkill and I’ve grown to agree. This new style applies a subtle treatment to the feed title which ties in better with NetNewsWire’s own sleek grey look .

If you choose to add a file called adBlock.css to your NetNewsWire Style Sheets directory it will also be applied to feeds viewed with Ollicle Flex. I have not attempted to create an example ad block file. Read more about it in NetNewsWire feed ad blocking with CSS.

Have a play with it and let me know what you think. I’m proud of it and itching for some feedback.

Further thoughts

Update October 11, 2005

I’ve moved my rant on the importance of line spacing from this page to create a new entry which focusses on this and the JavaScript that demonstrates my idea.

Update October 12, 2005

Uploaded a new version (2) of the style - fixing a big JavaScript problem. See download link above.

Update October 12, 2005 (evening!)

Here we go again (3) - previous version busted on my home machine. Download above.

Update October 15, 2005

Added links to all the variations of the Flex style which I have posted. The difference between them is very small one or two lines of JavaScript. I’m hoping if I talk about it enough someone with a clue will see the stupidity of my code and correct me (fingers crossed). All three have code which fires the function window.onresize. The code that differs is what fires when the document loads:

Version 1:

MakeLayout("lineflex",15,60,1.4,2.4);

Version 2:

window.onLoad=function(){MakeLayout("lineflex",15,60,1.4,2.4);}

Version 3:

MakeLayout("lineflex",15,60,1.4,2.4);
window.onLoad=function(){MakeLayout("lineflex",15,60,1.4,2.4);}

I posted the rest of the code in a subsequent post.

Update December 3, 2005

Version 3 has proved to not offer anything - don’t bother with it.

Update 27 January 2006

Version 4 posted. Almost completely rewritten JavaScript. Works consistently between machines so far. Please let me know how it works on yours! There are a couple of other notable ‘flexy’ features that warrant some dedicated words. I’ll post them here when I post a non beta version, but perhaps you can discover them for yourself!

Update 4 February 2006

Version 5 posted. Regular use of this style has revealed a few kinks in version 4 which I have since ironed out in 5. Changing the size of the window rapidly no longer confuses the image sizing. Also line-height adjustment is maintained when switching layouts. More on what I’m talking about soon.

Update 4 February 2006 (evening)

I’ve uploaded the first non-beta version of Ollicle Flex and a post NetNewsWire style with free cookies which explains the new image sizing and layout options with a couple of screenshots if you want a preview.

Comments

  1. Commented
    8:43 PM 11 October 2005

    I too commiserate with the need for better typographical functions in css web standards. Very cool idea. I’ve implemented it in my NetNewsWire, but it seems the text spacing doesn’t work on load, it only does on window resize. I think this because, when the paragraph is first displayed, it is at a certain line-height. Then, once I start dragging the window, it pops to a taller line-height. As I drag back and forth it enlarges and shrinks very gradually. For this script to be really useful, it needs to deal with the page load case as well.

  2. Dean
    Commented
    8:43 PM 11 October 2005

    I’m having some problems with this theme. The line height resets itself everytime I change news items. It only comes back into play if I adjust the width of the column every single time.

    Am I doing something wrong?

  3. Commented
    8:43 PM 11 October 2005

    Oops. Thanks heaps guys for pointing that out.

    I think I know how to fix it. I’ll have a go now.

  4. Commented
    8:43 PM 11 October 2005

    Hmm. I’m having trouble reproducing that problem at this end. On my machine the script is applied when selecting a new item - whether or not it is in a different feed. Perhaps someone smarter than me has a suggestion as to why this might be happening inconsistently? Is there anyone else who it works for?

  5. Commented
    8:43 PM 12 October 2005

    Okay. I tried it on my machine at work and it displayed the broken behaviour described by Christian and Dean.

    Adding a window.onLoad trigger fixed it (at least on this machine!). Didn’t I mention that I wasn’t a programmer?

    I have replaced the zip file, so please try a fresh download and leave a comment to let me know if it works for you or not.

  6. Dean
    Commented
    8:43 PM 13 October 2005

    I’ve updated and i’m still experiencing the same problem. I installed it then restarted NNW, tried again to no joy, changed theme then changed back. Still nothing.

    I wish I knew some JavaScript to help you out.

    Good luck

  7. Commented
    8:43 PM 13 October 2005

    Thank-you for your perseverance Dean. It’s greatly appreciated.

    I’m having trouble making a version that works on both my G4 at work and my G5 at home. Perhaps I’ll need to make two versions!? There’s has be a better way. Anyway - real work to do just now.

    I haven’t given up - check again soon!

  8. Commented
    8:43 PM 16 October 2005

    Great theme, it’s my default now and it really feels nice. Thanks!

    FYI I have to resize to get the line spacing with your original version, and also with B1 and B3. Only B2 works correctly for me. I’m on a 1.67 PB G4 running 10.4.2.

  9. Dean
    Commented
    8:43 PM 16 October 2005

    I’ve re-downloaded all the files again. Here is what I’ve found.

    B1 only resizes when I change the column width, and then resets when I change items.

    B2 doesn’t resize at all.

    B3 acts the same way as B1 but I think the line spacing is a bit tighter when the column is narrow (that may just be me though!)

    As a sidenote the feed info which floats on the right gets in the way of large images, such as the Dilbert comic. Is there anyway to make it move over when there is no room?

  10. Dean
    Commented
    8:43 PM 16 October 2005

    Oh, and by-the-way im using NNW 2.0.1 and Mac OS X 10.4.2 on a Mac mini.

  11. Commented
    8:43 PM 27 January 2006

    Dean: See above for version 4. There is a little something special in there for you and your fellow comic readers.

  12. Commented
    8:43 PM 31 January 2006

    Pretty snazzy. Why do you include the text of the website and author URLs below the names of the websites and authors? For Flickr discussion groups, this makes the display really pretty wonky. I’d just make the website and author text links…

  13. Commented
    8:43 PM 31 January 2006

    Thanks blalor. Personally I like to have the website url visible and clickable (I’m inserting it with CSS myself), but I’m leaning towards your way of thinking regarding the author’s url.

    Those Flickr profile links are rather long. Although in most feeds they are much shorter, in which case the link sits on the same line as the author’s name.

    Linking the author’s name would require some JavaScript jiggery pokery as the text and link you see there is how NetNewsWire spits it out. But I’ll have a look to see what is possible. Thanks for the suggestion!

    Also, occasionally the link is mailto rather than a http - I guess that could be determined and distinguished visually somehow.

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed

Previous entry
3 September 2005
Firefox CSS bug NOT
Next entry
12 October 2005
Flex CSS with JavaScript for better reading