Opera, standards and why I should have stayed in my cave
So you probably heard that I have that little new project of mine: QiFi the pure JavaScript WiFi QR Code Generator. It's been running pretty well and people even seem to like it.
One of its (unannounced) features is a pretty clean stylesheet that is used for printing. When you print the result will be just the SSID and the QR code, so you can put that piece of paper everywhere you like. That works (I tested!) fine on Iceweasel/Firefox 10.0.12 and Chromium 25.0. Today I tried to do the same in Opera 12.14 and it failed terribly: the SSID was there, the QR code not. And here my journey begins...
First I suspected the CSS I used was fishy, so I kicked all the CSS involved and retried: still no QR code in the print-out.
So maybe it's the QR code library I use that produces a weird canvas? Nope, the examples on http://diveintohtml5.info/canvas.html and http://devfiles.myopera.com/articles/649/example5.html don't print either.
Uhm, let's Google for “opera canvas print”... And oh boy I should not have done that. It seems it's a bug in Opera. And the proposed solution is to use canvas.toDataURL()
to render the canvas as an image and load the image instead of the canvas.
I almost went that way. But I felt that urge need to read the docs before. So I opened http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-canvas-todataurl and https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement and started puking:
When trying to use types other than "image/png
", authors can check if the image was really returned in the requested format by checking to see if the returned string starts with one of the exact strings "data:image/png,
" or "data:image/png;
". If it does, the image is PNG, and thus the requested type was not supported. (The one exception to this is if the canvas has either no height or no width, in which case the result might simply be "data:,
".)
If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported.Really? I have to check the returned STRING to know if there was an error? Go home HTML5, you're drunk! Okay, okay. No canvas rendered to images then. Let's just render the QR code as a
<table>
instead of a <canvas>
when the browser looks like Opera. There is nothing one could do wrong with tables, right? But let's test with the basic example first:
Yes, this is 2013. Yes, this is Opera 12.14. Yes, the rendering of a fucking HTML table is wrong. Needles to say, Iceweasel and Chromium render the example just fine. I bet even a recent Internet Explorer would...
That said, there is no
Comments
QR codes should incorporate a 4-module “quiet zone”. jquery-qrcode should do this in createCanvas / createTable. This might silently fix opera too, as the stretched final row would be all blank.
I sent a pull request about this: pull request.
That version of Opera seems to be using Presto. Have you tried a beta with WebKit?
Nope. Where can I get it?
Thanks for writing this. I don’t like to write about opera much (deny it the oxygen of publicity, yada yada) but it has a couple of really annoying bugs!