fix(web): fixes key-cap font scaling when very small text is required #11207

jahorton · 2024-04-11T03:28:48Z

It turns out that mobile-device browsers like to apply a minimum to font-size specs based on relative-style font scaling. Chrome will also threshold fixed-size font scaling within WebViews unless told otherwise. This tends to make larger key caps scale improperly on the keyboard, so to get a clean render, the easiest way forward on our end is to use font-size specs that the mobile WebViews will actually listen to.

User Testing

TEST_IPHONE_APP: Using Keyman within the Keyman app on a narrow iOS phone, verify that the default display-name for Khmer Angkor does not overrun the spacebar's area.
- If other keys' text size seems unusual compared to normal, FAIL this test. They should be the same size as usual.
TEST_ANDROID_APP: Using Keyman within the Keyman app on a narrow Android phone, verify that the default display-name for Khmer Angkor does not overrun the spacebar's area.
- If other keys' text size seems unusual compared to normal, FAIL this test. They should be the same size as usual.
TEST_IPHONE_STANDALONE: Using KeymanWeb via the "Test page for automatic key-cap scaling" on a narrow iOS phone, verify that each key's text is properly scaled, not overrunning its key's boundaries.
- The two keys between g and l have the following key-cap text: ሴሴሴሴሴ
TEST_ANDROID_STANDALONE: Using KeymanWeb via the "Test page for automatic key-cap scaling" on a narrow Android phone, verify that each key's text is properly scaled, not overrunning its key's boundaries.
- The two keys between g and l have the following key-cap text: ሴሴሴሴሴ

…#11203)

keymanapp-test-bot · 2024-04-11T03:28:53Z

User Test Results

Test specification and instructions

✅ TEST_IPHONE_APP (PASSED): Tested with the attached PR build (Keyman 17.0.305-beta-test-11207) on an iPhone 13 Mobile device and here is my observation: 1. Downloaded and installed Khmer Angkor keyboard. 2. Switched to Khmer Angkor keyboard. Verified that the default display-name for Khmer Angkor keyboard appears correctly on the spacebar area. Seems to be working fine. (notes)
✅ TEST_ANDROID_APP (PASSED): Tested with the attached PR build (Keyman 17.0.305-beta-test-11207) on an Android 13 Mobile device and here is my observation: 1. Downloaded and installed Khmer Angkor keyboard. 2. Switched to Khmer Angkor keyboard. Verified that the default display-name for Khmer Angkor keyboard appears correctly on the spacebar area. Seems to be working fine.
🟥 TEST_IPHONE_STANDALONE (FAILED): 1. Opened the 'Test page for automatic key-cap scaling' on a narrow iOS phone. 2. Noticed that the key-cap text ሴሴሴሴሴ is not properly scaled and they are overrunning its key boundaries. 3. Tested in both Chrome and Safari browsers and observed the same result. (notes)
✅ TEST_ANDROID_STANDALONE (PASSED): 1. Opened the 'Test page for automatic key-cap scaling' on an Android 13 Mobile phone. 2. Verified that the key-cap text ሴሴሴሴሴ is appeared correctly on the keyboard. (notes)

Retesting Template

@keymanapp-test-bot retest TEST_IPHONE_STANDALONE

jahorton · 2024-04-11T03:29:18Z

android/KMEA/app/src/main/java/com/keyman/engine/KMKeyboard.java

