| Do we still want to do this? I think the ASCII-based QR code is good enough (or even better) than SVG. | |
| It doesn't display well in my browser at all, see the attached screenshot. (Even worse, the jumbled QR code *pulsates* due to some size adjustments made by the browser when the page is reloaded.) qr.png (97,622 bytes) | |
| Hmm. That looks like a font issue. As for pulsating, I did put in some code to 'zoom' the QR code if you go over it with the mouse. That is not what you mean? | |
| Yes, that actually explains the pulsating. These font issues will be unavoidable. Are there any arguments against using SVGs? | |
| If we can find a way to fix the font issue, SVGs just make the page larger and add avoidable complexity to the C logic. The current code is very readable. Not to mention you have already plenty on your plate. Which browser are you using? | |
| I'm using Chromium 84.0.4147. I'm not sure if we can fix the font issues reliably, as there are other variables, such as the browser's zoom setting or accessibility settings to make all fonts larger. It's much easier to precisely control the rendering of SVGs. | |
| It works fine with my Chromium 83.0.4103.116. And I've tried with various zoom settings / font enlargements, that works fine (FF and Chromium). I suspect your browser has trouble with: .qrtext { width: max-content; margin: auto; transition: font-size 0.2s; font-family: 'Lucida Console', Monaco, monospace; font-size: 0.5em; } and there specifically the font-family. I certainly never installed extra fonts, but this is still what I think we should investigate first. Maybe there is an easy fix that makes this work virtually everywhere? | |
| Hmm. The font-family is a "Web safe font" (aka: should be pre-installed everywhere). Also, I get your image ONLY if while I mess up the CSS syntax in that line and end up with a non-monospace font. Could it be that somehow you are not grabbing our CSS in full? Note that we (currently) "inline" the pure-min.css from a 3rd party site, which is likely broken on the backend.taler.net installation (this is on my list of things to fix). | |
| When I manually remove the "text-align: center" on the "<div class="qr">" (why is that there?), I still get a broken result. See the dev tools for the actual CSS properties the browser loaded. I even manually changed the font selection to *only* monospace, still won't display properly. I suspect the width of a non-breaking white space character is simply different from the unicode black box character. And I was actually be able to confirm this: When I ask the dev tools, it tells me that the QR code div is using a combination of two "physical" fonts: Droid Sans Mono—Local file(1988 glyphs) Tinos—Local file(1702 glyphs) => We should use SVGs, as the merchant must work on systems that have *way* more broken font configurations than mine ;-) qr3.png (139,703 bytes) | |
| Ok. Well, the code is (now) in taler-merchant-httpd_qr.c now, should be trivial to find for you. | |
| Implemented in b4fd96d2. | |
| Fix committed to master branch. | |
- Anonymous