This would be more interesting if you wouldn’t need to calculate checksums yourself, and could just write the barcode value. Good luck doing that with something like Reed-Solomon (QR, Data Matrix, etc.) or the shenanigans they’re doing with GS1 DataBar.
Do not do this unless you do not have any other choice. Preferrably use whatever native barcode support of the printer involved, if it does not have that, just generate the barcode as vector image or bitmap with a resolution that is a integer fraction of the printers resolution. Generating correct Code128 as a SVG is about the same amount of work as generating the correct input for some sort of barcode font (the hard part is determining the switches between character sets, not generating bars from bytes).
Recently I put some 8-bit graphics in SVG using lines and stroke dash arrays. I also got them animated, in a space efficient way, by keeping the lines that do not change from frame to frame. (I now have Maria and Willy from 'Jet Set Willy' for the wait after a form is submitted, plus a few Space Invaders. I am resisting the urge to do Pac-Man ghosts, but I will invent a need for them...)
Since an SVG can be a mystery box full of CSS, SMIL, Javascript and 'foreign object' imports, I am tempted to give it a go, so that a CSS variable is passed to the depths of the shadow DOM in a URL fragment or query string, to magically return either a barcode or a QR code.
This will take a little while, but I am keen to give it a go. In some ways, SVG is like 'Duplo LEGO' with the Libre Barcode as a font more like 'LEGO Technik', requiring vastly more skill.
Just because you can doesn't mean that you should, plus there are many barcode libraries that I know well, so why reinvent the wheel?
The typical barcode library usually comes with fluff, formats and libraries that I don't need. Hence 'qr.svg#upc-number' with it just being one file has appeal.
I am not yet up to speed on the latest AI toys, however, given the problem space is well defined, could I just ask AI chat bot to churn out the code for this in a matter of seconds, for it to encapsulate the logic in an SVG? Would it know how to specify 'crisp edges' and what the deal is with aspect ratio?
Similarly, could I also ask the AI nicely to create my own barcode font?
These seem manageable problems for todays trillion-dollar wonder tech, it is not as if I am asking for a cure for cancer or anything hard, yet I lack confidence in an AI solution, and feel I might as well work it out myself, given my goal is learning SVG rather than prompting.
My lack of confidence is the AI solution is due to the scarcity of people writing online about doing cool things with CSS variables, URL fragments and code in SVG. A Google search does not show 'stroke dash array' things for QR codes and online QR code generators create lots of fully fledged rect-angles, that lack the space efficiency or human-readability of my prefered approach, even if gzip doesn't care.
Sorry for bringing AI into everything, I just have my doubts that the new toys are that capable when it comes to novel solutions.
I did exactly that ( bitmap ) for a retail application back in ~2000. It was just a couple of constants for the stop and start sigils plus an array of bits for the digits....it was a quick work.
Neat! Barcodes are much more complex that I knew before looking into it. I used JsBarcode [1] to create a special barcode that reprograms a cheap barcode scanner we got on Amazon to be able to scan both UPS and FedEx tracking numbers. It is published on CodePen [2].
They are simpler and can be read by more devices, especially legacy devices that are still pretty widely deployed. Other than that, not much to say in their favor. They have lower data density compared to 2D codes such as QR or datamatrix. Many linear barcode symbologies have weak or nonexistent error correction capability. But often you don't need that extra data, and the cost of changing processes and equipment to upgrade to a new barcode format is seen as not worth it.
19 comments
[ 4.3 ms ] story [ 43.1 ms ] threadAnother cool font, but less original, I stumbled upon recently is Marelle https://marelle.forge.apps.education.fr/ for cursive.
Recently I put some 8-bit graphics in SVG using lines and stroke dash arrays. I also got them animated, in a space efficient way, by keeping the lines that do not change from frame to frame. (I now have Maria and Willy from 'Jet Set Willy' for the wait after a form is submitted, plus a few Space Invaders. I am resisting the urge to do Pac-Man ghosts, but I will invent a need for them...)
Since an SVG can be a mystery box full of CSS, SMIL, Javascript and 'foreign object' imports, I am tempted to give it a go, so that a CSS variable is passed to the depths of the shadow DOM in a URL fragment or query string, to magically return either a barcode or a QR code.
This will take a little while, but I am keen to give it a go. In some ways, SVG is like 'Duplo LEGO' with the Libre Barcode as a font more like 'LEGO Technik', requiring vastly more skill.
Just because you can doesn't mean that you should, plus there are many barcode libraries that I know well, so why reinvent the wheel?
The typical barcode library usually comes with fluff, formats and libraries that I don't need. Hence 'qr.svg#upc-number' with it just being one file has appeal.
I am not yet up to speed on the latest AI toys, however, given the problem space is well defined, could I just ask AI chat bot to churn out the code for this in a matter of seconds, for it to encapsulate the logic in an SVG? Would it know how to specify 'crisp edges' and what the deal is with aspect ratio?
Similarly, could I also ask the AI nicely to create my own barcode font?
These seem manageable problems for todays trillion-dollar wonder tech, it is not as if I am asking for a cure for cancer or anything hard, yet I lack confidence in an AI solution, and feel I might as well work it out myself, given my goal is learning SVG rather than prompting.
My lack of confidence is the AI solution is due to the scarcity of people writing online about doing cool things with CSS variables, URL fragments and code in SVG. A Google search does not show 'stroke dash array' things for QR codes and online QR code generators create lots of fully fledged rect-angles, that lack the space efficiency or human-readability of my prefered approach, even if gzip doesn't care.
Sorry for bringing AI into everything, I just have my doubts that the new toys are that capable when it comes to novel solutions.
[1]: https://github.com/lindell/JsBarcode
[2]: https://codepen.io/infogulch/pen/yyLJdrP
Now, do it with QR codes...