[css-images][css-values][css-gcpm] qrcode() for generating QR code images from URLs

[hober]

Generating QR code images from URLs is more and more common these days. It'd be nice if you could generate QR code images from CSS.

For example, you could generate QR codes for links in a print stylesheet:

@media print {
    ul.citations > li > a::after {
        background-image: qrcode(attr(href));
        ...
    }
}

Or you could generate a QR code for the document itself in a print stylesheet, so someone could find the online version of an article in print (see also #6546):

@media print {
    body {
        background-image: qrcode(url(...));
    }
}

Thought of this while reading a twitter thread between @jyasskin @dauwhe @tabatkins: https://twitter.com/jyasskin/status/1430586358658043909

[BigBlueHat]

Would a pseudo protocol have wider application--and still be viable in CSS?

Maybe...

body { background-image: "qrcode:https://w3.org/" }
# though the actual text may have to be URI encoded...
body { background-image: "qrcode:https%3A%2F%2Fw3.org%2F" }

<img src="qrcode:https://w3.org/" />
<!-- or -->
<img src="qrcode:https%3A%2F%2Fw3.org%2F" />

[tabatkins]

If we went that way, we already have data: urls for that purpose; you'd just need to mint a qr code MIME type, where the resource data is intended to be interpreted as a qr code. Like data:image/qrcode,https://example.com

[tabatkins]

However, that doesn't remove the use-case for a dedicated function that just takes a string, since that allows one to send the data directly, as @hober demonstrated, and without having to worry about URL encoding.

So a MIME type can be pursued in tandem, and then perhaps this feature rebased over that later, without stopping us from defining qrcode() in CSS.

[BigBlueHat]

If we went that way, we already have data: urls for that purpose; you'd just need to mint a qr code MIME type, where the resource data is intended to be interpreted as a qr code. Like data:image/qrcode,https://example.com

Not sure a media type is necessary (or wise) in this case. Media types shouldn't generally describe what's inside the package--just the packaging. 😃 And qrcode's themselves are "shipped" in all kinds of image/* packages currently (and it should stay that way).

The point of this proposal (as I understand it) is to have the browser turn strings into QR codes with minimal effort. Using the data: URL wouldn't provide for that; just an alternate means of shipping an existing image, and extending it to be more than a means of conveyance would be concerning.

[tabatkins]

I think you misunderstood - that url wasn't a compressed example omitting a ton of binary data, it was literally what you would write. image/qrcode would be an image format, same as, say, SVG; like SVG, it would be a declarative image format, containing drawing instructions (namely, "draw the smallest QR code that embeds the following data") rather than pixel data.

But like I said, that's a separate discussion that doesn't have to impinge on any efforts to add qrcode() to CSS.

[BigBlueHat]

@tabatkins great explanation. 😃 I do think that browser support for either URL approach we've each proposed would obviate the need for qrcode() in CSS.

It'd be nice to have this feature regardless.

[tabatkins]

Like I said - it wouldn't obviate the need. @hober's example from the first post showed off something that absolutely could not be done if this was just a URL - you can't (currently...) construct a url() from multiple strings, and you definitely can't url-encode a string in CSS.

---

@hober do you know of a reference for the definition of qr codes? I'm wondering if we need more (optional) specifiers, like size; I know you can output the same data in multiple sizes of qr code, and I imagine a consistent size would be desirable in practice. (You can of course change the size of the generated image, but I mean the rows/cols of the grid itself.)

[jyasskin]

https://wicg.github.io/shape-detection-api/#dom-barcodeformat-qr_code mentions ISO 18004. @YellowDoge might know more details.

[hober]

ISO 18004 isn't free to access in full, grumble, but it does look like someone put the PDF on GitHub.

[Malvoz]

I think it's important that QR codes are exposed to accessibility APIs differently from (background-)images such that non-visual users can know there's something to scan (without relying on every author to provide proper alternative text). See the related imagecode element (QR/barcodes) proposal: whatwg/html#5801.