Rendered at 14:21:51 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
dfox 1 days ago [-]
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).
alex_suzuki 1 days ago [-]
Shameless plug for my web-based Zint frontend: https://barcode.new
(in-browser WASM)
I wrote it specifically because most online barcode generators don’t support vector output or suck in some other way: ads, signup necessary, code payload exposed to server-side processing etc.
pwdisswordfishs 1 days ago [-]
Aside from obfuscating the source code to sell licenses, how does this benefit from WASM?
Barcodes have been generated for decades on low-resource embedded devices. Even what would have been a modest-to-low-end machine 25 years ago would have no problem handling the compute needed for this job.
On this end, it just looks like the user has to deal with the penalty of dealing with 1 MB of resources when hitting the main page.
alex_suzuki 1 days ago [-]
The benefit of WASM in this case is that you can wrap a mature library written in C/C++ (in this case, Zint), and run it in a runtime that supports WASM, e.g. the browser. There's plenty of people who occasionally need to create barcodes, and not in some industrial, automated way, and a browser is just an easy way to accomplish that. Yes, you have 1MB loaded when you load the page, but hopefully that will be served from a cache.
pwdisswordfishs 3 hours ago [-]
> There's plenty of people who occasionally need to create barcodes
> hopefully that [1MB] will be served from a cache
Theodores 16 hours ago [-]
As a connoisseur of SVG, I like the approach, the results, the use of Zint and WASM. That said, there are a few opportunities.
The version string isn't needed these days, nor the XML header or the doctype.
The code/url/page title can go in the SVG title, to make it show on mouseover.
The id=barcode is also superfluous. Since id codes should be unique, this could be a problem when many QR codes exist on a page.
The background rectangle does not need x=0, y=0 since that is implied.
The 'hard coding' of the black and white is what you want to avoid any dark mode issues, however, I would still use currentColor and transparent rather than black, just to put myself in a world of dark/light mode pain, fixed in CSS.
alex_suzuki 10 minutes ago [-]
This is super cool, thank you!
The SVG is actually generated by Zint itself, only lightly patched in the wrapper. Zint is a pretty old barcode generator (not meant disrespectfully, quite the opposite actually), it's quite possible that some of its decisions when rendering to SVG are out of date or very conservative. The use of id/global namespace does feel like a potential pain point though, which I will take up with the upstream project.
nolroz 21 hours ago [-]
One MEGAbyte?? How could you!?
tfpgh 18 hours ago [-]
This is amazing!
mark-r 1 days ago [-]
I once worked at a company that used a Code39 font cartridge in HP Laserjets. When HP stopped putting font cartridge slots in their printers, I had the task of intercepting print jobs and detecting the font selection sequence, then taking the text and converting it to a Code128 bitmap graphic. It wasn't hard at all, kind of fun actually.
darksim905 19 hours ago [-]
'font' cartridge? the what now?
EvanAnderson 19 hours ago [-]
You're one of today's lucky 10,000.
Like another poster said, laser printers "back in the day" were freestanding computers with various communications interfaces that happened to have fancy paper handling and printing peripherals attached. In the case of the Apple LaserWriter, for example, it was arguably a more powerful computer[0] than the Mac machines of the day that were sending print jobs to it.
There were different ROM "personalities" available for laser printers, some of which came on pluggable cartridges.
Michael Steil, the blogger responsible for those links, has done work extracting code and PostScript data out of some of those old cartridges. It's a really cool aspect of retrocomputing many people aren't even aware of.
commented elsewhere but The links you shared are pretty cool, a little before my time (born late 80s). That's kinda neat, it makes me think of a post on HN some time back by Donald Knuth on the letter S and the technical challenges back then about that as a letter, mathmatically. I'm guessing given that, that's why printers needed these modules and were set up this way. Neat!
mark-r 13 hours ago [-]
The LaserWriter was like something from the future compared to the Laserjet. I think they used the same Canon print engine, but the HP was far less sophisticated. It only used bitmap fonts, nothing scalable like Adobe's Type 1 for Postscript. Knuth probably used a supercomputer for his typesetting.
mark-r 13 hours ago [-]
And if you don't know the origin of the phrase "lucky 10,000" then it's your lucky day too!
In the dark ages, when printers were PostScript and more powerful (and expensive) than the computers which printed on them, you added fonts by installing additional hardware modules, similar to a game console cartridge.
darksim905 13 hours ago [-]
The links someone else shared are pretty cool, a little before my time (born late 80s). That's kinda neat, it makes me think of a post on HN some time back by Donald Knuth on the letter S and the technical challenges back then about that as a letter, mathmatically. I'm guessing given that, that's why printers needed these modules and were set up this way. Neat!
xp84 18 hours ago [-]
Up until like 15 years ago, lots of laser printers even had RAM slots as well. Populating them with extra RAM made them behave better when printing big PDFs and stuff.
wildzzz 19 hours ago [-]
They were ROM cards that stored extra typefaces or other PostScript functions.
benj111 7 hours ago [-]
Don't say it too loudly. I'm sure HP would love to introduce 'Font as a service'
OrangeMusic 5 hours ago [-]
I'm sorry, after reading your comment several times I still don't understand why we shouldn't use this. What is the problem with it?
jpitz 14 hours ago [-]
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.
Theodores 17 hours ago [-]
You have given me the encouragement I needed...
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.
1bpp 1 days ago [-]
Is anyone willing to sacrifice their sanity for the sake of implementing a QR renderer as TTF hinting code?
I love seeing nonsense like that. How that work graphically though? Just keep adding to a same QR code that keeps getting denser as more text is added? I guess it doesn't have to practical though :)
You all know this is the answer. In fact you will do this and then post it on Show HN proudly.
dspillett 1 days ago [-]
The downvotes aren't saying the comment is wrong (though it might be), they are saying “if it is that easy, you ask Claude”. The parent comment seemed to be specifically asking if a person would work on it, not specifying what tools might be used in that work.
ahlCVA 1 days ago [-]
Barcode fonts have been around for ages. But what's cute about this one is that it can calculate the EAN13 checksum on its own.
alex_suzuki 1 days ago [-]
It can’t, at least for Code 128? There’s a text field that you enter the text into, and then the start/stop/checksum characters are computed.
ahlCVA 1 days ago [-]
It seems like it doesn't do this for Code 128 (possibly because it is variable-width?). It definitely works with EAN13 though - I tried it locally using only the TTF file.
alex_suzuki 1 days ago [-]
Oh, interesting! I tried it in Word on macOS but didn't get it to work. But it works in the browser (question mark = calculates check digit).
fyi code 39 barcodes are outdated because of the lack of check sums and leads to false positives.
infogulch 23 hours ago [-]
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].
"
Marelle is a free cursive police force for teaching writing in elementary school.
Introduction
This project is supported by the Digital Directorate for Education of the Ministry of National Education, and developed in the Forge of Digital Educational Commons.
The Marelle police is designed specifically for teaching cursive writing in elementary school, it was developed by a team of teachers and designers specialized in writing systems.
Teaching Cursive Writing
Structure and sequence of letters, rhythm and proportion, contextual variants: the Marelle font was thought around specific criteria to offer a quality model to teachers and students.
Particular attention has been paid to the trace of numbers, capital letters and punctuation.
A complete professional tool
The Marelle police offers 3 types of variants:
uppercase sticks or cursive
with or without lineage Seyes
height of ascendants and descendants
These variants can be combined to best meet the needs of teachers and students." etc
jurgemaister 1 days ago [-]
> cursive police force
bombcar 1 days ago [-]
I know I've often cursive'd the police.
ligne 1 days ago [-]
Homographs are tricky :-)
albert_e 20 hours ago [-]
Thanks!
(the first line made me laugh)
I now understand why there is no English version (though still surprised Google could not translate it)
piltboy 1 days ago [-]
"Marelle is a free cursive font designed for teaching handwriting in [French] elementary school."
I'm not sure they owe it to anyone to make the website available in English :-)
albert_e 20 hours ago [-]
That there is not much use for an english version -- is only evident to me with hindsight after reading the english translation :)
Thanks
tokai 1 days ago [-]
ooh thanks, the Bâton in capital letter is very nice.
mos_basik 23 hours ago [-]
Love it. Flashbacks to CE1 and CE2 (2nd and 3rd grade in the US system) in a French embassy school, simultaneously handling "immersion in real french", "using a fountain pen for the first time", "different long division" (https://en.wikipedia.org/wiki/Long_division#Eurasia) and "different cursive" (I think the method I was coming from was D'Nealian? https://en.wikipedia.org/wiki/D%27Nealian)
tecleandor 1 days ago [-]
Nice! That looks pretty similar to the one in "Cuadernos Rubio", a system that was super popular from the 60s to the 90s in Spain (that still exists) for learning handwriting in primary school.
endre 1 days ago [-]
this is genius
alex_suzuki 1 days ago [-]
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.
muhammadusman 22 hours ago [-]
just curious: are barcodes better in anyway compared to a QR code?
dimatura 18 hours ago [-]
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.
wps 20 hours ago [-]
I believe they are much faster to scan, as you don’t need to identify the corners.
nemoniac 1 days ago [-]
ASCII only?
Terr_ 1 days ago [-]
More or less, AFAICT the underlying barcode standards don't support Unicode, if that's what you mean.
It looks like Code 128 could potentially handle some ISO-8859-1 accented latin characters, but I'm not sure how to test it.
ale42 1 days ago [-]
Code 128 supports some ISO-8859-1 indeed, but it requires switching between encodings (there are 3 of them), and couldn't work with 128B (I guess the one used by the font, as it supports ASCII). See the table on Wikipedia: https://en.wikipedia.org/wiki/Code_128
trashb 1 days ago [-]
actually it seems they support 128A 128B and 128C with the correct encoder.
To use these fonts you have to use an encoder like the one below. It is an optimizing encoder, that means, it produces the shortest barcode that can encode the input. For this the encoder, if necessary or shorter, switches between the three available Code Sets (list from Wikipedia):
Even with plain ASCII we sometime struggle with the various scanners, as they emulate keyboards. So for instance using : in the barcode as a separator of values becomes wonky if the OS has a different input language than expected.
dmitrygr 1 days ago [-]
This is a perversion of the most sickening nature. Nicely done!
breakingcups 1 days ago [-]
I'm surprised at this reaction, this has been standard practice for many years in various companies where I worked.
dfox 1 days ago [-]
The fact that this is standard practice does not mean that it is not perverse. It kind of works sanely for plain Code39 (and even then you will see effects of doing that in weird places, like VAG stamping human readable VIN on a chassis, including the Code39 start/stop symbols), once you start using barcode fonts for Code128-derived symbologies (ie. UPC/EAN) the whole thing becomes a pointless exercise.
Dwedit 1 days ago [-]
I mean there was already the Bad Apple font (keep adding another character to your text and you get the next video frame)
I wrote it specifically because most online barcode generators don’t support vector output or suck in some other way: ads, signup necessary, code payload exposed to server-side processing etc.
Barcodes have been generated for decades on low-resource embedded devices. Even what would have been a modest-to-low-end machine 25 years ago would have no problem handling the compute needed for this job.
On this end, it just looks like the user has to deal with the penalty of dealing with 1 MB of resources when hitting the main page.
> hopefully that [1MB] will be served from a cache
The version string isn't needed these days, nor the XML header or the doctype.
The code/url/page title can go in the SVG title, to make it show on mouseover.
The id=barcode is also superfluous. Since id codes should be unique, this could be a problem when many QR codes exist on a page.
The background rectangle does not need x=0, y=0 since that is implied.
The 'hard coding' of the black and white is what you want to avoid any dark mode issues, however, I would still use currentColor and transparent rather than black, just to put myself in a world of dark/light mode pain, fixed in CSS.
The SVG is actually generated by Zint itself, only lightly patched in the wrapper. Zint is a pretty old barcode generator (not meant disrespectfully, quite the opposite actually), it's quite possible that some of its decisions when rendering to SVG are out of date or very conservative. The use of id/global namespace does feel like a potential pain point though, which I will take up with the upstream project.
Like another poster said, laser printers "back in the day" were freestanding computers with various communications interfaces that happened to have fancy paper handling and printing peripherals attached. In the case of the Apple LaserWriter, for example, it was arguably a more powerful computer[0] than the Mac machines of the day that were sending print jobs to it.
There were different ROM "personalities" available for laser printers, some of which came on pluggable cartridges.
Check these links out:
- https://www.pagetable.com/?p=1673
- https://www.pagetable.com/?p=1721
- https://www.pagetable.com/?p=1850
Michael Steil, the blogger responsible for those links, has done work extracting code and PostScript data out of some of those old cartridges. It's a really cool aspect of retrocomputing many people aren't even aware of.
[0] https://web.archive.org/web/20240404213221/https://lowendmac...
https://xkcd.com/1053/
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.
https://www.youtube.com/watch?v=Ms1Drb9Vw9M
It uses this, which i have no idea what it is :-) https://learn.microsoft.com/en-us/typography/opentype/spec/f...
[1]: https://github.com/lindell/JsBarcode
[2]: https://codepen.io/infogulch/pen/yyLJdrP
Another cool font, but less original, I stumbled upon recently is Marelle https://marelle.forge.apps.education.fr/ for cursive.
This website is in French so I was unable tounderstand the text
and the website is very resistant to automatic translation by Google Translate
>https://marelle-forge-apps-education-fr.translate.goog/?_x_t...
What gives?
" Marelle is a free cursive police force for teaching writing in elementary school. Introduction
This project is supported by the Digital Directorate for Education of the Ministry of National Education, and developed in the Forge of Digital Educational Commons.
The Marelle police is designed specifically for teaching cursive writing in elementary school, it was developed by a team of teachers and designers specialized in writing systems.
Teaching Cursive Writing
Structure and sequence of letters, rhythm and proportion, contextual variants: the Marelle font was thought around specific criteria to offer a quality model to teachers and students. Particular attention has been paid to the trace of numbers, capital letters and punctuation. A complete professional tool
The Marelle police offers 3 types of variants:
These variants can be combined to best meet the needs of teachers and students." etc(the first line made me laugh)
I now understand why there is no English version (though still surprised Google could not translate it)
I'm not sure they owe it to anyone to make the website available in English :-)
Thanks
It looks like Code 128 could potentially handle some ISO-8859-1 accented latin characters, but I'm not sure how to test it.
Now, do it with QR codes...