884609 - Visual Design improvements: Shrink text to fit in auto-correct suggestion bar

Status: RESOLVED FIXED

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

Description

[Francis Djabri [:djabber]]

Attachment: Shrink text to fit

Following from bug #873223, when auto-correct suggestions become larger than able to fit within the designated, shrink the text to fit by reducing the font size rather than compressing it.

Comment 1

[Francis Djabri [:djabber]]

Nominating for Leo+ as bug #882080 has been deferred for Koi+. This is a simpler fix that will still dramatically improve the visual design.

Comment 2

[Peter La]

Hi David,

Let's go with a smallest text size of 5pt for now (as shown in Francis' mockup).

Comment 3

[David Flanagan [:djf]]

(In reply to Peter La from comment #2)
> Hi David,
> 
> Let's go with a smallest text size of 5pt for now (as shown in Francis'
> mockup).

Peter: For words longer that 'compartmentalize' what do you want me to do instead of shrinking the font further?  Android inserts "..." in the middle of the word to keep its size manageable.  I could also display only 2 choices instead of 3, I suppose.

Also, I don't control the font size explicitly: I start with a 24px font, and then shrink it as needed to fit with a CSS transform.  So I'm not using discrete point size steps here.  But I can put a lower bound of about 5pt on it, I think.

Comment 4

[David Flanagan [:djf]]

Attachment: small font and ellipsis to make long words fit

Here's what long words look like with my patch. I allow the font to scale down to half size, and if it gets any smaller than that, I add an ellipsis in the middle of the word, removing as many characters as needed until it fits.

Comment 5

[Francis Djabri [:djabber]]

Thanks David, that works for me. Any thoughts, Peter?

Comment 6

[David Flanagan [:djf]]

Attachment: a better version of the screenshot

I've changed my patch a bit, so that scaling is done in increments. Text is either full-size, or 90%, 80%, 70%, 60% or 50% of full size.  So when suggestions are about the same length, they'll generally appear in about the same font size. We don't get one word at 61% and another at 64%: they all round down to 60%.

Francis and Peter: this is the screenshot to look at, not the previous one.

Comment 7

[David Flanagan [:djf]]

Attachment: same thing with a 60% minimum size

This version of the screenshot is like the last one but I only allow 100%, 90%, 80%, 70% and 60%. If the scaling would require a font smaller than 60%, I replace characters with ...  So we've got a bigger font here, but more characters are missing from the words.

Peter: which do you like better, this one or the previous screenshot?

Comment 8

[Peter La]

I spoke with David on IRC and we decided on starting and minimum size of text based on this document: https://docs.google.com/spreadsheet/ccc?key=0Ari8z5WN5YqndFJQOHpIMjZyQzFkejYxcW9jRUtLY2c#gid=0

Starting size: 10pt (2.3rem) 'Body Large'
Minimum size: 6pt (1.4rem) 'Body Mini'

This minimum size is shown in attachment 766024 [details].

Comment 9

[David Flanagan [:djf]]

Attachment: final screenshot, after discussion with Peter

This version reduces the base size from 24px to 23px and then shrinks down to 60% of that. It seems like a perfect compromise between the last two screenshots.  This version starts off with a Body Large font and uses scaling to mimic Body, Body Medium, Body Small and Body Mini font sizes so that auto-correct text matches the text elsewhere in Gaia.

Comment 10

[David Flanagan [:djf]]

Attachment: link to patch on github

Rudy,

This patch changes the base font size for autocorrect, and then changes the way the font is scaled so that it is reduced in both dimensions and not just condensed in width.  Also, it restricts the allowed set of scales to match the allowed set of font sizes.  I have Peter La's approval via IRC for the visual design, so just need a technical review now.

Comment 11

[David Flanagan [:djf]]

Triage: this bug should be Leo+ because I landed auto-correct to v1-train without getting approval from the visual design team. If we don't uplift this patch, the visual designers will want to uplift a different patch to disable auto-correct by default.

Comment 12

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 766050 [details]
link to patch on github

Hi David,

r=me, except for the naming for function getScale(). 
All looks good.
Thanks for your great work.

--
Please ignore my comment (should have been deleted) about the rationale of font scaling, I have found that explained clearly in the previous comments.

Comment 13

[David Flanagan [:djf]]

Landed on master: https://github.com/mozilla-b2g/gaia/commit/520d9975ca8b7c6023818343d71c4cb149d0685f

Comment 14

[David Flanagan [:djf]]

Uplifted to v1-train: https://github.com/mozilla-b2g/gaia/commit/a2cc81877cec15f184b66efc58409b9ebdba6059

Comment 15

[John Ford [:jhford] CET/CEST Berlin Time]

1.1hd: a2cc81877cec15f184b66efc58409b9ebdba6059

Comment 16

[dkumar]

Varified, fixed on Leo Mozilla RIL.
Environmental Variables
Build ID: 20130716070204
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/629020cf576b
Gaia: fb9362d34260771d4a00b9a0e10a6bbad397bd3b
Platform Version: 18.1
RIL Version: 01.01.00.019.158

The results are produced as per the second screenshot.