Just last week, I was working on the new version of Xinha. If you don’t know, Xinha’s a web-based document editor. Embed it in your blog, your web software, so that you and your users can create web documents. Xinha is WYSIWYG, so there’s no need to know HTML. The Open Planning Project, my employer, uses Xinha to power OpenPlans, which is why I get to work on it. Xinha is Open Source Software, so we use it, and contribute fixes and enhancements back to the original project.
I was working with Nicholas Bergson-Shilcock, my colleague, on his new plugin for Xinha. With this plugin, you can finally make great footnotes in your documents. We were testing his code on Internet Explorer, and we noticed IE acting strange. Now I don’t mean normal IE strange, IE is the bane of all web developers, so I’m used to strange. (If you use IE, then please don’t. I don’t care whether you use Mozilla Firefox, Google Chrome, Opera, Apple Safari, or if you connect to web servers directly with telnet. Just do all web developers a favor and stop using IE.)
When I say strange, I mean screwy. Certain places in the document just didn’t seem to exist. His code used Xinha in different ways than the rest of the plugins, so we were expecting edge cases. But black holes? Nobody expects black holes!
<div> This is my first line <p>This is my second line</p> </div>
You can’t touch the end of the first line. Let me say that again, you can’t touch the end of the first line. What does that mean? All of you DOM jockeys know how to get a reference to the node, and could manipulate the elements, but that’s no help for the user.
Your user pushes that cursor beyond the event horizon. They click on your footnote button to bring up a dialog. You insert the text they type, and BAM! The cursor’s not where the user left it; you’ve just crapped markup at some other place in the document. When you do things like that, users start to fear pressing buttons, and we can’t have that.
Why haven’t we seen it before? Xinha was using pop-ups for dialogs, and they don’t change the original selection. Now that we’ve moved to a lightbox-style dialog system, we’re moving the cursor about on the page, and we don’t have a way to move it back.
So, what can we do? Unfortunately, I tried to see if there was a way to trick IE into moving the selection to where we want. I tried moving the selection left, or right, and then back again. I tried inserting content, then deleting it, but there was no direct way to solve the problem. We ended up with three different workarounds, all of which have drawbacks, but are better than no solution at all:
All three are written in to the code, but we decided to default to the visual cue, because it’s the safest in terms of damaging the markup. Otherwise, we’ve done everything we could to avoid triggering the error, so we hope it won’t affect too many users; it’s always a trade off.
I wrote this to get some visibility for this problem. This is probably just some sort of off by one error, and IE8 is still in beta, so maybe it can still get fixed. If not, at least you’ll have a way to work around the problem when you run into it.