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 http://www.quirksmode.org/dom/execCommand/  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.


2 comments:

  1. So you assume all indented text is a quoted text?

    ReplyDelete
  2. Not all indented text is a quote but there is no HTML element called 'indent'. Users expect a WYSIWYG editor to implement an indent button. It would be helpful if all implementations of execcommand interpreted 'insert ' the same way. Blockquote is the best guess for a semantic meaning, in my opinion.

    ReplyDelete