Cato, registered Lynx Ⓛ
Someone somewhere at DB has written a QR code generator that outputs QR codes as HTML tables. I'm not sure if I should be impressed or horrified.
Nov 5 at 12:07pmWeb
Show threadjasegNov 5
@cato that’s honestly not the worst idea. Easily supports ancient devices that don’t do svg properly yet, is natively scalable, and probably even saves some data over anything except svg where you put the entire code into one big chonky path data.
Show threadCato, registered Lynx ⓁNov 5
@jaseg yeah, it is kind of cool tbh. :D
Show threadmart-wNov 5
@jaseg @cato A 1-bit bitmap or even png with a 1:1 pixel mapping would be even more compact, wouldn't it? It would, however, come with the potential issue of browsers trying to be smart about the upscaling and ruining the pattern in the process
Show threadjasegNov 5
@mart_w @cato exactly that upscaling is only properly supported on fairly recent browsers
Show threadembixNov 5

@mart_w @jaseg @cato

> trying to be smart about the upscaling and ruining the pattern in the process

Yup. Even before the age of ey-aye-slop, image reproduction was already tricky. https://dkriesel.com/en/blog/2013/0802_xerox-workcentres_are_switching_written_numbers_when_scanning

Xerox scanners/photocopiers randomly alter numbers in scanned documents

Xerox scanners/photocopiers randomly alter numbers in scanned documents Please see the “condensed time line” section (the next one) for a time line of how the Xerox saga unfolded. It for example depicts that I did not push the thing to the public right away, but gave Xerox a lot of time before I did so. <iframe width="700" height="394" src="https://www.youtube.com/embed/c0O6UXrOZJo" frameborder="0" allowfullscreen></iframe>

D. Kriesel
Show threadARGVMI~1.PIFNov 5

@mart_w @jaseg @cato @brezelradar

Use CSS `image-rendering:pixelated` to fix that.

Show threadAlice Nov 5
@jaseg @cato likely horrible in a screen reader tho. Ofc a qr code is a qr code, but one could still have an image with an alt text saying that it's a qr code of this or this url
Show threadAlexia Nov 5
@alice @cato @jaseg

should be a relatively easy fix with an aria-hide and other stuff ig

I mean that's nlt great but, hm
Show threadAlice Nov 5
@alexia @jaseg @cato then reader mode, forced colors, print mode etc

One probably could make it all work, but... why
Show threadLilith Ashley Nyx Arson Nov 5
@alice @jaseg @cato <table aria-label="QR Code of ...">...</table>
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6.html
ARIA6: Using aria-label to provide labels for objects | WAI | W3C

Show thread𒀭Wiiお姉さん 💜 🏳️‍⚧️Nov 5

@jaseg Now I'm wondering if SVG using would even be so much more than a single path after it gets zipped...

That aside though, are you sure a 2 colour bitmap wouldn't be smaller than an HTML table? It can't have that much overehead, right?

Show threadjasegNov 5
@darkwiiplayer especially older browsers commonly don’t support scaling images with nearest-neighbor interpolation, so they would render an image blurry.
Show threadJonas 🐱Nov 5
@jaseg @cato The thought that devices that don't even support SVGs are connected to the internet makes me scared 😵‍💫
Show threadJørnNov 5
@jaseg @cato For those devices, you should rather make a JPEG where the QR pixels are 8x8 real pixels, so they align with the JPEG segment borders. It’s actually lossless that way.
Show threadminiBill (Leonardo)Nov 9
@jornane @jaseg @cato why not a PNG tho?
Show threadJørnNov 9
@miniBill Yup, but in case you want to support beforementioned ancient software. JPEG was basically the first web image format. GIF and PNG came later.
Show threadbdf2121cc3334b35b6ecda66e471Nov 5

@jaseg @cato Not just ancient devices, but unless it's changed since I last looked, a lot of modern E-mail clients/groupware programs just render HTML E-mail badly for some reason.

Also, all the advantages of things like flexbox and grid really don't apply to QR codes.

Still, could've been an image...

Show threadARGVMI~1.PIFNov 5

@bdf2121cc3334b35b6ecda66e471

The main problem with email clients is that they ignore <style> elements. You can apply inline CSS with style="…", but that's it.

Some email clients don't ignore <style> elements, mind you, but webmail in particular usually does. You don't want the email's styles to apply to the entire webmail user interface, after all.

These days, shadow DOM can be used to confine the effects of <style> to just the email, but Gmail doesn't do that for some reason.

@jaseg @cato

Show threadbdf2121cc3334b35b6ecda66e471Nov 5
@argv_minus_one @jaseg @cato I remember reading that Outlook used Microsoft Word's, not Internet Explorer's, HTML renderer and decided that was a good time to stop looking into it.
Show threadARGVMI~1.PIFNov 5

@bdf2121cc3334b35b6ecda66e471

Was it really necessary for you to remind me that Outlook exists? 😖

@jaseg @cato

Show threadbdf2121cc3334b35b6ecda66e471Nov 5
@argv_minus_one @jaseg @cato suffer
Show threadosterhäschen jasminNov 5
@cato have to admit, I love it. it’s simple, it works, it’s likely supported by all browsers out there, no matter their age.
Show threadDarkRatNov 5
@cato tbh, it's probably the most backwards compatible across all devices
Show threadOri   (Ackja)Nov 5
@darkrat @cato what about a simple png tho 😭

 - posted by Ori
Show threadwikiyuNov 5
@ori @darkrat @cato png`s are often not so liked by embedded devices web browsers. Like these in cars (before android auto/apple something), handhelds, etc
Ok i dont know why one would like to show DB QR code in a car, but on PS Vita? some old Kindle? why not
Show threadDarkRatNov 5

@wikiyu @ori @cato It's also about scaling.

pngs can theoretically be scaled lossless due to the sharp corners, but only if you scale linerarly. Which some devices don't do per default (because it looks bad in most cases).
And if you scale with a non-linear algo, you can get weird results:

And sending a larger png is just wasted bandwidth

Show threadМя ��Nov 5

@darkrat looks not so pretty, but still readable

@wikiyu @ori @cato

Show threadМя ��Nov 5

@darkrat now I need to write QR to <table> converter to test how much bandwidth you can actually save

50px PNG QR with no border is less than 500 bytes already

@wikiyu @ori @cato

Show threadZ̈oéNov 5
@darkrat @wikiyu @ori @cato an upscaled png compresses quite well (RLE)
Show threadARGVMI~1.PIFNov 5

@darkrat

The QR code scanner app on my phone can read that just fine. 7% error correction level: not perfect, but not bad.

(And of course it's a rickroll. 😂)

@wikiyu @ori @cato

Show threadDarkRatNov 5

@argv_minus_one sure. but it does not look nice and user might complain about a weird looking qr code.

and yes, I already had users open support tickets for exactly that

Show threadARGVMI~1.PIFNov 5

@darkrat

People complain about QR codes looking weird?! QR codes are for computers, not humans!

Show threadNavi  Nov 5
@cato type shit i would have written in 2019 lmao
Show thread210561 ✨ [Q]Nov 5
@cato this one votes for kinda neat, works well, mildly cursed
Show threadTammi 𝆮 𓃠Nov 9
@q @cato gotta test how it renders in IE
Show threadCarlos SolísNov 5
About the only potential complaint is that screen readers would take forever and a day to "read" the table out loud
Show threadlobingeraNov 5

@csolisr Hmm, i have no access to a screenreader, but i'd assume, that some meta-data in the table should make it clear it's encoded data and not readable text.

But a good point.

Show threadCarlos SolísNov 5
Then again, if a blind user requires verifying that the QR code was correctly generated pixel per pixel, a table would make navigating through each dot much more easily than a vectorial image. Edge case scenario, but hey!
Show threadjackNov 5
@cato paging @revk
Show threadRevK Nov 5

@jackeric @cato Oh I am sure I could do that, LOL.

Nice one.

Show threadRawiWoofNov 5
@cato
I'm getting memories from my studies when I was taught "don't use HTML tables for layouts".
Seeing this is indeed both ingenius and at the same time makes my brain scream "What in the flying fuck?!"
Show threadembixNov 5

@rawenwolf @cato "don't use HTML tables for layouts" is not actionable - what alternatives did they suggest for the problem like QR codes? Which of those are still supported by browsers with >1% market share, and which advantages&disadvantages do they have compared to plain old html tables in that kind of application?

context: I don't remember being taught html and I only wrote a few websites, so I genuinely don't know. I kinda overheard that phrase tho.

Show threadRawiWoofNov 5

@brezelradar @cato
The "tables for site layout" thing is from waaaay back when CSS wasn't widely used so website creators used tables to create some form of layout. Nowadays you do this with CSS, hence why I was taught "don't use tables for layouts" since it was already long obsolete and super clumsy.

The QR code point would be moot since back then QR codes weren't used in any capacity yet. And I think even then they would be static images rather than formed from HTML elements.

Show threadembixNov 5
@rawenwolf @cato yea, I get the div/span idea. My focus was indeed on "tabular data" and "pixel correct" representation of images.
Show threadRawiWoofNov 5
@brezelradar @cato
In cases like this I'd say the table approach sounds reasonable. How "correct" is another thing since HTML and webdev isn't my field expertise but it doesn't sound as a bad idea overall.
Show threadstefan (stefbun)Nov 5
@cato But no javascript needed hehe
Show threadМя ��Nov 5
@cato using tables is nothing, compared to non square pixels
Show threadOwl EyesNov 5
@cato horrified
Show threadaaNov 5
@cato valve made one that uses divs
Show threadCato, registered Lynx ⓁNov 5
@aa i need to know more
Show threadaaNov 6
@cato
Show threadCato, registered Lynx ⓁNov 6
@aa Jesus fuck
Show threadColin 🐈🌱Nov 5
@cato
What actually horrifies me is the fact that it's not square
Show threadStadler BLÅHAJ Evo  @ Revision26Nov 5
@cato ok 7222e800 now wants to make a more efficient one that uses a bunch of divs that contain multiple adjacent pixels to output a more efficient QR code with single elements having multiple pixels of the QR code. fuck.
Show threadFreeeeeeeeeeeeee  Nov 5
@memdmp @cato or the CSS art route of a ton of box-shadows on a single div  
Show threadCato, registered Lynx ⓁNov 5
@freeplay @memdmp holy shit haha
Show threadStadler BLÅHAJ Evo  @ Revision26Nov 5
@freeplay @cato how to performance test a css rendering engine: this (+ optionally some backdrop-filters infront of it for extra funny)
Show threadtlayoyoNov 5
@cato
Show threadbituur esztreymNov 5
@cato
wow. this is table-art! thought it had disappeared..