Embedded Images in TiddlyWiki Under IE6 via MHTML – Proof-of-concept

tiddlywiki mhtml images (by mahemoff)

I only came across the MHTML image hack over the weekend, while listening to @jeresig on the new jQuery podcast (incidentally not the only jQuery podcast to be launched in the past week or two).

The MHTML image hack lets you embed images with text, just like ye olde data: URI hack, but in a way that works for IE6. MHTML is MIME for HTML.

Of course, I immediately wondered if it could work in a single-page web app like tiddlywiki, and it turns out it can, though my quick exercise still has some problems.

IE6 TiddlyWiki images demo here

As I wrote on the demo itself:

Normally, images are contained in a separate location, pointed at from HTML IMG tags or from CSS background-image properties. However, Tiddlywiki is a style of web app where everything resides in one file. So how to include images?

The usual hack is to embed data: URIs (http://en.wikipedia.org/wiki/Data_URI_scheme). However, no go for IE6 and IE7. Hence, a “newer” technique – newer meaning recently discovered. That is, MHTML (http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/).

I was curious if MHTML worked in single-file HTML pages, reading off a file URI, and to my surprise it does. That said, it’s not perfect at all. Firstly, I had to hard-code the location, because I don’t know how to refer to “the current file” within the MHTML link. (I suppose a workaround would be to output the image file and refer to that with a relative URL, but we lose the benefit of everything being in one file.) Secondly, I played around with various base-64 images and this arrow one (from the phpied.com demo) was the only that worked :(.

So it’s a proof-of-concept with many gaps left for the reader to fill!

Hopefully people play with this further. At 3002 days old and counting, your grandpa’s browser isn’t going anywhere fast.

6 thoughts on Embedded Images in TiddlyWiki Under IE6 via MHTML – Proof-of-concept

  1. To solve the referring to the existing document problem, could you not try something like: expression(window.location)

    Can’t be arsed to boot up IE now, but IE has it’s only css expression attribute which allows you to execute javascript from css.. weird hey. Think it’s your best bet here!

  2. Mmm good point. take advantage of JS in CSS. I guess I could also just generate the StyleSheet tiddler too.

    I was hoping for a cleaner way involving relative URL, but these would be good workarounds, thanks.

  3. Mike – can you figure out a way for JavaScript to extract the base64 strings from the MHTML header comments? If so, then one could write a TiddlyWiki plugin that read those comments at startup and wrote them into tiddlers (perhaps named as “imgdata_” prepended to the name of the image data. And then one could write StyleSheets that used TiddlyWiki’s double-square brackets transclusion method to directly reference the same base64 data as used by Internet Explorer, hence removing the need for multiple copies of the image data.

  4. I should have said that the same transclusion method could be used to deal with the pathname issue. One would need a plugin that squirted the TiddlyWiki path string into a tiddler, and then just reference that tiddler in the stylesheet as:

    *background-image: url([[mhtmlrootpath]]!arrows);

Leave a Reply