[B2G][l10n] Size label and value in app install confirmation dialog overlap for long translations

RESOLVED FIXED in 2.0 S3 (6june)

Status

Firefox OS
Gaia::System
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: Nikolai Khristoforov, Assigned: flod)

Tracking

({l12y})

unspecified
2.0 S3 (6june)
ARM
Gonk (Firefox OS)

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: LocRun1.2, LocRun1.3)

Attachments

(5 attachments, 2 obsolete attachments)

(Reporter)

Description

5 years ago
Created attachment 831740 [details]
Screenshot

When the user attempts to install an app from the Marketplace, the confirmation has an overlap between the translated word for "Size" and its value.

Repro Steps:
1) Updated Buri to BuildID: 20131113004000
2) Select Serbian Cyrillic as the language.
3) Open the Marketplace app.
4) Try to install an app.
5) Verify the overlap on the confirmation page.

Actual:
"Size" and its value overlap each other.

Expected:
"Size" and its value would not overlap each other.

Environmental Variables:
Device: Buri v1.2 Mozilla RIL
BuildID: 20131113004000
Gaia: 20e8d407dac3bb2ad2616e8c2d8678d70fd82fa0
Gecko: 3fc449c858e6
Version: 26.0
Firmware Version: 20131104

Repro frequency: 100%
See attached: Screenshot

Updated

5 years ago
Assignee: nobody → oskar.ivanic

Updated

5 years ago
Blocks: 928174
Keywords: l12y
This is only for Cyrillic, while using Sebian Latin, it's fine. Can we use a little bit smaller font for Cyrillic? 

There is no replacement for "size" in Serbian, I can make it shorter, but this is the fault because of font size since Cyrillic takes more space. 

Btw. Telenor uses only Latin in their phones.

Comment 2

5 years ago
Hi Wil,

Who can help us reduce the font size for this particular feature?
(In reply to Peiying Mo from comment #2)
> Hi Wil,
> 
> Who can help us reduce the font size for this particular feature?

This is on device so you'd have to talk to someone on gaia.  That said, you're starting a game of whack-a-mole trying to adjust sizes for specific fonts and words.  I'd expect adjustment to the padding along with maybe the whole layout (UX team input).  It's a hard problem. :-/
There is a meeting with UX team about these kind of issues next week. Hope this will help

Comment 5

5 years ago
Hi UX team,

Is there Cyrillic CSS to implement?  Looks like the size is usually larger than Latin based fonts.  Even though the bug is filed for this particular instance, but this could be a common problem in other tight areas.  

Please advice how we can fix this bug.

Updated

5 years ago
Flags: needinfo?(firefoxos-ux-bugzilla)

Comment 6

5 years ago
Flagging Eric to advise on font size and padding. We would not be the team to manage a language-specific CSS; maybe someone on Internationalization would know?
Flags: needinfo?(firefoxos-ux-bugzilla) → needinfo?(epang)
Created attachment 8348723 [details]
spacing.png

Hi, I propose adjusting the layout and adding 1 rem spacing between the two elements.  See attached image.  Thanks!
Flags: needinfo?(epang)
Hi Eric that looks ok.
Please do that.
Thanks!
Created attachment 8358863 [details]
difference.png

Hi all,
I know that screenshot is not exactly related to this bug but I have a question.

In attached screenshot you can see that the size of Cyrillic font is usually larger than Latin based fonts and because of that texts in header fields are truncated (this also happens in header fields, buttons etc. of other applications)

Is there any way that Cyrillic font can be reduced in size globally?

Thanks!!!
Hi Eric.

Your suggestion from Comment 7 looks ok.
Can you please add that one rem spacing or 2 which would be even better.

This problem exist in 1.3 also.
Flags: needinfo?(epang)
(In reply to Vanja Tumbas from comment #10)
> Hi Eric.
> 
> Your suggestion from Comment 7 looks ok.
> Can you please add that one rem spacing or 2 which would be even better.
> 
> This problem exist in 1.3 also.

Hi Vanja, I'm not a developer so I can't implement :)

Nikolai, do you know who can help implement? Thanks!
Flags: needinfo?(epang) → needinfo?(nkhristoforov)

Comment 12

4 years ago
Noting found in 1.3

1.3 Environmental Variables:
Device: Buri 1.3 MOZ
BuildID: 20140221004002
Gaia: 8039a5cb7519adfa81677df577f494c6a4de6140
Gecko: e5f25becc0e7
Version: 28.0
Firmware Version: v1.2-device.cfg
Summary: [B2G][1.2][l10n][Marketplace] Serbian Cyrillic: App install confirmation page has an overlap between "Size and its value → [B2G][l10n][Marketplace] Serbian Cyrillic: App install confirmation page has an overlap between "Size and its value
Whiteboard: LocRun1.2 → LocRun1.2, LocRun1.3
Delphine, do you know who can implement Eric's proposed adjustment to layout from Comment 7 (attachment: spacing.png) ???
Flags: needinfo?(lebedel.delphine)
Ok so I believe Vivien might be able to assign someone to this.
Otherwise I wouldn't know
Flags: needinfo?(lebedel.delphine) → needinfo?(21)
Created attachment 8382861 [details] [diff] [review]
bug938306.patch

A patch like this is probably doing what you are looking for. I don't have Serbian installed locally to verify though.
Attachment #8382861 - Flags: review?(etienne)
Flags: needinfo?(21)
Comment on attachment 8382861 [details] [diff] [review]
bug938306.patch

Review of attachment 8382861 [details] [diff] [review]:
-----------------------------------------------------------------

::: apps/system/style/app_install_manager/app_install_manager.css
@@ +46,5 @@
>  }
> +
> +#app-install-dialog dl > dt {
> +  margin-right: 1rem;
> +  overflow: hidden;

