Closed Bug 1023817 Opened 5 years ago Closed 5 years ago

[vertical] Several app names are truncated because of font-size

Categories

(Firefox OS Graveyard :: Gaia::Homescreen, defect)

defect
Not set

Tracking

(blocking-b2g:2.0+, b2g-v2.0 verified, b2g-v2.1 verified)

VERIFIED FIXED
2.0 S4 (20june)
blocking-b2g 2.0+
Tracking Status
b2g-v2.0 --- verified
b2g-v2.1 --- verified

People

(Reporter: flod, Assigned: kgrandon)

References

Details

(Whiteboard: [systemsfe])

Attachments

(9 files)

Attached image Comparison
Vertical homescreen seems to use a bigger font than 1.4. 

The result is that several default apps display a truncated name, and this also has a seriously bad impact on l10n, where text is usually longer.

See screenshot, from left to right:
1. English 1.4
2. English current master 2.1
3. Italian current master 2.1
Two issues:
* Marketplace used to be displayed completely, now it's not, which means less space available for text.
* text used to fade out, not be truncated
I think that it is because we are using text-overflow with ellipsis in vertical instead of clip as in horizontal (with a SVG mask)
Peter, any spec to see how this should be truncated? 10x
Flags: needinfo?(pla)
Attached image Italian on 1.4
For comparison, Italian on 1.4, since English doesn't have any truncations.
Comment on attachment 8438372 [details]
Comparison

We have a similar behavior with french locale too, for instance with Settings.
Flags: needinfo?(tchevalier)
UX - I'm imagining this is probably a VD blocker for the release, right?
Flags: needinfo?(firefoxos-ux-bugzilla)
Even though Peter is already flagged (correctly) on the truncation recommendation, I am also flagging Eric as he's advised on truncation issues in the past.
Flags: needinfo?(epang)
Going to hold a blocking decision on Eric's recommendation and difficulty assessment. Solving app name truncation issues in n+ languages may be too tricky to block on.
Hmm, not sure about what is the difficulty here, we just need the same room as on 1.4 for App names, or I am missing something?
Flags: needinfo?(tchevalier)
As cristian said in comment 2, it sounds like we should just cut names off instead of using text-overflow: ellipsis. The three dots can take up quite a bit of space.

If we should use the same type of mask that is a different story. There may be sight performance concerns, so I would personally prefer to just truncate if possible.
QA Whiteboard: [VH-FC-blocking?]
Delphine - Can you also weigh in if this is a blocker for l10n?
Flags: needinfo?(lebedel.delphine)
Yes absolutely, should be considered as a blocker for l10n
thanks
Flags: needinfo?(lebedel.delphine)
blocking-b2g: --- → 2.0?
QA Whiteboard: [VH-FC-blocking?] → [VH-FC-blocking+]
Flags: needinfo?(firefoxos-ux-bugzilla)
Whiteboard: [systemsfe]
As Théo said, we just need to replicate what happens on 1.4: same amount of space available for icon names, fade-off instead of truncation. 

That will not only avoid issues with l10n, but let "Marketplace" be completely displayed for en-US as well.
(In reply to Stephany Wilkes from comment #7)
> Even though Peter is already flagged (correctly) on the truncation
> recommendation, I am also flagging Eric as he's advised on truncation issues
> in the past.

Hi, I think Peter is best to make a suggestion on this since he owns homescreen, I'll contact him and make sure he's aware of the issue and his NI.  Thanks!
Flags: needinfo?(epang)
Hi 

I'm taking a look at this on behalf of Peter. 

Kevin - can you tell what is the maximum width before a label gets truncated? I'm thinking may need to go down a font size and/or bump up text draw box. 

Thanks
Hung
Flags: needinfo?(pla) → needinfo?(kgrandon)
Not really sure I can be too helpful on this, I guess it's just 1/4 of the screen resolution because we have four columns.
Flags: needinfo?(kgrandon)
Part of the problem seems also to be the amount of horizontal padding
https://github.com/mozilla-b2g/gaia/blob/master/shared/elements/gaia_grid/style.css#L47

Slightly lowering the font-size, and reduce that padding should give us back the old space.
(In reply to Francesco Lodolo [:flod] from comment #17)
> Part of the problem seems also to be the amount of horizontal padding
> https://github.com/mozilla-b2g/gaia/blob/master/shared/elements/gaia_grid/
> style.css#L47
> 
> Slightly lowering the font-size, and reduce that padding should give us back
> the old space.

Nice catch. Let's start with that and see if that's good enough for now.
Assignee: nobody → kgrandon
Status: NEW → ASSIGNED
I'm playing around with the sizes in photoshop and I think if we move from the 1.4 rem to 1.2 rem, we should be good.
Attached file Github pull request
I'm getting good results reducing the padding and shrinking the text to 1.2rem.

Opening this for review against Cristian, or if you have time Francesco, I'd be happy for you to review it as well.
Attachment #8439410 - Flags: review?(francesco.lodolo)
Attachment #8439410 - Flags: review?(crdlc)
Comment on attachment 8439410 [details] [review]
Github pull request

Not really a reviewer, but looks good to me (going to attach a screenshot of Italian).
Attachment #8439410 - Flags: review?(francesco.lodolo) → feedback+
Attached image Comparison patched
Current left, patched right.
Attached file 1023817.zip
Played around with the debugger and attached my value updates along with some screens. 

We should leave the current 3 column at 1.4 and move to 1.2 for 4 column layout. 

Thanks!
Turns out we can display more characters on three columns with 1.4rem font than we can at 4 columns with 1.2rem font. Sounds good to me.
Comment on attachment 8439410 [details] [review]
Github pull request

This is simple enough that I will do r=me with the feedback given. Thanks guys.
Attachment #8439410 - Flags: review?(crdlc) → review+
Landed: https://github.com/mozilla-b2g/gaia/commit/5f3d2edc8fc9c69c995975164f97f81d360f5d7b
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
blocking-b2g: 2.0? → 2.0+
This issue has been successfully verified on Flame v2.1&2.0.
See attachments: v2.1_English_1.png,v2.1_English_2.png,v2.1_Italian_1.png and v2.1_Italian_2.png.
Reproduce rate: 0/5

STR:
1. When language is English,see attachments:v2.1_English_1.png and v2.1_English_2.png.
**The several default apps' names displays normally.
2. Change language to Italian,see attachments:v2.1_Italian_1.png v2.1_Italian_2.png.
**The several default apps' names displays normally.

Flame 2.1 build:
Gaia-Rev        38e17b0219cbc50a4ad6f51101898f89e513a552
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/8b92c4b8f59a
Build-ID        20141205001201
Version         34.0
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20141205.035305
FW-Date         Fri Dec  5 03:53:16 EST 2014
Bootloader      L1TC00011880

Flame 2.0 build:
Gaia-Rev        856863962362030174bae4e03d59c3ebbc182473
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/e40fe21e37f1
Build-ID        20141208000206
Version         32.0
Device-Name     flame
FW-Release      4.4.2
FW-Incremental  eng.cltbld.20141208.035628
FW-Date         Mon Dec  8 03:56:38 EST 2014
Bootloader      L1TC00011880
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.