View Issue Details

IDProjectCategoryView StatusLast Update
0006454Talermerchant backend API (C)public2020-08-03 12:26
ReporterFlorian DoldAssigned ToFlorian Dold 
PrioritynormalSeverityminorReproducibilityhave not tried
Status feedbackResolutionopen 
Product Version 
Target VersionFixed in Version 
Summary0006454: generate SVG for QR code in merchant backend
DescriptionRIght now, the /orders/{order_id} HTML page doesn't show a QR code, but instead displays a unicode approximation that doesn't render nicely on some browsers.
TagsNo tags attached.

Activities

Christian Grothoff

2020-08-02 23:28

manager   ~0016541

Do we still want to do this? I think the ASCII-based QR code is good enough (or even better) than SVG.

Florian Dold

2020-08-03 09:23

manager   ~0016545

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)
qr.png (97,622 bytes)

Christian Grothoff

2020-08-03 09:28

manager   ~0016546

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?

Florian Dold

2020-08-03 09:30

manager   ~0016547

Yes, that actually explains the pulsating.

These font issues will be unavoidable. Are there any arguments against using SVGs?

Christian Grothoff

2020-08-03 09:37

manager   ~0016548

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?

Florian Dold

2020-08-03 11:06

manager   ~0016549

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.

Christian Grothoff

2020-08-03 11:54

manager   ~0016550

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?

Christian Grothoff

2020-08-03 12:04

manager   ~0016551

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).

Florian Dold

2020-08-03 12:22

manager   ~0016552

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)
qr3.png (139,703 bytes)

Christian Grothoff

2020-08-03 12:26

manager   ~0016553

Ok. Well, the code is (now) in taler-merchant-httpd_qr.c now, should be trivial to find for you.

Issue History

Date Modified Username Field Change
2020-07-31 19:42 Florian Dold New Issue
2020-07-31 19:42 Florian Dold Status new => assigned
2020-07-31 19:42 Florian Dold Assigned To => Florian Dold
2020-08-02 23:28 Christian Grothoff Note Added: 0016541
2020-08-02 23:28 Christian Grothoff Status assigned => feedback
2020-08-03 09:23 Florian Dold File Added: qr.png
2020-08-03 09:23 Florian Dold Note Added: 0016545
2020-08-03 09:28 Christian Grothoff Note Added: 0016546
2020-08-03 09:30 Florian Dold Note Added: 0016547
2020-08-03 09:37 Christian Grothoff Note Added: 0016548
2020-08-03 11:06 Florian Dold Note Added: 0016549
2020-08-03 11:54 Christian Grothoff Note Added: 0016550
2020-08-03 12:04 Christian Grothoff Note Added: 0016551
2020-08-03 12:22 Florian Dold File Added: qr3.png
2020-08-03 12:22 Florian Dold Note Added: 0016552
2020-08-03 12:26 Christian Grothoff Note Added: 0016553