My first IT job, in 1975, was mostly about getting a computer to print in the right places on pre-made forms. Alas, nearly half a century later, I have to report that it hasn't got much easier. So don't be dismayed if you're having trouble getting labels to print correctly. It's okay to be frustrated, as it is frustrating, indeed. Just don't be dismayed. Read on.
When I was first putting QRazy.fun together, I thought that I would be able to do the label printing with HTML and CSS. (HTML is the Hyper Text Markup Language used to design web pages; CSS is Cascading Style Sheets, and extension that lets you design fancier web pages than straight HTML.) After all, CSS allows "absolute" positioning of display elements with pixel resolution. Getting a small QR code to print within the confines of a big label should be easy.
It failed miserably.
It turns out that CSS's "absolute" positioning is absolutely dependent on your particular combination of platform, browser, and printer. When I changed any one of those variables, the labels wouldn't print correctly. I'm not usually averse to coloring outside the lines, but the QR codes really have to be on the label for QRazy.fun to work.
I was frustrated. "It's 2022 and, almost fifty years after I started in this business, getting computers to print with precision still doesn't work‽"
My initial thought was that I was going to have to make users adjust a bunch of settings to suit their particular configuration. It got ugly, fast. At a minimum, you needed to set the top margin, left margin, size of QR code, horizontal spacing of the labels, vertical spacing of the labels, number of labels in each row, number of labels in each column. Worse, for reasons known only to the CSS gods, those values interact so that changing one causes subtle variations in one or more of the others. The only way to get all the numbers right was to painstakingly adjust each one so that it looked close on screen, then print a test page, see where the positioning was off, make an adjustment, rinse and repeat. After adjusting each of those seven variables multiple times and printing many test pages, then you need some way to store that information and identify which platform, browser, label stock, and printer you used—then hope a system, application, or firmware update didn't mess things up. It's horrible. Trust me, I tried.
But there is a way to print with some consistency between various platforms, browsers, and printers. The Portable Document Format (PDF) was designed for just that. So I convinced QRazy.fun to convert the label page to a .pdf file for printing. Why do you care? Because, unfortunately, when printing .pdf files your browser might act a little differently from what you might be used to when printing regular HTML web pages (and who actually does that, anyway?).
First, do as much as possible on screen. If it looks whack on screen, don't bother trying to print it. It's unlikely that a page of labels that looks bad on the screen will somehow print correctly.
Second, keep your expensive label stock out of the printer. Do test prints on plain paper. You can hold a sheet of blank label stock behind your printed sheet and get a good idea of whether things are in the right place. I'm much less frustrated when I don't think I'm wasting good labels (it's bad enough that I'm wasting paper and ink/toner).
On Android devices, you may get a message like "Your labels have been created; if you're not automatically redirected from this page, you might need to manually open the page of labels." The labels were generated and probably downloaded, but for some reason your browser isn't telling you where the file is. You can use your Files app to see if there's a file named something like "labels1234.pdf" or just tap the link and you'll probably be asked if you want to download the file again, then asked if you want to open it. Once the file opens in your phone's PDF viewer, you'll be able to print it using the share menu (see below).
If you can get to what looks like a proper page of labels, but you just can't see how to print them, then look for a menu item. Sometimes you have to click on a menu of three dots and look for a menu that says something about "share" or, on Apple devices, has an icon that looks something like this: . Android might have some variation of .
When you tap on the share menu or icon, you might get a list of other icons and you'll have to scroll down to see "Print." It's testimony that we don't print from mobile devices very often that the print function can be so buried under so many layers of arcane icons.
If there's still no print function visible, take a screenshot and email it to me. I'll see if I can help.
I'm sure that will happen, even with .pdf printing. I'm planning on adding a tweaking function once I get some feedback from testers on what problems occur with what kinds of printers.
That's what users are for! Seriously, though...
Here are the common combinations of platform and browser:
Chrom(ium)1 | Firefox | Safari | Edge2 | |
Windows3 | ✓ | ✓ | -- | ✓ |
macOS | ✓ | ✓ | ✓ | ✓ |
Linux4 | ✓ | ✓ | -- | ✓ |
ChromeOS | ✓ | not tested | -- | -- |
iOS | ✓ | ✓ | ✓ | -- |
Android | ✓ | ✓ | -- | ✓ |
Here's where things get QRazy. While I have dozens of computers and phones, I gave up my printer graveyard long ago. You might have a platform, browser, and printer combination that simply will not print QRazy.fun labels properly. There are simply too many variations in printerland for me to even begin to do enough testing.
If enough people have printing problems or just the need for some custom label formats, I'll release a cleaned-up version of the custom label printing code.