@@ -229,7 +229,7 @@ public void initKMKeyboard(final Context context) {

    getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    getSettings().setSupportZoom(false);
-
+    getSettings().setMinimumFontSize(4);


We could go as low as 1 (as in, 1px), but that might become too unreadable.

Can we add the units (px?) in a comment?

How come iOS doesn't need this change?

Re point 2... good question. I guess it's a matter of the decisions by the devs of each browser? I documented my investigation and its results on the base issue.

Point 1 - sure, why not?

jahorton · 2024-04-11T03:33:07Z

I do consider this to be a somewhat debatable fix. Here's what the results of TEST_IPHONE_STANDALONE look like on my personal iPhone SE 2 (via local build):

I scaled the image down from its original resolution to better approximate the actual size when on the physical device. Even then, this image appears, to me, notably larger than my actual phone.

We're talking about forcing some small key-caps here.

bharanidharanj · 2024-04-12T07:06:18Z

Test Results

TEST_IPHONE_APP (PASSED): Tested with the attached PR build (Keyman 17.0.305-beta-test-11207) on an iPhone 13 Mobile device and here is my observation: 1. Downloaded and installed Khmer Angkor keyboard. 2. Switched to Khmer Angkor keyboard. Verified that the default display-name for Khmer Angkor keyboard appears correctly on the spacebar area. Seems to be working fine.

..Khmer_Angkor Caption in spacebar

TEST_IPHONE_STANDALONE (FAILED): 1. Opened the 'Test page for automatic key-cap scaling' on a narrow iOS phone. 2. Noticed that the key-cap text ሴሴሴሴሴ is not properly scaled and they are overrunning its key boundaries. 3. Tested in both Chrome and Safari browsers and observed the same result.

..in Chrome browser

..in Safari browser

bharanidharanj · 2024-04-12T08:15:07Z

Test Results

TEST_ANDROID_APP (PASSED): Tested with the attached PR build (Keyman 17.0.305-beta-test-11207) on an Android 13 Mobile device and here is my observation: 1. Downloaded and installed Khmer Angkor keyboard. 2. Switched to Khmer Angkor keyboard. Verified that the default display-name for Khmer Angkor keyboard appears correctly on the spacebar area. Seems to be working fine.
TEST_ANDROID_STANDALONE (PASSED): 1. Opened the 'Test page for automatic key-cap scaling' on an Android 13 Mobile phone. 2. Verified that the key-cap text ሴሴሴሴሴ is appeared correctly on the keyboard.

mcdurdin · 2024-04-13T03:56:43Z

I do consider this to be a somewhat debatable fix.

Agreed, I feel like this is not addressing the actual problem, which is that there is too much text to fit on the key cap. So, we need to shorten the spacebar text, and encourage keyboard designers to avoid putting too much text on a key. Scaling to something unreadable doesn't really help anyone.

jahorton · 2024-04-13T16:40:27Z

For the space bar caption, isn't the language name automatically sourced? Like, from the Ethnologue or similar?

If so, that part is out of keyboard designers' hands and may need its own, additional look.

mcdurdin · 2024-04-17T05:58:50Z

For the space bar caption, isn't the language name automatically sourced? Like, from the Ethnologue or similar?

If so, that part is out of keyboard designers' hands and may need its own, additional look.

Yes, if I wasn't clear in my previous comment, I see two actions:

Shorten spacebar text
Encourage keyboard devs to use short keycap labels

jahorton · 2024-04-17T08:18:23Z

I do consider this to be a somewhat debatable fix.

Agreed, I feel like this is not addressing the actual problem, which is that there is too much text to fit on the key cap. So, we need to shorten the spacebar text, and encourage keyboard designers to avoid putting too much text on a key. Scaling to something unreadable doesn't really help anyone.

So, do we close this PR, or go ahead with its changes? I don't we should go any further than this within the OSK, but the spacebar-captioning aspect is already affecting real keyboards.

As for the previously-shown screenshot...

Yeah, those key-caps were only ever intended to act as extremes. We definitely shouldn't encourage use of key caps like that. The spacebar caption text? That's accomplished via the keyboard's stub, which corresponds to the keyboard and language names baked into the KMP within the mobile apps. For khmer_angkor, the offender is the language name...

Huh, so we can actually edit it there... in which case a warning about "hey, that's a long language name" also becomes possible. Though... the threshold may need to vary per keyboard - Amharic doesn't exactly leave its spacebar much room.

Yeah, language + keyboard name isn't going to fit well on that narrow fellow.

mcdurdin · 2024-04-17T08:21:34Z

So, do we close this PR, or go ahead with its changes?

I think we abandon this PR. Spacebar text length is a longstanding issue which we need to do more design work on (see also #10699). v18.

fix(web): fixes key-cap font scaling when very small text is required (…

95ac01c

…#11203)

jahorton added this to the B17S5 milestone Apr 11, 2024

jahorton requested review from ermshiperete, darcywong00 and sgschantz as code owners April 11, 2024 03:28

keymanapp-test-bot bot added has-user-test user-test-required User tests have not been completed labels Apr 11, 2024

github-actions bot added web/ android/ android/engine/ fix labels Apr 11, 2024

jahorton commented Apr 11, 2024

View reviewed changes

jahorton requested a review from mcdurdin April 11, 2024 03:33

jahorton linked an issue Apr 11, 2024 that may be closed by this pull request

bug(web): the in-app Khmer Angkor caption name doesn't fit on the OSK's Spacebar on mobile devices #11203

Open

8 tasks

ermshiperete approved these changes Apr 11, 2024

View reviewed changes

Base automatically changed from feat/web/vkbd-layout-optimization to beta April 12, 2024 00:49

darcywong00 modified the milestones: B17S5, B17S6 Apr 12, 2024

keymanapp-test-bot bot added the user-test-failed label Apr 12, 2024

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Apr 12, 2024

jahorton mentioned this pull request Apr 17, 2024

bug(web): the in-app Khmer Angkor caption name doesn't fit on the OSK's Spacebar on mobile devices #11203

Open

8 tasks

jahorton closed this Apr 17, 2024

jahorton deleted the fix/web/extreme-keycap-scaling branch April 17, 2024 08:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): fixes key-cap font scaling when very small text is required #11207

fix(web): fixes key-cap font scaling when very small text is required #11207

jahorton commented Apr 11, 2024 •

edited

Loading

keymanapp-test-bot bot commented Apr 11, 2024 •

edited

Loading

jahorton Apr 11, 2024

darcywong00 Apr 11, 2024

jahorton Apr 11, 2024

jahorton commented Apr 11, 2024 •

edited

Loading

bharanidharanj commented Apr 12, 2024

bharanidharanj commented Apr 12, 2024

mcdurdin commented Apr 13, 2024

jahorton commented Apr 13, 2024

mcdurdin commented Apr 17, 2024

jahorton commented Apr 17, 2024

mcdurdin commented Apr 17, 2024

fix(web): fixes key-cap font scaling when very small text is required #11207

fix(web): fixes key-cap font scaling when very small text is required #11207

Conversation

jahorton commented Apr 11, 2024 • edited Loading

User Testing

keymanapp-test-bot bot commented Apr 11, 2024 • edited Loading

User Test Results

jahorton Apr 11, 2024

Choose a reason for hiding this comment

darcywong00 Apr 11, 2024

Choose a reason for hiding this comment

jahorton Apr 11, 2024

Choose a reason for hiding this comment

jahorton commented Apr 11, 2024 • edited Loading

bharanidharanj commented Apr 12, 2024

Test Results

bharanidharanj commented Apr 12, 2024

Test Results

mcdurdin commented Apr 13, 2024

jahorton commented Apr 13, 2024

mcdurdin commented Apr 17, 2024

jahorton commented Apr 17, 2024

mcdurdin commented Apr 17, 2024

jahorton commented Apr 11, 2024 •

edited

Loading

keymanapp-test-bot bot commented Apr 11, 2024 •

edited

Loading

jahorton commented Apr 11, 2024 •

edited

Loading