QR codes

Examples

qr around an inline svg, an img or a canvas. The code keeps its own quiet zone - four modules of white round it, drawn by the code's generator; the tile adds 8 px more. --redz-qr-size sets the code's width, 11rem (176 px) by default.

<figure class="vstack gap-8 align-items-center">
	<div class="qr"><img src="img/qr.svg" alt="QR code: the address of this site"></div>
	<figcaption class="fs-12 text-muted">Scan to open the docs</figcaption>
</figure>
<figure class="vstack gap-8 align-items-center">
	<div class="qr" id="qr-small"><img src="img/qr.svg" alt="QR code: the address of this site, smaller"></div>
	<figcaption class="fs-12 text-muted">7.5rem</figcaption>
</figure>

Downloaded as a picture

A button with command="--download" and aria-controls naming the tile downloads its code as a PNG on white, to print on a room's door or a table's card: data-file names the file, code.png by default, and data-size is its side in pixels, 512. An inline svg is drawn through a blob: image, so the page's Content Security Policy needs img-src blob:; an img from another site needs that site's CORS.

Download the code

<div class="qr" id="qr-download-room-code"><img src="img/qr.svg" alt="QR code: the menu of room 12"></div>
<button class="btn" type="button" command="--download" aria-controls="qr-download-room-code" data-file="room-12.png" data-size="512"><i class="bi bi-download" aria-hidden="true"></i>Download the code</button>

Accessibility

• A code is a picture of something a person may not be able to scan: give the same thing in words beside it - the address, or the secret key a 2FA app can take typed.
• An img gets an alt that says what the code holds; an inline svg gets role="img" and an aria-label.
• Forced colors leave the tile alone, so the code is never inverted.

Tokens

From css/components/qr.css, which declares no custom property of its own.

It reads the theme's --redz-space-8, --redz-border, --redz-radius-8, --redz-qr-size.