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 “
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
bugfixworkaround for Opera I want to implement. If you use Opera, I feel sorry for you. But that’s all.
Update: before someone cries “ZOMG! BUG PLZ!!!”, I filled this as DSK-383716 at Opera.