The file is now located at /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources/Reader.html. A quick locate command would have told me that, but I didn’t think to look outside of the application bundle for it. Thanks, Jeremy.

Antique is still at version 1.6, but I may do some updating now that it’s back in action. Download below.

Related posts:

1. Antique on PimpMySafari.com
2. Antique Safari Reader hack update with Evernote goodness
3. Antique 1.6, final release

Originally posted on BrettTerpstra.com at Antique is back, baby

For a quick “how-to” on using the Antique (or any) Safari Reader hack, see the related article in the HowTo section.

This will be the last release of Antique, I think, barring a few minor fixes (follow @ttscoff for updates on this and other projects). You can download it here. The code is completely open source, if anyone wants to continue the project feel free (credit would be swell, where it’s due). I’ll be putting my free time into Instapaper Beyond and other more “legitimate” projects now (although I really would like to do a nice, high-contrast, Helvetica version…). In deference to Faruk Ateş, I’d like to clearly state that this is a hack, and you run a risk (albeit very minimal) of breaking your Safari install if you don’t know what you’re doing. I also won’t be posting further simplified instructions for installation, but they’re not hard to find. For advanced users, you simply need to know that you’re replacing Reader.html in Contents/Resources.

The coolest changes, in my opinion, are an amped-up Widon’t for headlines, and improved image linking. On the Widon’t end, if a title exceeds the width of the headline area, it’s actually split in the middle to provide more equal-length lines. It’s neat-o. And for the images: I had it only lightboxing images which were too large for the style and which weren’t already linked somewhere else, resulting in the user never knowing what would happen when they clicked an image. Now, if an image is linked to an external site, that link is extracted and placed on a line below the image. If an alt or title attribute are present in the image or the link, they’re preferred over the source attribute for naming the link, which should provide a decent idea of where you’re going, in most cases. Images which are linked, then, are always linked to the Colorbox effect, and will never take you out of the Reader page. Ah, consistency.

Here’s what else is new in this version.

• I swapped out the scrollbar images, shifted the colors a little, and included them in the HTML file.
• Some style changes, including a darker background and slightly heavier gradient
• Massively fixed up the ampersand code. Also shifted ampersands 1 pixel left for better kerning within non-italicized text.
• Improved smashing of empty paragraphs in bad markup to avoid huge spaces between paragraphs.
• Fixed a CSS mistake I had introduced which caused the background and drop shadow to be visible before the content slid up from the bottom.
• Set up an onscroll check for new elements. Every time the page is scrolled, Antique checks for new elements (i.e. additional pages that were inserted after initial load) and applies the default functions to them.
• did I mention 12px Droid Sans Mono for code blocks? 12px seems reasonable, and doesn’t change when zooming/shrinking the rest of the text.

Are there too many buttons in the HUD for your taste? They’re there as an example, but you can remove them easily by commenting out the “button” lines at the bottom of the Reader.html file. The HUD will adjust size and position automatically based on the number of buttons you have in there, so just remove the ones that aren’t of use to you.

If you’re playing with Reader styles, here’s a tip: you can set up a “sandbox” page to speed up development (at least with css). Once Reader has loaded a page that has elements you want to style, right click and choose “Inspect Element” (obviously, you have to have the developer menu enabled in preferences). Then, right click on the doctype declaration in the element inspector and choose “Copy as HTML.” That will give you the full HTML of the rendered document, which you can save to a new HTML file. Extract the inline stylesheets and link them into external stylesheets, and you can edit in CSSEdit or Firebug. It’s handy, given that, in order to change the live styles, you have to restart Safari every time you edit Reader.html.

I had started working on smart quotes and other javascript-based typography changes, but decided it wasn’t worth the time to try to come up with regular expressions that covered every possible circumstance. If anyone wants to pick up where I left off, I’d love to see what you come up with.

For a quick “how-to” on using the Antique (or any) Safari Reader hack, see the related article in the HowTo section.

Related posts:

1. Antique is back, baby
2. Antique Safari Reader hack update with Evernote goodness
3. Safari Reader Antique hack

Originally posted on BrettTerpstra.com at Antique 1.6, final release

Evernote web clipper functionality is now complete in the style, and the button in the HUD will open the floating frame, let you add tags and extra text, then clip just the visible text in Reader to your main Evernote notebook without ever opening a new page. Exactly what I wanted. Now I just have to add the same thing to Instapaper Beyond!

The style is also now available with and without background images, just check the main post for updates.

Related posts:

1. Safari Reader Antique hack
2. Antique 1.5 for Safari Reader
3. Taking the Markdown to Evernote service further

Originally posted on BrettTerpstra.com at Antique Safari Reader hack update with Evernote goodness

There is a new version of Antique available! Check out version 1.6!

I was thrilled when it was first announced that someone had located the HTML/CSS for the new Safari Reader functionality in Safari 5, which happened the day it was released. I’ve been toying around with some ideas in the days since, and this hack is the result of a little too much effort. Click the screenshot thumbnail to see a full version.

