Re: [csswg-drafts] [css-images][css-values][css-gcpm] qrcode() for generating QR code images from URLs (#6544)

We've implemented ISO18004 (along with a dozen other symbologies). The main controllable parameter for QR-code are:
* unit size, ie the size of each square. Some use-cases require this to be fixed, rather than letting the code size to the available space.
* ECC level, (for QR, only three values - low, medium, high)
* version, ie. the number of squares in the code, although this is usually left to auto to size it to fit the data.

So yes, you'd need to allow for parameters other than the actual content of the barcode. The idea of using `<img>` is problematic for the reasons tab said (crazy long URLs). We use `object` and/or `embed`:

```html
<object type="bfo/barcode">
 <param name="value" value="whatever">
 <param name="ecc" value="high"> 
</object>
```

But until now we hadn't thought of doing this with CSS.

I agree with @Malvoz that this needs to be useful for accessibility, but if you made QR as a general image type, like `linear-gradient`, then they wouldn't be limited to backgrounds; you could do something like
```css
div.qrcode {
    content: qrcode(contents);
}
<div class="qr">content here</div>
```
which would let accessibility APIs do the right thing without extra effort on the part of the author (note that [content](https://www.w3.org/TR/css-content-3/#content-property) is allowed on non-pseudo elements but is limited to a few types, one of which includes `<image>` - so no issues with doing this. And we already use the `contents` keywords there to mean the DOM content of the node)

Two other things CSS would give us over a markup-based solution (object or a `<barcode>` element as proposed in https://github.com/whatwg/html/issues/5801):

* We can layer background-images, so we could put an image over the middle of the barcode - an inexplicably  popular practice despite it completely trashing all the error correction, which is in the center of the barcode. Although you can do this with markup of course, using a separate absolutely positioned image.

* Generate these automatically for URLs would be neat:
```css
a[href^=http]::after {
    content: qrcode(attr(href));
}
```

One suggestion however is to use `barcode()` rather than `qrcode()`. The reasoning is that while QR is the _flavour du jour_, in twenty years we might all be using aztec code or whatever.

So I'd think something more like this would be better:
```css
div.qrcode { content: barcode(contents, ecc=high, unit=1mm); }
div.azteccode { content: barcode(contents, ecc=high, unit=1mm, symbology=aztec); }
```
With an open list of parameters to the `barcode()` function and a symbology that defaults to qrcode, you're completely future proofed and can define symbologies as necessary.

For reference, PDFReactor have support for this, as does Antenna House formatter. PDFReactor uses a `<barcode>` element and Antenna House use a magic URL ([ref](https://www.antennahouse.com/barcode-generator-option))

-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6544#issuecomment-962441458 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 6 November 2021 12:02:29 UTC