Click below to download, unzip the extension and double click it to install. Head for Preferences->Extensions and set up your Instapaper username and password, and pick a hotkey. The default hotkey is “i”, which doesn’t interfere with existing Google shortcuts. Tailor to taste.

The only issue I’m having right now is that it doesn’t fail properly if you have an incorrect user/pass combination. It tells you it succeeded, but doesn’t post to your account. I’ll have to add a verification step at some point in the process. For now, if things aren’t showing up in Instapaper for you, check your username and password in the Extensions preferences. Be sure to check out Instapaper Beyond, too!

Download:

GReader Instapaper — Adds single-keystroke sending of the current article in Google Reader to your Instapaper account. More Info

• Instapaper Beyond for Safari!
• Instapaper Beyond: fix for text style controls
• Updated: Songza Lucky Link Service

This release includes:

• Alphabetical sorting of the help HUD (A-Z,a-z)
• Edit a bookmark with "E" (Shift-E)
  • you can tab through the fields and submit with Enter, returning you to your listing
• Scroll animation when navigating bookmark lists
  • makes it more obvious which direction the page just scrolled you in when selecting a bookmark partially or entirely offscreen.

Download:

Instapaper Beyond for Safari 5 - Instapaper Beyond for Safari adds full keyboard navigation and Ajax loading of text views to Instapaper (http://www.instapaper.com). This extension is for Safari 5 with extensions enabled. More Info

• Instapaper Beyond: fix for text style controls
• Instapaper Beyond 1.8.7
• Instapaper Beyond 1.3

This is relatively minor update for Instapaper Beyond, the Safari extension which gives you full Ajax loading and keyboard control over Instapaper. It does, however, have one very cool new feature, and one often-requested fix.

The new feature is type-ahead folder selection in the popup HUDs for Move To and Go To Folder. When the HUD pops up, you can just start typing and it will find the first folder that matches the letters you've typed and select it. The arrow keys function as usual, and enter or right arrow will open the selected folder. If you type a few letters and then hit backspace or escape, it will clear the filter field. If you pause for a second, then start typing again, it will start a new filter, QuickSilver/Launchbar style.

The other noticeable change is that it works better with Greystyled now. It's not perfect, as Greystyled wants to do its own thing with the Ajax-loaded text versions and there's a major conflict. I check for Greystyled now, though, and give it a little leeway. The text view will not look like it does in Greystyled without IB loaded, but it will work for you.

If you have Instapaper Beyond loaded, it will either update automatically, or show up in your available updates if you have auto-updates turned off. If you haven't loaded it, download it below and give it a try!

Instapaper Beyond for Safari 5 - Instapaper Beyond for Safari adds full keyboard navigation and Ajax loading of text views to Instapaper (http://www.instapaper.com). This extension is for Safari 5 with extensions enabled. More Info

• Instapaper Beyond for Safari!
• Instapaper Beyond: fix for text style controls
• Instapaper Beyond 1.3

Fortunately, another Safari extension comes to the rescue. User CSS is a pretty effective way to use slightly-modified userstyles and generate your own CSS overrides. If you happen to have both extensions installed (or are on your way to get them right now), here’s a recipe for de-uglifying gleeBox (settings screenshot):

1. Create a new User CSS in the User CSS Manager
2. Name it Glee Highlight Override and set the Domains field to *
3. Add the code below in the Styles field:

body .GleeHL { 
    background-color:#eef49b !important;
    -webkit-box-shadow:none !important;
    border:solid 1px #dfec2c !important;
    padding:0 !important;
}
body .GleeReaped {
    background-color:#f6f9c9 !important;
    border:solid 1px #c0c660 !important;
}

The highlights should be prettier now, even if the change is fairly subtle. The style also removes the padding and shadow on the selected item so that, in most cases, selected items don’t jump around and move other elements as you tab through the page. Let me know if it doesn’t work for you. Obviously, the colors are adjustable to taste. You could even create special overrides for certain sites to match color schemes better… I mean, if you were crazy obsessive or something. If you come up with a better all-around color set, let me know!

By the way, the Reddit Twitter style is great in Safari! Here’s a shot of it with custom gleeBox highlights!

• TextMate drag command for Base64 encoding images
• An ode to Twilight, and a TextMate tip
• Instapaper Beyond: fix for text style controls

I actually ended up rewriting the existing javascript as a module in Instapaper Beyond, so there's the possibility of easily extending it to handle more options. Background color, more fonts, etc. We'll see how far I get with that. My next order of business is to get it to work with some of the existing userstyles out there, but time has been tight for me when it comes to these side projects. I'll keep you posted.

If you have Instapaper Beyond installed, it should show up in your updates (or be updated automatically, depending on your settings). If you want to download the extension, please use the link below. For more information on Instapaper Beyond, see the original post for the Safari Release.

Instapaper Beyond for Safari 5 - Instapaper Beyond for Safari adds full keyboard navigation and Ajax loading of text views to Instapaper (http://www.instapaper.com). This extension is for Safari 5 with extensions enabled. More Info

• Instapaper Beyond 1.8.9
• Instapaper Beyond Bugs (fixed)
• Single-keystroke Instapaper in Google Reader

When I decided to fix this, the first issue was that when EverSave creates the Evernote note, it lets Evernote convert the list from HTML to Rich Text. Once it's stored in Rich Text Format (RTF), manipulating it via any shell language, including AppleScript, becomes quite difficult. It's not impossible, but I quickly decided it wasn't a route I wanted to wander down. Here's what I did do...

Saving tabs to Evernote

What I ended up doing was modifying what EverSave stored, and including the actual URL in the visible text of the note. It's not the prettiest solution, but it's the only way that this particular system will work. I did my best to minimize the visual presence of the URL using the rudimentary markup that Evernote actually pays attention to. The final product looks like this:

The actual layout is still fully controlled by the _template property in the first line, which is the only line that's changed from the original script. I'm posting the whole thing again, with this minor revision, for convenience. With a little bit of HTML (remember to escape your double quotes), you can modify the template to look however you like. Just keep in mind that Evernote strips 90% of markup out when it creates the note from your HTML, so stick with basic tags. See the original EverSave post for a breakdown of the script.

Be sure to continue reading after the script to see how we handle the "restore" functionality.

property _template : "<li><strong><a href=\"%url\">&uArr;</a> %name</strong> < <small>%url</small> >"

--search and replace function for template
on snr(tofind, toreplace, TheString)
    set ditd to text item delimiters
    set text item delimiters to tofind
    set textItems to text items of TheString
    set text item delimiters to toreplace
    if (class of TheString is string) then
        set res to textItems as string
    else -- if (class of TheString is Unicode text) then
        set res to textItems as Unicode text
    end if
    set text item delimiters to ditd
    return res
end snr

set prettyDate to do shell script "date '+%A, %B %d, %Y at %l:%M %p'"
set theTitle to "Bookmarks " & prettyDate
set urlList to "<ul>"

tell application "Safari"
    set tabList to every tab of front window
    repeat with aTab in tabList
        set aLink to _template
        set aLink to my snr("%name", name of aTab, aLink)
        set aLink to my snr("%url", URL of aTab, aLink)
        set urlList to urlList & aLink & return
    end repeat
end tell
set urlList to urlList & "</ul>"

tell application "Evernote"
    set theNote to create note with html urlList title theTitle notebook "Bookmarks"
end tell

Open this script in Script Editor

I have this script saved as "EverSave.scpt" in my ~/Library/Scripts/Applications/Safari folder (create it if you don't have it), and launch it using FastScripts with a Command-Shift-S shortcut. Safari doesn't have anything bound to that key-combo, and it's easy to remember (Save As in most programs).

Restoring tabs

This solution makes a few assumptions, but the script is easily customized to handle any differences in your setup. I went with a System Service (Snow Leopard) for the restore function, primarily because it allows me to act directly on selected text in Evernote. It's a very simple Ruby script that parses the selected text for urls, and then opens any that it finds in sequential order using your default browser. There's a commented out line if you want to always target Safari directly when opening them, which may be useful in some situations. I use Choosy, and have a rule that just directs all of these to Safari. If you have Safari set as your default browser, and that's where you want to open your links, this will just work as is.

To set up the service:

1. Open Automator and select "Service" as the new file type.
2. On the right hand side, tell it that "Service receives selected" text in Evernote.app (choose Other... and select Evernote).
3. Find "Run Shell Script" in the list on the left and drag it into the area on the right.
4. Set the Shell dropdown to /usr/bin/ruby
5. Insert the following code, and feel free to modify
6. Save the result as "EverRestore"
7. Assign a shortcut key, if desired, in System Preferences > Keyboard > Keyboard Shortcuts > Services

Here's the code for the service:

ARGF.each do |f|
    links = f.scan /< (https?:\/\/.*?) >/mi
    # The above scans specifically for the angle brackets in my template. 
    # If you remove those from the output of EverSave, be sure to update
    # the regular expression accordingly.
    if links.empty? then
        exit
    else
        links.each {|link| %x{osascript -e 'open location "#{link[0]}"'}}
        # links.each {|link| %x{osascript -e 'tell application "Safari" to open location "#{link[0]}"'}   }
    end
end

The simple regular expression in line 2 does scan specifically for the angle brackets I used in the new EverSave template. That just relieves some complexity. If you want a regular expression that doesn't require the angle brackets, try replacing line 2 with this:

links = f.scan /(https?:\/\/([^\s",;]+)\..{2,4}(\/[^\s",;!]+))/mi

Once it's saved in Automator, it should be available when you select text in Evernote. If there are visible URLs in the selected text, running this Service will open them in tabs in Safari (or your default browser). You can selectively open certain urls by only selecting the lines that contain the ones you want to open. Non-contiguous selections will require a little text editing, of course.

Not as hard as it looks... really.

The explanation got a little long, and probably seems unnecessarily complex. The fact is, I can save a Safari browsing session with one key combo, edit, annotate and tag it (if I want to), then restore it later by highlighting and typing a new command combination. It's actually quite convenient, and fairly bulletproof. I'd love to hear how you use it, or what you're doing instead!

• Saving Safari browsing sessions to Evernote
• TabLinks Safari Extension
• Fun with MarsEdit, part I

I have an admin username (it's not admin) which I use to manage my WordPress blog, and an editor user with which I write posts and leave comments. Sometimes, though, I get confused, lazy or both, and end up leaving comments as my admin user. This rather defeats the purpose of using a non-default admin username, which is generally done for security purposes (if they can't guess the admin's username, it makes it that much harder to hack the admin account).

More out of laziness than anything else (we can call it efficiency, right?), I dropped the functions below into my functions.php file. They filter my admin username out of any comments I leave. WordPress also adds the user's name in a class for the list item of the comment, so I needed to remove that as well. If you're in a similar situation, feel free to grab the code and place it in your own theme's functions.php file, replacing the adminuser and regularuser placeholders with your own admin and editor usernames. The comment class code is modified from a hack found at WPRecipes.

// change the class that wordpress assigns to the comment
function change_comment_author_class( $classes ) {
    foreach( $classes as $key => $class ) {
        // change adminuser to your admin username
        if(strstr($class, "comment-author-adminuser")) {
            // change regularuser to the user you comment with
            $classes[$key] = 'comment-author-regularuser';
        }
    }
    return $classes;
}
// substitute a user name for the admin name
function change_comment_author($author)
{
    // change this to the admin username
    if(strstr($author,"adminuser")) { 
        // change this to the name of the user you comment with
        return "regularuser"; 
    }
    return $author;
}
// apply the filters
add_filter( 'comment_class' , 'change_comment_author_class' );
add_filter( 'get_comment_author' , 'change_comment_author' );

• Adding a TinyMCE button to WordPress
• Notes on cleaning up the MediaTemple hack (JohnnyA)
• Auto-lightboxing image links

The automatic update is functioning, so anyone with TabLinks already installed should see it show up in their updates, or just update automatically if you have that option enabled. This version should show up as 1.3. If you're looking for the initial install, you can find it below.

TabLinks Safari Extension - TabLinks gathers all of the link information from every open tab and presents them for copying based on a user-defined template. More Info

• Instapaper Beyond 1.8.7
• Instapaper Beyond: fix for text style controls
• Instapaper Beyond for Safari!

I have most of the websites I work on set up with separate development (usually local¹) and production/deployment servers. It’s pretty easy to keep straight when I’m first designing a site, but going back later and making changes can cause some confusion with all the refreshing and dealing with caches and all. So I’ve been using a trick to make it clear which version I’m loading at any given time.

All of my local development sites are mapped to .dev addresses, e.g. brettterpstra.dev. I use php to scan the current SERVER_NAME variable for .dev and insert an unobtrusive div at the top of the content if it’s found. At the very top of the page (in the header file, assuming the site is modular), I insert this line:

<?php $dev = preg_match("/\.dev/",$_SERVER['SERVER_NAME']) ? true : false; ?>

As a side note for those not familiar with this syntax: it’s a ternary conditional operator, meaning that $dev is set to either true or false based on the result of the condition. The format here is [variable] = [condition] ? [evaluate true] : [evaluate false];. Think of the question mark as “if” and the colon as “else.” It’s just all on one nifty line.

Now we use the $dev variable to determine whether or not we’re inserting an extra element in the markup. Right after my body tag, I have this logic:

<?php if ($dev) {
    echo "<div id=\"development\">\n";
    echo "</div>\n";
} ?>

Yep, it just inserts a div if the $dev is true (SERVER_NAME contained .div). You can change the condition above to find whatever differentiates your development server from your production and/or deployment servers.

Lastly, I style the div with some CSS:

#development {
    position: fixed;
    bottom: 0;
    left: 0;
    background: transparent url(http://d33frhdcafae93.cloudfront.net/images/devsticker.png);
    text-indent: -99999px;
    width: 150px;
    height: 150px;
    z-index: 9999999;
}

That sticks a dogear image I made into the lower left corner of the site, in a fixed position that is always visible but rarely in the way (you’re welcome to steal the image, if you want it). It’s an easy trick, but I’ve found it saves me a lot of frustration when I get too obsessed with a minor detail to bother looking at the URL and realizing I’m not even refreshing the right version of the site. Maybe you never have that problem, in which case I applaud your level, collected personality. People like me, though, can always use a little extra help.

• Auto-lightboxing image links
• MultiMarkdown in MarsEdit
• Adding a TinyMCE button to WordPress

It looks something like this (truncated):

background:url(data:image/png;base64,iVBORw0KG...AAAAASUVORK5CYII=);

The image/png changes depending on the filetype that's encoded, becoming image/jpg or image/gif, etc. Anyway, I got tired of shelling out to encode the images, so here's a very simple command I set up in TextMate which allows me to drag any JPEG, PNG or GIF file into a CSS rule and get the background property with encoded image all at once. Don't try it with big images, but for the kind of thing you'd actually put into a CSS file, it works great.

The command itself is this (it's a one-liner):

# Drag command set to handle: jpg,png,gif
# scoped to: text.html.basic source.css.embedded.html, source.css meta.scope.property-list.css

openssl base64 -in "$TM_DROPPED_FILE" | awk -v ext="${TM_DROPPED_FILE#*.}" '{ str1=str1 $0 }END{ print "background:url(data:image/"ext";base64,"str1");" }'

It uses the openssl command that's on a Mac by default. It encodes the file and outputs it to STDOUT, which is passed to awk. The extension of the dropped file is grabbed via Bash parameter substitution (${TM_DROPPED_FILE#*.}) and passed to awk where it's subbed in and all of the line breaks are removed. Presto.

Here's the actual TextMate command if you want to try it out and aren't sure how to create a new one. Assuming you're running TextMate (kind of a prerequisite for a TextMate command), just unzip and double click the file.

Base64 Image Encoder TextMate Drag Command - Encodes a dropped image and inserts a CSS background property with the result in TextMate. Works in embedded CSS and in CSS files. More Info

• fk: a useful bash function
• New Safari Extensions give good source
• Antique 1.6, final release

Okay, this one has a little refining left to go, but it seems to be working pretty flawlessly. I ported most of the code from a greasemonkey script. All I really want to add is a toolbar item that lets you easily turn it on and off, and maybe a whitelist feature.

There are actually legitimate uses for a plugin like this. Seriously.

RedirectBuster — Removes redirects from urls. Pretty simple. More Info

• New Safari Extensions give good source
• Auto-lightboxing image links
• Adding a TinyMCE button to WordPress

TabLinks is a quick experiment, designed to meet my own needs. It needs some work, but it does the trick: it copies the link information for every tab open in Safari, and outputs them as a list, based on a user-defined template. You set up your template in the Extension settings, and use the following variables to define your link style:

• %u = URL
• %t = title
• %w = window index
• %n = tab index (within window)

That’s all there is for now. The default link format is a Markdown reference list, with the references being window#-tab#, so they come out as [0-12]: yourlink.com "and its title". If you dig Markdown, you can easily modify this to make a list of titles linked to their respective pages by changing the template to * [%t](%u). If you’d rather get plain HTML, try <a href="%u">%t</a>. Maybe you just want a list of URLs, in which case your template would just be %u.

Like I said, it’s pretty simple right now, and may stay that way while I go back to tidy up and improve on InstapaperBeyond. I do plan to add a checkbox to the settings that lets you decide whether clicking the toolbar button copies just the current window’s tabs, or all tabs as it does now. I would have liked to add a “copy to clipboard” button, but (as far as I know), Safari doesn’t allow access to the clipboard in any fashion, even with something like ZeroClipboard.

The popup window could use some classing up, too… a little CSS3 animation/transition and some more consistent styling that isn’t constantly being overridden by site styles. However, it’s quite useful to me as is, so I’m sharing it in the hopes that others will find it as helpful as I do. Personally, I use it when I write posts, especially on TUAW, where there are a lot of links to deal with. I pop open the links I know, run searches in new tabs for the ones I need, then copy the whole bunch as references to paste into the top of my post.

TabLinks Safari Extension — TabLinks gathers all of the link information from every open tab and presents them for copying based on a user-defined template. More Info

• TextExpander experiments
• Minor TabLinks update
• Saving Safari browsing sessions to Evernote

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.

Antique 1.6 for Safari Reader — Version 1.6 of the Antique hack for Safari 5. Adds pleasant styling to Reader, with many additional features. More Info

• Antique 1.5 for Safari Reader
• Safari Reader Antique hack
• Antique Safari Reader hack update with Evernote goodness

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.

• Antique 1.6, final release
• Targeting and filtering IE with relative ease
• Auto-lightboxing image links

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.

Antique 1.6 for Safari Reader — Version 1.6 of the Antique hack for Safari 5. Adds pleasant styling to Reader, with many additional features. More Info

• Safari Reader Antique hack
• Antique Safari Reader hack update with Evernote goodness
• Antique 1.6, final release