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.
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?
Hi David, Let's go with a smallest text size of 5pt for now (as shown in Francis' mockup).
(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.
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.
Thanks David, that works for me. Any thoughts, Peter?
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.
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?
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].
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.
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)
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 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+
Landed on master: https://github.com/mozilla-b2g/gaia/commit/520d9975ca8b7c6023818343d71c4cb149d0685f
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Uplifted to v1-train: https://github.com/mozilla-b2g/gaia/commit/a2cc81877cec15f184b66efc58409b9ebdba6059
status-b2g18: --- → fixed
status-b2g-v1.1hd: --- → affected
status-b2g-v1.1hd: affected → fixed
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.