Quantcast

Announcing ChatBubble!

posted by rajbot on January 29th, 2008  

I’ve finally made it easy to post good-looking iChat transcripts to the blog! We use CSS to style DIVs to look like iChat speech balloons.

Cool! Where I can get the CSS?

All the code is checked into SourceForge. You can browse it here.

But how does it work?

A brief description is here. Scott Schiller came up with the Even More Rounded Corners technique that we use. There is a CSS file to include and a python script that turns transcripts into html that you can paste into a blog post. We need more documentation, CSS cleanup, cross-bowswer support, and more speech balloon colors, if you feel like contributing patches.

Doesn’t WordPress completely bork the formatting in Safari by adding unmatched </p> tags?

Yup! WordPress is crap! You can use the wp-unformatted plugin to disable autop() on posts that contain ChatBubbles.

Filed under: , , , , , · 5 Comments

5 Responses to “Announcing ChatBubble!”

  1. Dave C.
    February 12th, 2008 | 1:26 pm

    Thanks for putting this together. I’ve been looking for an easy way to display ichat logs inside of blog entries. I think this will do nicely if I can get it working.

    I’m having trouble understanding the example syntax — do you run it against a log file or against a bunch of message text entered as an arg?

  2. rajbot
    February 12th, 2008 | 4:16 pm

    Hi Dave,

    You can run the formatter tool by passing message text as CLI args:
    [nocode]
    python formatDivs.py “raj: hi guys” “may: hi!” “peliom: hi!!”
    [/nocode]

    I’ll make a web front end soon, but first I have to make it work on IE7. Apparently the bubbles don’t work on IE, and I only have Mac and Linux machines right now, so I won’t be able to figure out what’s wrong until I borrow a windows machine.

  3. Extraface
    February 13th, 2008 | 11:47 am

    Chatbubble Experiment: Sammy Stephens Explains It All…

    it’s just like

    it’s just like

    it’s just like

    a mini

    mall.

    [See this YouTube clip if this doesn’t ring a bell]
    The above is…

  4. Michael Sharman
    October 22nd, 2008 | 11:24 pm

    Hi guys,

    Great work but a small piece of feedback. There are several problems with this in IE7, mainly around the blue speech bubble not aligning correcty which throws out the bottom bg image.

    Is there updated code for this?

    Thanks

  5. Wanted: A Wordpress Plugin to Post iChat (.ichat) Files That Are Readable | Eric's Blog
    December 6th, 2009 | 3:51 pm

    [...] the coding that rajbot created here to display the contents of the chat within the post (uses CSS to style the transcript in order [...]

Leave a reply