Closed
Bug 1023817
Opened 7 years ago
Closed 7 years ago
[vertical] Several app names are truncated because of font-size
Categories
(Firefox OS Graveyard :: Gaia::Homescreen, defect)
Firefox OS Graveyard
Gaia::Homescreen
Tracking
(blocking-b2g:2.0+, b2g-v2.0 verified, b2g-v2.1 verified)
People
(Reporter: flod, Assigned: kgrandon)
References
Details
(Whiteboard: [systemsfe])
Attachments
(9 files)
338.46 KB,
image/png
|
Details | |
306.35 KB,
image/png
|
Details | |
46 bytes,
text/x-github-pull-request
|
kgrandon
:
review+
flod
:
feedback+
|
Details | Review |
300.40 KB,
image/png
|
Details | |
352.93 KB,
application/zip
|
Details | |
368.83 KB,
image/png
|
Details | |
162.86 KB,
image/png
|
Details | |
180.54 KB,
image/png
|
Details | |
155.84 KB,
image/png
|
Details |
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
Reporter | ||
Comment 1•7 years ago
|
||
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•7 years ago
|
||
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•7 years ago
|
||
Peter, any spec to see how this should be truncated? 10x
Flags: needinfo?(pla)
Reporter | ||
Comment 4•7 years ago
|
||
For comparison, Italian on 1.4, since English doesn't have any truncations.
Comment 5•7 years ago
|
||
Comment on attachment 8438372 [details]
Comparison
We have a similar behavior with french locale too, for instance with Settings.
Flags: needinfo?(tchevalier)
Comment 6•7 years ago
|
||
UX - I'm imagining this is probably a VD blocker for the release, right?
Flags: needinfo?(firefoxos-ux-bugzilla)
Comment 7•7 years ago
|
||
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)
Comment 8•7 years ago
|
||
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•7 years ago
|
||
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)
Assignee | ||
Comment 10•7 years ago
|
||
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.
Updated•7 years ago
|
Blocks: vertical-homescreen
QA Whiteboard: [VH-FC-blocking?]
Comment 11•7 years ago
|
||
Delphine - Can you also weigh in if this is a blocker for l10n?
Flags: needinfo?(lebedel.delphine)
Comment 12•7 years ago
|
||
Yes absolutely, should be considered as a blocker for l10n thanks
Flags: needinfo?(lebedel.delphine)
Updated•7 years ago
|
blocking-b2g: --- → 2.0?
QA Whiteboard: [VH-FC-blocking?] → [VH-FC-blocking+]
Flags: needinfo?(firefoxos-ux-bugzilla)
Updated•7 years ago
|
Whiteboard: [systemsfe]
Reporter | ||
Comment 13•7 years ago
|
||
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•7 years ago
|
||
(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)
Comment 15•7 years ago
|
||
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)
Assignee | ||
Comment 16•7 years ago
|
||
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)
Reporter | ||
Comment 17•7 years ago
|
||
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.
Assignee | ||
Comment 18•7 years ago
|
||
(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
Comment 19•7 years ago
|
||
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.
Assignee | ||
Comment 20•7 years ago
|
||
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)
Reporter | ||
Comment 21•7 years ago
|
||
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+
Reporter | ||
Comment 22•7 years ago
|
||
Current left, patched right.
Comment 23•7 years ago
|
||
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!
Assignee | ||
Comment 24•7 years ago
|
||
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.
Assignee | ||
Comment 25•7 years ago
|
||
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+
Assignee | ||
Comment 26•7 years ago
|
||
Landed: https://github.com/mozilla-b2g/gaia/commit/5f3d2edc8fc9c69c995975164f97f81d360f5d7b
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Updated•7 years ago
|
blocking-b2g: 2.0? → 2.0+
Comment 27•7 years ago
|
||
v2.0: https://github.com/mozilla-b2g/gaia/commit/3d94dbd96af6d3524f88f87c5419a0965b51e7d4
Comment 28•6 years ago
|
||
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•6 years ago
|
||
Comment 30•6 years ago
|
||
Comment 31•6 years ago
|
||
Comment 32•6 years ago
|
||
You need to log in
before you can comment on or make changes to this bug.
Description
•