Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emoji avatar is displayed shifted in the QR code screen #2200

Open
Raiden-GH opened this issue Jun 6, 2024 · 2 comments
Open

Emoji avatar is displayed shifted in the QR code screen #2200

Raiden-GH opened this issue Jun 6, 2024 · 2 comments
Labels

Comments

@Raiden-GH
Copy link

When an emoji is used as an avatar, it is displayed shifted upwards in the QR code screen.

DC-iOS 1.46.2

Emoji-Avatar

@Raiden-GH Raiden-GH added the bug label Jun 6, 2024
@r10s
Copy link
Member

r10s commented Jun 6, 2024

yeah, this comes form the svg renderers that are buggy on different levels across platforms :/

we tried to work around these bugs for the "mass cases" of letters, so that it looks at least somehow good then. not sure if we can tweak that further without replacing svg alltogether :/

@Simon-Laux
Copy link
Member

Simon-Laux commented Jun 10, 2024

using https://github.com/RazrFalcon/resvg might work better, font alignment in my test is correct, but on my system it has problems loading fonts at all. maybe the wasm version in a web view would work better / more consistently. the advantage to resvg is that they aim to be very standard compliant and have a huge test suite.

Also macOS Finder displays the svg just fine for me, so maybe the system can already do it without extra libraries on newer phones? (though I don't know if that good svg support is native or a quicklook extension of one of my image editors)

iOS also displays a svg file with emoji avatar correctly in its media preview that I get when I open the svg file attachment in dc. (maybe don't use the lib on newer devices?)

r10s added a commit to deltachat/deltachat-core-rust that referenced this issue Oct 22, 2024
this PR adds a function that can be used to create any QR code, in a raw
form.

this can be used to create add-contact as well as add-second-device QR
codes (eg. `dc_create_qr_svg(dc_get_securejoin_qr())`) - as well as for
other QR codes as proxies.

the disadvantage of the rich-formatted QR codes as created by
`dc_get_securejoin_qr_svg()` and `dc_backup_provider_get_qr_svg()` were:

- they do not look good and cannot interact with UI layout wise (but
also tapping eg. an address is not easily possible)
- esp. text really looks bad. even with
[some](deltachat/deltachat-android@e5dc8fe)
[hacks](deltachat/deltachat-android#2215) it
[stays buggy](deltachat/deltachat-ios#2200);
the bugs mainly come from different SVG implementation, all need their
own quirks
- accessibility is probably bad as well

we thought that time, SVG is a great thing for QR codes, but apart from
basic geometrics, it is not.

so, we avoid text, this also means to avoid putting an avatar in the
middle of the QR code (we can put some generic symbol there, eg.
different ones for add-contact and add-second-device).

while this looks like a degradation, also other messengers use more raw
QR codes. also, we removed many data from the QR code anyway, eg. the
email address is no longer there. that time, sharing QR images was more
a thing, meanwhile we have invite links, that are much better for that
purpose.

in theory, we could also leave the SVG path completely and go for PNG -
which we did not that time as PNG and text looks bad, as the system font
is not easily usable :) but going for PNG would add further challenges
as passing binary data around, and also UI-implemtation-wise, that would
be a larger step. so, let's stay with SVG in a form we know is
compatible.

the old QR code functions are deprecated.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants