796554 - [settings] Needs a way to display the text when it's too long

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[GH to BZ]

[GitHub issue by johnshih on 2012-08-28T03:25:52Z, https://github.com/mozilla-b2g/gaia/issues/3948]
Such as in Storage,  The text "USB Mass Storage Enable" is too long so it just display
"USB Mass Storage E..." which will make little confusion to users
There are some way:
 1. Use the way like About Phone -> Git commit info did, the git revision is display as description in little size
 2. Display in multiple line when the text is too long
 3. Change the text to short one 

## Environment :
Otoro-ics 08-27 Daily Build
* "gaia" revision= a20b169471345125092e91f981581dccd23e3371
* "gecko" revision= 1bf80bf946010db2810996225e143a3c50cede36

Comment 1

[GH to BZ]

[GitHub comment by johnshih on 2012-09-05T07:16:48Z]
See also #3345

Comment 2

[GH to BZ]

[GitHub comment by autonome on 2012-09-17T15:53:00Z]
@jcarpenter we need a broad solution for showing truncated text somehow. For Settings this is extremely important, so blocking.

Comment 3

[GH to BZ]

[GitHub comment by vingtetun on 2012-09-17T15:54:07Z]
The translation should be revised imo. And otherwise there are some nice CSS features for that.

Comment 4

[GH to BZ]

[GitHub comment by jcarpenter on 2012-09-17T20:48:21Z]
> The translation should be revised imo. And otherwise there are some nice CSS features for that.

Agreed. An easy fix here is to select a shorter string. Let's remove "Enable" from the string. Enabled / disabled is what the toggle button indicates.

FWIW, I notice on my device that the text truncation starts probably 10-2px earlier than it needs to. We might be able to fit a few more characters in. 

> @jcarpenter we need a broad solution for showing truncated text somehow. For Settings this is extremely important, so blocking.
 
As per Vivien, we will auto truncate with CSS (I believe that may already be happening in this issue?). I prefer truncation to wrapping onto two lines.

Comment 5

[GH to BZ]

[GitHub comment by jcarpenter on 2012-09-17T20:54:42Z]
@lco for input on this one.

Comment 6

[GH to BZ]

[GitHub comment by jcarpenter on 2012-09-17T20:56:09Z]
Also, please refer to Larissa's "Device" Settings specs (R1_Device_v2.pdf):

https://www.dropbox.com/sh/el3xlen61gpalm6/sRI42swg-2/Settings

We appear to be far from having them implemented. Who is the dev on this section? @autonome

Comment 7

[GH to BZ]

[GitHub comment by vingtetun on 2012-09-18T10:25:51Z]
@jcarpenter Due to the large amount of work needed on settings there are 4 devs now: @fabi1cazenave  @evelynhung @RudyLu @alivedise 

Also is Larissa UX the final visuals ?

Comment 8

[GH to BZ]

[GitHub comment by lco on 2012-09-18T17:24:57Z]
@vingtetun nope, I'm not doing visuals :) that would be @patrykdesign , although most of Settings should be building blocks.

Comment 9

[GH to BZ]

[GitHub comment by lco on 2012-09-18T17:26:58Z]
In terms of truncation guidelines, here are a few I came up with. Let me know if this is reasonable.

0. Avoid truncation if you can!
 * It is far better to condense text than to truncate.
 * If any text is particularly tricky to condense, please flag for UI to take a look at.
1. Don't truncate labels for buttons, headers, and other text related to user options
 * Instead, try to condense the text or use two lines if this isn't possible.
2. Strings related to network names, or any long list of choices can be truncated at the end if necessary.
 * This includes Wi-Fi, Bluetooth, Phone network names, and potentially even some of the lists involving country / region names.
 * To truncate, add an ellipsis (...) to the end of the string.

Comment 10

[GH to BZ]

[GitHub comment by jcarpenter on 2012-09-19T03:16:17Z]
> In terms of truncation guidelines, here are a few I came up with. Let me know if this is reasonable.

Very reasonable :) Sounds good to me. We should capture this policy for building blocks. @sergivila

Comment 11

[GH to BZ]

[GitHub comment by sergivila on 2012-09-19T11:49:39Z]
I completely agree that is better to condense text whenever it's possible, but we can not control every single case for every language. English is a really condensed language, in a way, but others like Spanish, Portuguese or German are far more difficult to control. 

I think in some cases is more complex. For example point 2, where you suggest to use 2 lines instead of truncating the text. In the case of contacts list, for example, if the name is too long (for example here in Spain we have 2 surnames), and we add 2 lines, the layout is screwed up. I'd better recommend to use truncation here than splitting the name in 2 lines.

Anyway, will take this in consideration. We can also review this in a case by case basis if needed.

Comment 12

[GH to BZ]

[GitHub comment by patrykdesign on 2012-09-19T15:35:16Z]
@vingtetun yes the visuals are final but we couldn't cover every screen, so if you have any questions, please contact me (back from vacation now)

@lco @jcarpenter We should not have ellipsis in our launch product with our default language, if that's the case we'll need to rephrase / re-layout those instances. 

As far as ellipsis rules go... I'd truncate mid phrase and keep the last word(s) as in many cases the beginning and the end of the phrase are the most important. So in this specific case it would read as  "USB Mass St... Enable"

Comment 13

[GH to BZ]

[GitHub comment by autonome on 2012-09-25T05:58:34Z]
So, what needs to happen here? specific targeted fixes? a sytem-wide text wrapper?

Comment 14

[GH to BZ]

[GitHub comment by fabi1cazenave on 2012-09-25T06:06:30Z]
@pivanov could you propose some CSS improvements to ensure the `<li>` contents are properly trimmed?

There’s already an “ellipsis” style rule but it’s not calculated properly, and it’s not applied to every `<li>` content. Your skills would be appreciated here.

Comment 15

[GH to BZ]

[GitHub comment by lco on 2012-09-26T22:51:10Z]
@sergivila: names, in my opinion, fall into rule#3 because they don't have to do with interface text (which is what I really meant by rule #2.)

In Firefox, we also have a style where we truncate website URLs in the middle. The argument being that the last bit of the path might be more recognizable to the user. Perhaps there are other cases in the UI where this is relevant.

Comment 16

[GH to BZ]

[GitHub comment by pivanov on 2012-09-30T09:14:53Z]
contents are properly trimmed now #5339

Comment 17

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

@bajaj what is the QA wanted for?  Could you please specify?

Comment 18

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: Add ellipsis to child elements inside list item

Comment 19

[Fabien Cazenave [:kaze]]

@nhirata @bajaj can we close this bug now?

Comment 20

[John Shih]

Since there has been much modification in settings app
I think we can close this bug now

Comment 21

[John Shih]

Build info
gaia : 98498cb5803349b50637dc35640fc2235fee0499
mozilla-central : 91fa3edfba8f778edd2119cd334854cdeac456bc

Comment 22

[[e-mail] [:onecyrenus]]

 already fixed/verified.

Comment 23

[John Shih]

The string in the Settings -> Media storage -> Advanced
now is too long, 
I think this is a regression
reopen this and assign to evelyn

Comment 24

[John Shih]

closing, move to bug 823861