One of the ‘issues’ with writing HTML5 is using commands which work across all browsers. I came across a good example of this while debugging an issue this morning…
In a previous release I added this code snippet
if(actualWidth>20 && actualWidth>rawWidth && rawWidth!=actualWidth & el.innerText.search(' ') > -1){
It actually turns out that this causes issues in Firefox because Firefox does not support innerText and fails – anything in the Javascript after it meets this (which in this case was all the canvas drawing code) fails. The solution is to use textContent instead.
if(actualWidth>20 && actualWidth>rawWidth && rawWidth!=actualWidth & el.textContent.search(' ') > -1){
and happily textContent also works on other browsers. But it does highlight that you need to be careful when writing HTML5 for cross-platform support.
Luckily there is a really good site which lists browser compatibility on all HTML5/canvas/Javascript features at http://caniuse.com/ which is now on my bookmarks. Do you have any recommendations for cross-browser support?
Did you know...
IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?
It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page
