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

Related posts:

1. Antique is back, baby
2. Antique 1.6, final release
3. Instapaper Beyond for Safari

Originally posted on BrettTerpstra.com at Antique on PimpMySafari.com

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

I set out on a search for an easy, all-purpose solution, but nothing worked as well as I wanted it to. So I did a little scavenging and put together a couple of functions that do the job pretty well. They use jQuery, but could just as easily be done with pure Javascript, if you really wanted to.

Here are the two functions I’m using in the latest (unreleased, at this moment) version of Antique:

function fixAmpersands() {
    // entity encodes only ampersands that aren't already encoded
    $("h1,h2,h3,p:contains('&')", document.body).each(function() {
        if( this.nodeType == 3 ) {
            // regex from Stack Overflow http://bit.ly/aJZVCG
            $(this).html( $(this).html().replace( /&(?![a-zA-Z]{2,6};|#[0-9]{2,4};)/g, "&" ) );
        }
    });
}
function dressUpAmpersands() {
    // adds a span with class 'amp' to the entity-encoded ampersands
    $("h1,h2,h3,p:contains('&')", document.body).each(function() {
        $(this).html( $(this).html().replace( /&amp;/g, "<span class='amp'>&amp;</span>" ) );
    });
}
$(document).ready(function() {
    fixAmpersands();
    dressUpAmpersands();
});

They seem to work pretty well, so far. I accompany them with some CSS I nicked from SimpleBits and Patrick Haney:

.page span.amp { 
    font-family: Baskerville, Palatino, Constantia, "Book Antiqua", "URW Palladio L", serif;
    font-style: italic;
}

In my situation, it doesn’t really matter if ampersands are captured within code blocks, but just to keep styling consistent, I also force any .amp-wrapped ampersands within pre and code blocks to match the pre/code styling:

#article .page pre,#article .page code,.page code span.amp, .page pre span.amp {
    font-family: 'Droid Sans Mono', 'Andale Mono', 'Courier New', Courier, monospace !important;
    font-style: normal;
}

Of course, this is all really better handled server-side with, say, PHP, but if you’re looking for spicy typography and are limited to client-side solutions, give it a shot! I’m running these right before my rather wicked new version of widon’t which splits long titles into nearly equal-length lines… more on that soon.

Related posts:

1. Word repetition checking with JavaScript
2. Catching Markdown mistakes
3. Antique 1.6, final release

Originally posted on BrettTerpstra.com at Ampersands & Javascript

Version 1.5 1.6 of Antique (originally posted here) is officially available for download. Here’s what’s new!

• jQuery: added the jQuery library via Google’s Ajax API to make some of the other additions much easier to implement.
• Colorbox: links to images are automatically opened in a “lightbox” so you don’t have to leave the page. Uses jQuery Colorbox and automatically applies the effect to links ending in ‘.jpg’ or ‘.png’.
• Widon’t: headlines and paragraphs have a widon’t function applied to them, preventing “widows” (short words alone on a line). This was mostly annoying me in the top-level headings of the page, but it’s a nice touch throughout. It ignores words longer than 8 characters. They’ll do just fine on their own.
• New HUD buttons: in addition to the Evernote web clipper button in the floating HUD, there are new buttons for DEVONthink, Delibar and Webbla. These are mostly to show how to pull it off, and are easily edited. See the instructions below to remove buttons from the HUD.
• Pass text selections: unlike using bookmarklets, clicking on a HUD icon makes you lose your text selection. Any service that accepts a selection as a note or description (Evernote, DEVONthink, Webbla, etc.) won’t normally work. By storing the selected text in an HTML5 sessionStorage key every time your mouse enters the HUD, Antique is able to pass what was selected before you clicked the button. Still working on making this function with Evernote.
• Smarter image resizing: when you load a page, Antique shrinks the larger images. It’s smarter now, though: wide, centered images are only reduced slightly and left centered, and any floated images that are reduced (and aren’t already linked somewhere) are now linked to the full size version of themselves, which will display in-page using Colorbox. Floated images also have bottom margin and clear:left applied to them to prevent horizontal stacking when images are close to each other in the layout.
• Minor Update: (version 1.5.1) I just swapped out Crimson Text for OFL Sorts Mill Goudy TT, primarily because I like the quotation marks much better. I also added hanging quotes (image-based) to blockquotes, and improved code blocks and bulleted lists wrapped around images.

Installation

If you want to try out the style, download it here 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!

There are lots of minor efficiency and style tweaks, but those are the major changes. If you’re interested in modifying the HUD (removing unnecessary buttons), read on…

Removing HUD buttons

This part is a cinch, even if you don’t know anything about Javscript or HTML. The HUD buttons are in the HTML body section of the Reader.html file, and you can just edit them out in a text editor. If you open the file (Reader.html) in a your editor of choice (as plain text, not rich text), and scroll all the way to the bottom, you’ll see a series of “<button id="hud... >” lines. It will be pretty obvious what each one is for, and you can simply comment out or delete the lines for buttons you don’t need. Antique will automatically resize and reposition the HUD based on the number of buttons in it, so that’s all you have to worry about.

Adding HUD buttons

Adding buttons is a different story, depending on what you want the button to do. So far, I’ve mostly been converting existing bookmarklets. You can set the function to call right in the button definition (just copy an existing button and edit it), then add the appropriate function to the script section above. Note that any bookmarklet that uses window.location, location.href or any means of getting the page title attribute are going to break. Reader overrides all of that, but thankfully, it stores the info in an object called ReaderJS. You can access the original page url with ReaderJS.originalURL and the title with ReaderJS.displayTitle. Those two make it pretty easy to cover 90% of bookmarklets you’d want to use.

I’m including most external javascript plugins and libraries directly in the html page. Standard rules don’t apply, this is all being served locally and the fewer files you have to keep track of, the easier it is to distribute. If your needs are different, you can reference external files in the Safari.app/Contents/Resources folder with safari-resource:/filename.ext, where filename.ext is the name of the file.

Antique handles the resizing of the HUD automatically, but if you’re doing it from scratch you’ll need to adjust the width and left-margin of #hud in the css section. The buttons are 48x48px PNG files, with the icon occupying approximately 36x36px of that space. White and transparent pixels only, if you want to fit the aesthetic, and the “inactive” version should be saved at about 70% opacity. I’ve been encoding all of my PNG files in base64 and including them inline in the CSS to make it easier to distribute, but you can reference them as mentioned above.

You also can’t use document.location when Reader.html is loaded, so most bookmarklets need to be modified. You can use window.open and immediately close the new window, like this:

function sendToWebbla() {
    var wlWindow = window.open('webbla:url='+encodeURIComponent(ReaderJS.originalURL)+'&mode=modify&title='+encodeURIComponent(ReaderJS.displayTitle))+'&textSelection='+encodeURIComponent(sessionStorage.getItem('textSelection'));
    wlWindow.close();
    self.focus();
}

I have the self.focus() in there because I have Saft running and restoring focus to the last active tab, which somehow is missing and leaving me on the wrong tab when I execute the above sequence. So this just brings me back to the right tab. When it runs, you can just barely see that it’s even opening a new window/tab. Should be pretty seamless for most folks.

I think that covers the process in a general sense. Each button I’ve added has had its own quirks and issues, so it would take a lot longer to detail every possible problem you’d run in to.

Related posts:

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

Originally posted on BrettTerpstra.com at Antique 1.5 for Safari Reader