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

Status: VERIFIED FIXED

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

Description

[Francesco Lodolo [:flod]]

Attachment: 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

Comment 1

[Francesco Lodolo [:flod]]

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

Comment 2

[Cristian Rodriguez (:crdlc)]

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)

Comment 3

[Cristian Rodriguez (:crdlc)]

Peter, any spec to see how this should be truncated? 10x

Comment 4

[Francesco Lodolo [:flod]]

Attachment: Italian on 1.4

For comparison, Italian on 1.4, since English doesn't have any truncations.

Comment 5

[Alexandre LISSY :gerard-majax]

Comment on attachment 8438372 [details]
Comparison

We have a similar behavior with french locale too, for instance with Settings.

Comment 6

[Jason Smith [:jsmith]]

UX - I'm imagining this is probably a VD blocker for the release, right?

Comment 7

[Stephany Wilkes]

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.

Comment 8

[Stephany Wilkes]

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.

Comment 9

[Théo Chevalier [:tchevalier]]

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?

Comment 10

[Kevin Grandon :kgrandon]

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.

Comment 11

[Jason Smith [:jsmith]]

Delphine - Can you also weigh in if this is a blocker for l10n?

Comment 12

[Delphine Lebédel [:delphine - use need info]]

Yes absolutely, should be considered as a blocker for l10n
thanks

Comment 13

[Francesco Lodolo [:flod]]

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.

Comment 14

[Eric Pang [:epang] UX]

(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!

Comment 15

[Hung Nguyen]

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

Comment 16

[Kevin Grandon :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.

Comment 17

[Francesco Lodolo [:flod]]

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.

Comment 18

[Kevin Grandon :kgrandon]

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

Comment 19

[Hung Nguyen]

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.

Comment 20

[Kevin Grandon :kgrandon]

Attachment: 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.

Comment 21

[Francesco Lodolo [:flod]]

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

Comment 22

[Francesco Lodolo [:flod]]

Attachment: Comparison patched

Current left, patched right.

Comment 23

[Hung Nguyen]

Attachment: 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!

Comment 24

[Kevin Grandon :kgrandon]

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 25

[Kevin Grandon :kgrandon]

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.

Comment 26

[Kevin Grandon :kgrandon]

Landed: https://github.com/mozilla-b2g/gaia/commit/5f3d2edc8fc9c69c995975164f97f81d360f5d7b

Comment 27

[Ryan VanderMeulen [:RyanVM]]

v2.0: https://github.com/mozilla-b2g/gaia/commit/3d94dbd96af6d3524f88f87c5419a0965b51e7d4

Comment 28

[Shally Li（leave from Mozilla）]

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

Comment 29

[Shally Li（leave from Mozilla）]

Attachment: v2.1_English_1.png

Comment 30

[Shally Li（leave from Mozilla）]

Attachment: v2.1_English_2.png

Comment 31

[Shally Li（leave from Mozilla）]

Attachment: v2.1_Italian_1.png

Comment 32

[Shally Li（leave from Mozilla）]

Attachment: v2.1_Italian_2.png