1653899 - Zap underline doesn't work when spanning multiple lines or with longer text.

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Francesco Lodolo [:flod]]

Attachment: immagine.png

This is the current Italian translation

onboarding-multistage-import-header = Importa password, segnalibri e <span data-l10n-name="zap">altro ancora</span>

Notice how the zap doesn't follow on the second line.

I can work around it by adding a non-breaking space, but I think it should be fixed on the code side. I tried adding a white-space: nowrap, and turns out the highlight it's too short for 2 words, although they're not very long.

Comment 1

[Francesco Lodolo [:flod]]

Attachment: Screenshot with nowrap

Comment 2

[Punam Dahiya [:pdahiya]]

NI Flod to confirm if translation can be edited to drop 'ancora' and if 'Importa password, segnalibri e altro' suffice to resolve this issue. Thanks

Comment 3

[Francesco Lodolo [:flod]]

(In reply to Punam Dahiya [:pdahiya] from comment #2)

NI Flod to confirm if translation can be edited to drop 'ancora' and if 'Importa password, segnalibri e altro' suffice to resolve this issue. Thanks

That's not a solution, because I might have control over Italian, but that doesn't scale for ~90 languages.

Comment 4

[Punam Dahiya [:pdahiya]]

(In reply to Francesco Lodolo [:flod] from comment #0)

Created attachment 9164643 [details]
immagine.png

This is the current Italian translation

onboarding-multistage-import-header = Importa password, segnalibri e <span data-l10n-name="zap">altro ancora</span>

Notice how the zap doesn't follow on the second line.

Zap not breaking to new line is known issue. See tips in https://protocol.mozilla.org/patterns/atoms/zap.html#zap

I can work around it by adding a non-breaking space, but I think it should be fixed on the code side. I tried adding a white-space: nowrap, and turns out the highlight it's too short for 2 words, although they're not very long.

Adding white-space: nowrap to enclosing tag and using aspect ratio for svg helping it scale better for wider texts should be the fix here.

Comment 5

[rodin]

Attachment: 2020-07-24 10_06_17-Window.png

Indonesian (id) definitely needs two words "yang lain".
Readability is poor because overlap between descenders and zap. (letter "y" and "g")

Comment 6

[Emily McMinn :emcminn]

Thanks for further examples - we're also intending for the descenders in the text to sit "on top" of the zap, which should improve readability.

Comment 7

[Emily McMinn :emcminn]

Attachment: Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring

Comment 8

[Emily McMinn :emcminn]

Attachment: Screen Shot 2020-07-28 at 3.53.09 PM.png

We've chosen a different (longer) zap that, along with the nowrap, should fix this issue.

Comment 9

[fabrixx2]

Attachment: welcome.png

Comment 10

[fabrixx2]

Comment on attachment 9169681 [details]
welcome.png

Work well with 81.0a1 (2020-08-12) (compiled with official branding)

Comment 11

[Francesco Lodolo [:flod]]

(In reply to fabrixx2 from comment #10)

Comment on attachment 9169681 [details]
welcome.png

Work well with 81.0a1 (2020-08-12) (compiled with official branding)

Italian localization has a non-breaking space at the moment, so not exactly relevant for testing.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dd306951f80c
New long zap .svg to allow for longer spans; plus dynamic measuring r=pdahiya

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/dd306951f80c

Comment 14

[BugBot [:suhaib / :marco/ :calixte]]

Since the status are different for nightly and release, what's the status for beta?
For more information, please visit auto_nag documentation.

Comment 15

[Ryan VanderMeulen [:RyanVM]]

Do we need this on Beta81 or can this ride the 82 train to release?

Comment 16

[Emily McMinn :emcminn]

Hi Ryan, we'd like to uplift this, once it's verified by QA. Thanks!

Comment 17

[Emily McMinn :emcminn]

Hi Robert, can we can QA verification for this patch since we would like to uplift it? Thanks!

Comment 18

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the "Zap underline" is correctly displayed under multiple lines and under longer text using Firefox Nightly 82.0a1 en-US, DE, FR, RU, and IT (Build ID: 20200831215215) on Windows 10 x64, macOS 10.15, and Ubuntu Linux 18.04.

Comment 19

[Emily McMinn :emcminn]

Comment on attachment 9166577 [details]
Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring

Beta/Release Uplift Approval Request

• User impact if declined: Currently, the "zap" decoration on about:welcome doesn't display correctly on longer strings; which will affect primarily non-en/US locales.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This is a design change only; it touches the "zap" assets (svgs) and their render method.
• String changes made/needed: none

Comment 20

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9166577 [details]
Bug 1653899 - New long zap .svg to allow for longer spans; plus dynamic measuring

Approved for 81.0b5.

Comment 21

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/65f05c29e9ee

Comment 22

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the "Zap underline" is correctly displayed under multiple lines and under longer text using Firefox Beta 81.0b5 en-US, DE, FR, RU, and IT (Build ID: 20200901203141) on Windows 10 x64, macOS 10.15, and Ubuntu Linux 18.04.