Thursday, 6 January 2011

execCommand browser compatibility - it's crap

Modern browsers allow you to apply commands to format HTML in a contenteditable element, or an iframe with designmode set on. This functionality enables javascript rich text editors like CKEditor, TinyMCE or Whizzywig
This is the execCommand interface, common to Internet Explorer , Firefox, Chrome, Safari or Opera. Except that it's not common because they all generate different HTML in response to these commands.

There's a test at  which I have found very useful for seeing how each browser mangles the HTML - even though it has bugs itself! See also the compatibility table, which would be more helpful if it told you what HTML was produced by each browser.

None of them are entirely without problems but I think there's a clear winner. 

For example, issuing a "bold" command on a text selection gives:
  • <b>   in Chrome 8 and Safari 4.1 (b is NOT a deprecated tag, contrary to what some say)
  • <STRONG>  in IE8 (yes, IE makes all tags UPPERCASE, so not XML compliant)
  • <strong>  in Opera 11 (preferred by some as more semantic)
  • <span style="font-weight: bold;">  in Firefox 3.6 (but you can styleWithCSS=false to get <b>)

Issuing an "indent" command on a paragraph gives:
  • <blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"> in Chrome 8 and Safari 4.1 (!!!)
  • <BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr> in IE8 (doesn't even quote all the attributes!)
  • <blockquote>  in Opera 11
  • <p style="margin-left: 40px;"> in Firefox 3.6 
So Opera 11 looks like the winner on generating HTML to web standards. The others are all an unholy mess. Internet Explorer's output frequently will not validate. Chrome and Safari insert unnecessary classes and, together with Firefox, use inline styles which will trample all over your carefully crafted stylesheet rules.

Blogs and Pages

Wordpress is blogging software but you can add and edit static pages and use it as a CMS.
According to Blogger Buzz, you can add pages (up to 10?) in Blogger too, but I have not tried this yet.

In Whizzy, everything is a page. But if you could add a tag/label/category/list (pick a name) then you could organise pages in lists. So you can make a page list other pages in a tag/label/category/list: a simple list of links is a menu, a blog is the same list with the page content included, perhaps with just a summary and perhaps with a limited number.

Other features of blogs:

  • syndication via RSS or Atom - also generated from the tag/label/category/list
  • comments - any Whizzy page can have comments up to commentlimit, perhgaps using Disqus