It has a few interesting components…

• Uses CSS3 to find doubleclick.net ads, which Reader sometimes misses because they inject after the DOM loads
• Uses CSS3 to remove blank paragraphs and paragraphs containing nothing but a line break tag
• It only shows the title once, as opposed to at the top of every page
• Many style changes, including:
  • uses Google fonts (Crimson Text)
  • “antique” color palette, which extends to the background and HUD
  • less-contrasty links, easier to read over but still noticeable
  • slight gradient in the background
• Extra button in the HUD (Evernote, experimental)
• Narrower scrollbar
• Left-justified text
• Currently attempting to resize images to max-width 300px (but it’s not resizing properly if width/height attributes are set. I’ll fix that shortly.)
• Update: using a little Javascript now to resize the images proportionally after page load.
• Adds dashed line indicating page breaks, lightens and shrinks page numbers
• Update: added a background image. Let me know what you think.
  • Update to update: there’s a second download link without the background image.

Page break closeup

If you want to try out the style, download it here (with background image), or grab the version with no background image, and open the archive. Inside you’ll find a file called Reader.html. The file you’re going to replace (back it up somewhere safe first) is /Applications/Safari.app/Contents/Resources/Reader.html. If you don’t know how to do this from Terminal, you can just do it in Finder: go to your Applications folder and locate Safari, then right click on it and choose “Show Package Contents.” That will open a new window with the inner workings of Safari inside it. Open the folder called Contents, and then the Resources folder inside of that. Locate the file Reader.html and drag it out to your desktop (that’s your original, keep it safe). Then drag the new Reader.html file you downloaded into the Resources folder. Restart Safari and try it out!

Some gory details about the process follow…

Antique HUD with Evernote button

I added a button to the HUD as a proof-of-concept. It doesn’t do anything very useful yet, the current one just loads the title and URL in the Evernote web clipper in a new tab/window. It would be far more useful if I could get the in-page web clipper to work, but when Reader loads, “Reader.html” becomes the current location and title. You can access the original information using the ReaderJS object (ReaderJS.originalURL for example), but Evernote’s web clipper doesn’t let you pass those in, it wants to find them itself. I played around with loading the entire contents of the Reader-rendered page into an iFrame and calling it from there, but I gave up on that after a while. The default print and email functions have success doing something similar; it’s more the Evernote clipper that’s dragging me down. Anyway, you can add Javascript right in the Reader.html file and insert a button to call it. It’s easy.

Update: I figured it out. I had to dupe Evernote’s injected javascript, edit it to use the ReaderJS object that Safari provides for getting the original url and title, then compress and include it in the Reader.html file. It should be fully functional now: pops up the hovering frame and lets you add tags and notes, clips just what Reader is showing using Reader styles (no cleanup necessary in Evernote!) and sends it to your main notebook without opening a new window. If you’re not an Evernote user, you can remove the button just by locating it near the bottom of Reader.html in the body portion. It’s clearly labeled. You’d also want to narrow the HUD back down, so look at the #HUD style and set the width appropriately.

All external images used in the style are base64-encoded and included in the html file, so there are no extra files to mess with. The Google fonts are loaded directly from Google’s website, so reading offline would provide a different look, but who reads web pages in Safari when they’re offline, really? Using Google’s Ajax API’s, you can also easily inject jQuery into the mix, but I haven’t found anything really useful to do with it yet. Actually, I just hacked in Colorbox and improved image resizing with some jQuery… it’s definitely going to be in the next release.

So, that’s the story. I’m sure I’ll have completely revamped this by the end of the weekend, but it’s at a good place right now. Here’s the download link again: Antique Style (and with no background image). Also, I got bored with looking at this style at one point, and decided to make a TUAW style, just for giggles. If you’re curious what the whole web would look like through a TUAW lens (preview), you can try that one out too. As always, have fun.

There is a new version of Antique available! Check out version 1.6!

Addendum: I’ve realized it would be entirely possible to add my own HUD with various style selectors and just switch out stylesheets with Javascript. Expect the next Reader hack I release to be a multi-theme bundle of fun. I’ve had to scratch this plan for lack of cross-domain local storage for preferences. I can’t access the safari.extension API from the Reader.html file, and I can’t store a cookie because once Reader loads there’s no domain to attach to. If anyone has a good idea that doesn’t involve complicated installs, let me know! In the meantime, I’m beginning work on a web tool reminiscent of Arc90’s. It will take your choices of fonts, colors and backgrounds and generate a ready-to-install Reader.html file for you. Not sure how soon I’ll get it done, but be sure to follow me on Twitter and/or subscribe to the RSS feed for updates.

Related posts:

1. Antique Safari Reader hack update with Evernote goodness
2. Antique is back, baby
3. Antique 1.5 for Safari Reader

Originally posted on BrettTerpstra.com at Safari Reader Antique hack