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

RESOLVED FIXED

Status

Firefox OS
Gaia::Keyboard
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: djabber, Assigned: djf)

Tracking

unspecified
x86
Mac OS X

Firefox Tracking Flags

(blocking-b2g:leo+, b2g18 verified, b2g-v1.1hd fixed)

Details

Attachments

(3 attachments, 3 obsolete attachments)

(Reporter)

Description

5 years ago
Created attachment 764449 [details]
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.
(Reporter)

Comment 1

5 years ago
Nominating for Leo+ as bug #882080 has been deferred for Koi+. This is a simpler fix that will still dramatically improve the visual design.
blocking-b2g: --- → leo?
(Assignee)

Updated

5 years ago
Assignee: nobody → dflanagan

Comment 2

5 years ago
Hi David,

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

Comment 3

5 years ago
(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.
(Assignee)

Comment 4

5 years ago
Created attachment 766010 [details]
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.
Attachment #766010 - Flags: feedback?(pla)
Attachment #766010 - Flags: feedback?(fdjabri)
(Reporter)

Comment 5

5 years ago
Thanks David, that works for me. Any thoughts, Peter?
(Assignee)

Comment 6

5 years ago
Created attachment 766019 [details]
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.
(Assignee)

Comment 7

5 years ago
Created attachment 766024 [details]
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

5 years ago
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].

Updated

5 years ago
Attachment #766010 - Flags: feedback?(pla) → feedback+
(Reporter)

Updated

5 years ago
Attachment #766024 - Flags: feedback+
(Assignee)

Comment 9

5 years ago
Created attachment 766045 [details]
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.
Attachment #766010 - Attachment is obsolete: true
Attachment #766019 - Attachment is obsolete: true
Attachment #766024 - Attachment is obsolete: true
Attachment #766010 - Flags: feedback?(fdjabri)
(Assignee)

Comment 10

5 years ago
Created attachment 766050 [details]
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.
Attachment #766050 - Flags: review?(rlu)
(Assignee)

Comment 11

5 years ago
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.

Updated

5 years ago
blocking-b2g: leo? → leo+
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.
Attachment #766050 - Flags: review?(rlu) → review+
(Assignee)

Comment 13

5 years ago
Landed on master: https://github.com/mozilla-b2g/gaia/commit/520d9975ca8b7c6023818343d71c4cb149d0685f
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Assignee)

Comment 14

5 years ago
Uplifted to v1-train: https://github.com/mozilla-b2g/gaia/commit/a2cc81877cec15f184b66efc58409b9ebdba6059
status-b2g18: --- → fixed
status-b2g-v1.1hd: --- → affected
1.1hd: a2cc81877cec15f184b66efc58409b9ebdba6059
status-b2g-v1.1hd: affected → fixed

Comment 16

5 years ago
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.
status-b2g18: fixed → verified
You need to log in before you can comment on or make changes to this bug.