how about some text-overflow ellipsis on this?
Attachment #8382861 - Flags: review?(etienne)

Updated

4 years ago
Assignee: oskar.ivanic → tumbas93
Created attachment 8415801 [details]
v1_4.png

Image from 1.4

"Size" and its value overlap each other.

Can someone fix this issue?
(Assignee)

Updated

4 years ago
Flags: needinfo?(nkhristoforov)
(Assignee)

Updated

4 years ago
Assignee: tumbas93 → nobody
Component: sr / Serbian → Gaia::System
Product: Mozilla Localizations → Firefox OS
(Assignee)

Comment 18

4 years ago
Moving to Gaia since we have a proposed solution and it involves changes to system CSS.

I'm going to steal Vivien's patch since it's been around for a while.
(Assignee)

Comment 19

4 years ago
Created attachment 8431622 [details] [review]
Pull request on Github

This implements Vivien's patch + plus text-overflow: ellipsis.

It's also widening the original space available for the left column from 7 to 8rem: text on the right column can wrap, URLs don't but adding 1rem doesn't make things worse.
Attachment #8382861 - Attachment is obsolete: true
Attachment #8431622 - Flags: review?(etienne)
(Assignee)

Comment 20

4 years ago
Created attachment 8431627 [details]
screenshot.png

Non patched, patched with the same app, patched with a fake long author name.
Attachment #8415801 - Attachment is obsolete: true
(Assignee)

Updated

4 years ago
Assignee: nobody → francesco.lodolo
Summary: [B2G][l10n][Marketplace] Serbian Cyrillic: App install confirmation page has an overlap between "Size and its value → [B2G][l10n] Size label and value in app install confirmation dialog overlap for long translations
Comment on attachment 8431622 [details] [review]
Pull request on Github

Thanks, very clear :)
Attachment #8431622 - Flags: review?(etienne) → review+
(Assignee)

Updated

4 years ago
Status: NEW → ASSIGNED
Keywords: checkin-needed
master: https://github.com/mozilla-b2g/gaia/commit/f1f7a2b0dd991f53233295cdcdf131986a687d11
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → 2.0 S3 (6june)
You need to log in before you can comment on or make changes to this bug.