A Quote Blogmarklet


Jon Udell, in referencing Jesse Ruderman's well-formed bookmarklet reminded me that I've been meaning to create a small bookmarket of my own. I've been thinking for some time that some little bookmarklets would make blogging simpler and take care of some of the more mundane formatting chores. The one I started out with helps me with formatting quotes.

When I quote another web page, the convention I've developed is to place it in <P/> elements like so:

<P class="quote">
This is a quote from another blog.
</P>

My CSS contains the following style:

.quote {
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
  font-style: italic; margin-left: 1cm;
}

which indents the quote and italicizes it. I've wanted to add uri and date attributes to the <P/> element for a while so that I can find the source again, or at least know when I referenced it, by looking at the quote. Alas, I'm too lazy to do that by hand, so I haven't been.

This evening, I created the a bookmarklet for blogging, or a "blogmarklet," which formats highlighted text on a page as I want it for inclusion in a blog article called Make Quote. Highlighting a section of text and pressing on the blogmarklet pops-up another window with the highlighted text correctly formatted and in a text area so it can be pasted into my editing window.

Highlighting a chunk of text on Jon's blog and pressing the blogmarklet produces this code:

 <p class="quote" 
    uri="http://weblog.infoworld.com/udell/"
    date="Sat Sep 20 2003 18:35:06 GMT-0600 (MDT)">  
I picked up Jesse's "blogidate xml well-formedness" bookmarklet there, 
and  it immediately became part of my routine. Enlarge the screenshot and 
you'll  see it in action, in Mozilla (works in IE too), pinpointing a 
well-formedness error  in a draft of this posting. The red tint tells me 
there's a problem; the location  is highlighted; the parser error shows 
up in the browser's status line. When I fix  the error, I'm green and 
good to go. Excellent! </p>  

which renders as:

I picked up Jesse's "blogidate xml well-formedness" bookmarklet there, and it immediately became part of my routine. Enlarge the screenshot and you'll see it in action, in Mozilla (works in IE too), pinpointing a well-formedness error in a draft of this posting. The red tint tells me there's a problem; the location is highlighted; the parser error shows up in the browser's status line. When I fix the error, I'm green and good to go. Excellent!

I got the biggest chunk of the code directly from bookmarlets.com and just modified it from there. Only one problem left to solve: the blogmarklet I've given here works with Netscape, but not Safari. Anyone have any hints into why?

I think that there's a lot of room for improvement in the current crop of blogging tools. They're nice, but they don't do as much as they could to aid me in creating the site I want to create. This is one example where a little Javascript can solve the problem. In general, I'd like to include more metadata in my posts to make my blog more useful to me as a reference. In that sense, Kimbro Staken's Syncato blogging tool looks like a great step forward.

Update: I discovered the problem with Safari. I had neglected to close out the <form/> and <textarea/> elements and so it wasn't writing the window. The version here now should work in Netscape and Safari. Safari Javasript debugging was no help in this instance.