Merge remote-tracking branch 'origin/beta' into fix/android/long-context

HISTORY.md

@@ -1,5 +1,10 @@
 # Keyman Version History
 
+## 17.0.306 beta 2024-04-11
+
+* docs(ios): updates iOS app help for 17.0 banner changes (#11200)
+* chore(oem/fv): Add fv sguuxs and update keyboard versions (#11198)
+
 ## 17.0.305 beta 2024-04-10
 
 *  (#11169)

VERSION.md

@@ -1 +1 @@
-17.0.306
+17.0.307

ios/help/basic/config/index.md

@@ -26,17 +26,6 @@ screen where you may view the languages you have installed and, by clicking any
 
 Click on this to [search for a keyboard or language](../../start/searching-for-keyboards).
 
-## Show Banner
-This adds a banner to the top of the keyboard to allow space for pop-up keys to render above the top row of keys.
-
-![](../../ios_images/banner.png)
-
-When this is off,
-
-![](../../ios_images/no-banner.png)
-
-pop-up keys in the top row render horizontally.
-
 ## Show "Get Started" on startup
 When enabled, the Keyman app will display the 'Get Started' screen on app startup.
 

ios/help/basic/index.md

@@ -1,6 +1,7 @@
 ---
 title: Basic Help
 ---
+* [Using the Banner on the Keyboard](using-the-banner)
 
 * [Switching Between Keyboards](switching-between-keyboards)
 

ios/help/basic/keyboard-usage.md

@@ -22,5 +22,7 @@ The Gestures:
 
 * **Flick:** hold and slide in various directions on a key to reach alternate outputs. The key will animate to show you the expected output. For example, a keyboard could support sliding down on keys in the top row to output numerals.
 
+![](../ios_images/down-flick-i.gif)
+
 * **Multitap:** some keys produce alternate outputs with rapid, repeated taps. For example, tapping rapidly twice on <kbd>shift</kbd> will activate <kbd>caps lock</kbd> on many keyboards.
 

ios/help/basic/using-the-banner.md

@@ -0,0 +1,29 @@
+---
+title: Using the Banner on the Keyboard - Keyman for iPhone and iPad Help
+---
+
+## About the Keyboard Banner
+
+Keyman keyboards now always display a banner above the keyboard for one of the following functionalities:
+
+* Display suggestions (See "Using the Suggestion Banner" below)
+* Display a Keyman-themed banner so popups and gestures for the top row of keys are visible
+* Reserved for future functionality
+
+## Using the Suggestion Banner
+
+If a [dictionary is installed](installing-custom-keyboards-dictionaries) and enabled for the active Keyman
+keyboard, the banner will display suggestions that can be selected.
+
+![](../ios_images/settings-suggestions-i.png)
+
+* Drag the banner horizontally to see more suggestions
+* Overly-long suggestions are partially hidden, but expand when a finger is held on them
+* The banner will display up to 8 suggestions at a time.
+
+## The Keyman-Themed Banner
+
+When suggestions are disabled or unavailable, the Keyman-themed banner will display instead.
+This is displayed so that key-popups and gestures for the top row of keys are visible.
+
+![](../ios_images/themed-banner.png)

ios/help/index.md

@@ -15,6 +15,7 @@ title: Keyman for iPhone and iPad 17.0 Help
 
 
 ## [Using Keyman for iPhone and iPad](basic/)
+* [Using the Banner on the Keyboard](basic/using-the-banner)
 * [Switching Between Keyboards](basic/switching-between-keyboards)
 * [Using a Keyboard](basic/keyboard-usage)
 * [Using the Menu](context/)

oem/firstvoices/keyboards.csv

@@ -11,11 +11,11 @@ fv,fv_uwikala,'Uwik̓ala,BC Coast,fv_uwikala_kmw-9.0.js,9.3,hei,Heiltsuk
 fv,fv_dexwlesucid,Dəxʷləšucid,BC Coast,fv_dexwlesucid_kmw-9.0.js,9.2.1,lut-Latn,Lushootseed (Latin)
 fv,fv_diitiidatx,Diidiitidq,BC Coast,fv_diitiidatx_kmw-9.0.js,9.1.3,nuk-Latn,Nuu-chah-nulth (Latin)
 fv,fv_gitsenimx,Gitsenimx̱,BC Coast,fv_gitsenimx_kmw-9.0.js,10.0.1,git,Gitxsan (Latin)
-fv,fv_hailzaqvla,Haiɫzaqvla,BC Coast,fv_hailzaqvla_kmw-9.0.js,9.5,hei,Heiltsuk (Latin)
-fv,fv_haisla,Haisla,BC Coast,fv_haisla.js,1.0,has-Latn,Haisla (Latin)
+fv,fv_hailzaqvla,Haiɫzaqvla,BC Coast,fv_hailzaqvla_kmw-9.0.js,9.5.1,hei,Heiltsuk (Latin)
+fv,fv_haisla,Haisla,BC Coast,fv_haisla.js,2.0.1,has-Latn,Haisla (Latin)
 fv,fv_halqemeylem,Halq'eméylem,BC Coast,fv_halqemeylem_kmw-9.0.js,9.1.3,hur-Latn,Halkomelem (Latin)
-fv,fv_henqeminem,Hǝn̓q̓ǝmin̓ǝm,BC Coast,fv_henqeminem_kmw-9.0.js,9.1.3,hur-Latn,Halkomelem (Latin)
-fv,fv_klahoose,Homalco-Klahoose-Sliammon,BC Coast,fv_klahoose_kmw-9.0.js,10.0,coo,Comox
+fv,fv_henqeminem,Hǝn̓q̓ǝmin̓ǝm,BC Coast,fv_henqeminem_kmw-9.0.js,10.0.1,hur-Latn,Halkomelem (Latin)
+fv,fv_klahoose,Homalco-Klahoose-Sliammon,BC Coast,fv_klahoose_kmw-9.0.js,10.1,coo,Comox
 fv,fv_hulquminum,Hul’q’umi’num’,BC Coast,fv_hulquminum_kmw-9.0.js,9.1,hur-Latn,Halkomelem (Latin)
 fv,fv_hulquminum_combine,Hul̓q̓umin̓um̓,BC Coast,fv_hulquminum_combine_kmw-9.0.js,1.0,hur-Latn,Halkomelem (Latin)
 fv,fv_kwakwala_liqwala,Kʷak̓ʷala,BC Coast,fv_kwakwala_liqwala_kmw-9.0.js,9.2.5,kwk-Latn,Kwakiutl (Latin)
@@ -25,8 +25,9 @@ fv,fv_nisgaa,Nisg̱a'a,BC Coast,fv_nisgaa_kmw-9.0.js,9.1.2,ncg-Latn,Nisga'a (Lat
 fv,fv_nuucaanul,Nuučaan̓uł,BC Coast,fv_nuucaanul_kmw-9.0.js,9.1.4,nuk-Latn,Nuu-chah-nulth (Latin)
 fv,fv_nuxalk,Nuxalk,BC Coast,fv_nuxalk_kmw-9.0.js,10.0,blc-Latn,Bella Coola (Latin)
 fv,fv_sencoten,SENĆOŦEN,BC Coast,fv_sencoten_kmw-9.0.js,9.2.1,str,Straits Salish
+fv,fv_sguuxs,Sgüüx̱s,BC Coast,fv_sguuxs.js,1.0,tsi,Tsimshian
 fv,fv_shashishalhem,Shashishalhem,BC Coast,fv_shashishalhem_kmw-9.0.js,9.1.3,sec-Latn,Sechelt (Latin)
-fv,fv_skwxwumesh_snichim,Sḵwx̱wúmesh sníchim,BC Coast,fv_skwxwumesh_snichim_kmw-9.0.js,9.2.1,squ-Latn,Squamish (Latin)
+fv,fv_skwxwumesh_snichim,Sḵwx̱wúmesh sníchim,BC Coast,fv_skwxwumesh_snichim_kmw-9.0.js,9.3,squ-Latn,Squamish (Latin)
 fv,fv_smalgyax,Sm'algya̱x,BC Coast,fv_smalgyax_kmw-9.0.js,9.1.3,tsi-Latn,Tsimshian (Latin)
 fv,fv_xaislakala,X̄a'ʼislak̓ala,BC Coast,fv_xaislakala_kmw-9.0.js,9.1.1,has-Latn,Haisla (Latin)
 fv,fv_hlgaagilda_xaayda_kil,X̱aayda-X̱aad Kil,BC Coast,fv_hlgaagilda_xaayda_kil_kmw-9.0.js,9.3,hax,Southern Haida
@@ -37,13 +38,13 @@ fv,fv_natwits,Nedut’en-Witsuwit'en,BC Interior,fv_natwits_kmw-9.0.js,9.1.3,caf
 fv,fv_nlekepmxcin,Nłeʔkepmxcin,BC Interior,fv_nlekepmxcin_kmw-9.0.js,9.2.3,thp-Latn,Thompson (Latin)
 fv,fv_nlha7kapmxtsin,Nlha7kapmxtsin,BC Interior,fv_nlha7kapmxtsin_kmw-9.0.js,9.1.1,thp-Latn,Thompson (Latin)
 fv,fv_nsilxcen,Nsilxcən,BC Interior,fv_nsilxcen_kmw-9.0.js,9.3,oka,Okanagan
-fv,fv_secwepemctsin,Secwepemctsín,BC Interior,fv_secwepemctsin_kmw-9.0.js,9.1.2,shs-Latn,Shuswap (Latin)
+fv,fv_secwepemctsin,Secwepemctsín,BC Interior,fv_secwepemctsin_kmw-9.0.js,9.2,shs-Latn,Shuswap (Latin)
 fv,fv_stlatlimxec,Sƛ̓aƛ̓imxəc,BC Interior,fv_stlatlimxec_kmw-9.0.js,9.2.3,lil-Latn,Lillooet (Latin)
-fv,fv_statimcets,St̓át̓imcets,BC Interior,fv_statimcets_kmw-9.0.js,9.1.3,lil-Latn,Lillooet (Latin)
+fv,fv_statimcets,St̓át̓imcets,BC Interior,fv_statimcets_kmw-9.0.js,9.1.4,lil-Latn,Lillooet (Latin)
 fv,fv_taltan,Tāłtān,BC Interior,fv_taltan_kmw-9.0.js,9.1.5,tht-Latn,Tahltan (Latin)
 fv,fv_tsekehne,Tsek'ehne,BC Interior,fv_tsekehne_kmw-9.0.js,9.1.2,sek-Latn,Sekani (Latin)
 fv,fv_tsilhqotin,Tŝilhqot'in,BC Interior,fv_tsilhqotin_kmw-9.0.js,9.1.3,clc-Latn,Chilcotin (Latin)
-fv,fv_southern_carrier,ᑐᑊᘁᗕᑋᗸ (Southern Carrier),BC Interior,fv_southern_carrier_kmw-9.0.js,9.2.1,caf-Cans,Southern Carrier (Unified Canadian Aboriginal Syllabics)
+fv,fv_southern_carrier,ᑐᑊᘁᗕᑋᗸ (Southern Carrier),BC Interior,fv_southern_carrier_kmw-9.0.js,10.0,caf-Cans,Southern Carrier (Unified Canadian Aboriginal Syllabics)
 fv,fv_anicinapemi8in,Anicinapemi8in/Anishinàbemiwin,Eastern Subarctic,fv_anicinapemi8in_kmw-9.0.js,9.1.1,alq-Latn,Algonquin (Latin)
 fv,fv_atikamekw,Atikamekw,Eastern Subarctic,fv_atikamekw_kmw-9.0.js,9.1.1,atj-Latn,Atikamekw (Latin)
 fv,fv_ilnu_innu_aimun,Ilnu-Innu Aimun,Eastern Subarctic,fv_ilnu_innu_aimun_kmw-9.0.js,9.1.1,moe-Latn,Montagnais (Latin)
@@ -69,14 +70,14 @@ fv,fv_wobanakiodwawogan,Wôbanakiôdwawôgan,Great Lakes - St. Lawrence,fv_woban
 fv,fv_australian,Australian,Pacific,fv_australian_kmw-9.0.js,9.3.1,pjt-Latn,Pitjantjatjara (Latin)
 fv,fv_maori,Māori,Pacific,fv_maori_kmw-9.0.js,9.1.1,mi-Latn,Maori (Latin)
 fv,fv_blackfoot,Blackfoot,Prairies,fv_blackfoot_kmw-9.0.js,9.2.1,bla-Latn,Siksika (Latin)
-fv,fv_cree_latin,Cree - Roman Orthography,Prairies,fv_cree_latin_kmw-9.0.js,10.0,cr-Latn,Cree (Latin)
+fv,fv_cree_latin,Cree - Roman Orthography,Prairies,fv_cree_latin_kmw-9.0.js,10.0.1,cr-Latn,Cree (Latin)
 fv,fv_dakota_mb,Dakota,Prairies,fv_dakota_mb_kmw-9.0.js,9.1.1,dak-Latn,Dakota (Latin)
 fv,fv_dakota_sk,Dakot̄a,Prairies,fV_dakota_sk_kmw-9.0.js,9.1.1,dak-Latn,Dakota (Latin)
 fv,fv_isga_iabi,Isga Iʔabi,Prairies,fv_isga_iabi_kmw-9.0.js,9.1.1,sto-Latn,Stoney (Latin)
 fv,fv_lakota,Lak̇ot̄a,Prairies,fv_lakota-9.0.js,9.1.1,lkt-Latn,Lakota (Latin)
 fv,fv_nakoda,Nakoda,Prairies,fv_nakoda_kmw-9.0.js,9.1.1,asb-Latn,Assiniboine (Latin)
 fv,fv_tsuutina,Tsúùt'ínà,Prairies,fv_tsuutina_kmw-9.0.js,9.1.1,srs-Latn,Sarsi (Latin)
-fv,fv_plains_cree,ᓀᐦᐃᔭᐍᐏᐣ (Plains Cree),Prairies,fv_plains_cree_kmw-9.0.js,10.0.2,crk-Cans,ᓀᐦᐃᔭᐍᐏᐣ (Cree syllabics)
+fv,fv_plains_cree,ᓀᐦᐃᔭᐍᐏᐣ (Plains Cree),Prairies,fv_plains_cree_kmw-9.0.js,11.0,crk-Cans,ᓀᐦᐃᔭᐍᐏᐣ (Cree syllabics)
 fv,fv_dine_bizaad,Diné Bizaad,South West,fv_dine_bizaad_kmw-9.0.js,9.1.1,nv-Latn,Navajo (Latin)
 fv,fv_dane_zaa_zaage,Dane-Z̲aa Z̲áágéʔ,Western Subarctic,fv_dane_zaa_zaage_kmw-9.0.js,9.3,bea,Beaver
 fv,fv_dene_dzage,Dene Dzage,Western Subarctic,fv_dene_dzage_kmw-9.0.js,9.1.1,kkz-Latn,Kaska (Latin)

resources/build/ci/pull-requests.inc.sh

@@ -107,7 +107,7 @@ function ci_open_pull_request {
   git push origin "$branch"
   builder_echo "Push complete"
 
-  hub pull-request -f --no-edit -l auto
+  hub pull-request --force --message "$commit_message" --labels auto
   builder_echo "Pull request created"
 
   git switch "$current_branch"

web/src/engine/main/src/contextManagerBase.ts

@@ -274,8 +274,6 @@ export abstract class ContextManagerBase<MainConfig extends EngineConfiguration>
     // (!wasNull || !!keyboard) - blocks events for `null` -> `null` transitions.
     // (keyman/keymanweb.com#96)
     if(this.currentKeyboardSrcTarget() == originalKeyboardTarget && (!wasNull || !!keyboard)) {
-      // Perform standard context-reset ops, including the processing of new-context events.
-      this.resetContext();
       // Will trigger KeymanEngine handler that passes keyboard to the OSK, displays it.
       this.emit('keyboardchange', this.activeKeyboard);
     }

web/src/engine/main/src/keymanEngine.ts

@@ -2,7 +2,7 @@ import { type Keyboard, KeyboardKeymanGlobal, ProcessorInitOptions } from "@keym
 import { DOMKeyboardLoader as KeyboardLoader } from "@keymanapp/keyboard-processor/dom-keyboard-loader";
 import { InputProcessor, PredictionContext } from "@keymanapp/input-processor";
 import { OSKView } from "keyman/engine/osk";
-import { KeyboardRequisitioner, ModelCache, ModelSpec, toUnprefixedKeyboardId as unprefixed } from "keyman/engine/package-cache";
+import { KeyboardRequisitioner, KeyboardStub, ModelCache, ModelSpec, toUnprefixedKeyboardId as unprefixed } from "keyman/engine/package-cache";
 
 import { EngineConfiguration, InitOptionSpec } from "./engineConfiguration.js";
 import KeyboardInterface from "./keyboardInterface.js";
@@ -137,31 +137,57 @@ export default class KeymanEngine<
     });
 
     this.contextManager.on('keyboardchange', (kbd) => {
-      this.refreshModel();
-      this.core.activeKeyboard = kbd?.keyboard;
-
-      this.legacyAPIEvents.callEvent('keyboardchange', {
-        internalName: kbd?.metadata.id ?? '',
-        languageCode: kbd?.metadata.langId ?? ''
-      });
-
       // Hide OSK and do not update keyboard list if using internal keyboard (desktops).
       // Condition will not be met for touch form-factors; they force selection of a
       // default keyboard.
       if(!kbd) {
         this.osk.startHide(false);
       }
 
-      if(this.osk) {
-        this.osk.setNeedsLayout();
-        this.osk.activeKeyboard = kbd;
-        this.osk.present();
+      const earlyBatchClosure = () => {
+        this.refreshModel();
+        // Triggers context resets that can trigger layout stuff.
+        // It's not the final such context-reset, though.
+        this.core.activeKeyboard = kbd?.keyboard;
+
+        this.legacyAPIEvents.callEvent('keyboardchange', {
+          internalName: kbd?.metadata.id ?? '',
+          languageCode: kbd?.metadata.langId ?? ''
+        });
+      }
+
+      /*
+        Needed to ensure the correct layer is displayed AND that deadkeys from
+        the old keyboard have been wiped.
+
+        Needs to be after the OSK has loaded for the keyboard in case the default
+        layer should be something other than "default" for the current context.
+      */
+      const doContextReset = () => {
+        this.contextManager.resetContext();
       }
 
-      // Needed to ensure the correct layer is displayed.
-      // Needs to be after the OSK has loaded for the keyboard in case the default
-      // layer should be something other than "default" for the current context.
-      this.core.resetContext(this.contextManager.activeTarget);
+      /*
+        This pattern is designed to minimize layout reflow during the keyboard-swap process.
+        The 'default' layer is loaded by default, but some keyboards will start on different
+        layers depending on the current state of the context.
+
+        If possible, we want to only perform layout operations once the correct layer is
+        set to active.
+      */
+      if(this.osk) {
+        this.osk.batchLayoutAfter(() => {
+          earlyBatchClosure();
+          this.osk.activeKeyboard = kbd;
+          // Note:  when embedded within the mobile apps, the keyboard will still be visible
+          // at this time.
+          doContextReset();
+          this.osk.present();
+        });
+      } else {
+        earlyBatchClosure();
+        doContextReset();
+      }
     });
 
     this.contextManager.on('keyboardasyncload', (metadata) => {
@@ -216,7 +242,15 @@ export default class KeymanEngine<
       resetContext: (target) => {
         // Could reset the target's deadkeys here, but it's really more of a 'core' task.
         // So we delegate that to keyboard-processor.
-        this.core.resetContext(target);
+        const doReset = () => this.core.resetContext(target);
+
+        if(this.osk) {
+          this.osk.batchLayoutAfter(() => {
+            doReset();
+          })
+        } else {
+          doReset();
+        }
       },
       predictionContext: new PredictionContext(this.core.languageProcessor, this.core.keyboardProcessor),
       keyboardCache: this.keyboardRequisitioner.cache

web/src/engine/osk/src/input/gestures/browser/keytip.ts

@@ -3,6 +3,7 @@ import { KeyElement } from '../../../keyElement.js';
 import KeyTipInterface from '../../../keytip.interface.js';
 import VisualKeyboard from '../../../visualKeyboard.js';
 import { GesturePreviewHost } from '../../../keyboard-layout/gesturePreviewHost.js';
+import { ParsedLengthStyle } from '../../../lengthStyle.js';
 
 const CSS_PREFIX = 'kmw-';
 const DEFAULT_TIP_ORIENTATION: PhoneKeyTipOrientation = 'top';
@@ -111,16 +112,15 @@ export default class KeyTip implements KeyTipInterface {
       let canvasWidth = xWidth + Math.ceil(xWidth * 0.3) * 2;
       let canvasHeight = Math.ceil(2.3 * xHeight) + (ySubPixelPadding); //
 
-      kts.top = 'auto';
+      if(orientation == 'bottom') {
+        y += canvasHeight - xHeight;
+      }
 
+      kts.top = 'auto';
       const unselectedOrientation = orientation == 'top' ? 'bottom' : 'top';
       this.tip.classList.remove(`${CSS_PREFIX}${unselectedOrientation}`);
       this.tip.classList.add(`${CSS_PREFIX}${orientation}`);
 
-      if(orientation == 'bottom') {
-        y += canvasHeight - xHeight;
-      }
-
       kts.bottom = Math.floor(_BoxRect.height - y) + 'px';
       kts.textAlign = 'center';
       kts.overflow = 'visible';
@@ -141,14 +141,14 @@ export default class KeyTip implements KeyTipInterface {
       }
 
       if(px != 0) {
-        let popupFS = previewFontScale * px;
         let scaleStyle = {
-          fontFamily: kts.fontFamily,
-          fontSize: popupFS + 'px',
-          height: 1.6 * xHeight + 'px' // as opposed to the canvas height of 2.3 * xHeight.
+          keyWidth: 1.6 * xWidth,
+          keyHeight: 1.6 * xHeight, // as opposed to the canvas height of 2.3 * xHeight.
+          baseEmFontSize: vkbd.getKeyEmFontSize(),
+          layoutFontSize: new ParsedLengthStyle(vkbd.kbdDiv.style.fontSize)
         };
 
-        kts.fontSize = key.key.getIdealFontSize(vkbd, key.key.keyText, scaleStyle, true);
+        kts.fontSize = key.key.getIdealFontSize(key.key.keyText, scaleStyle, previewFontScale).styleString;
       }
 
       // Adjust shape if at edges

web/src/engine/osk/src/keyboard-layout/oskBaseKey.ts

@@ -1,14 +1,13 @@
 import { ActiveKey, Codes, DeviceSpec } from '@keymanapp/keyboard-processor';
 import { landscapeView } from 'keyman/engine/dom-utils';
 
-import OSKKey, { renameSpecialKey } from './oskKey.js';
+import OSKKey, { KeyLayoutParams, renameSpecialKey } from './oskKey.js';
 import { KeyData, KeyElement, link } from '../keyElement.js';
 import OSKRow from './oskRow.js';
 import VisualKeyboard from '../visualKeyboard.js';
 import { ParsedLengthStyle } from '../lengthStyle.js';
 import { GesturePreviewHost } from './gesturePreviewHost.js';
 
-
 export default class OSKBaseKey extends OSKKey {
   private capLabel: HTMLDivElement;
   private previewHost: GesturePreviewHost;
@@ -197,29 +196,23 @@ export default class OSKBaseKey extends OSKKey {
     this.btn.replaceChild(this.preview, oldPreview);
   }
 
-  public refreshLayout(vkbd: VisualKeyboard) {
-    let key = this.spec as ActiveKey;
-    this.square.style.width = vkbd.layoutWidth.scaledBy(key.proportionalWidth).styleString;
-    this.square.style.marginLeft = vkbd.layoutWidth.scaledBy(key.proportionalPad).styleString;
-    this.btn.style.width = vkbd.usesFixedWidthScaling ? this.square.style.width : '100%';
+  public refreshLayout(layoutParams: KeyLayoutParams) {
+    const keyTextClosure = super.refreshLayout(layoutParams);  // key labels in particular.
 
-    if(vkbd.usesFixedHeightScaling) {
-      // Matches its row's height.
-      this.square.style.height = vkbd.internalHeight.scaledBy(this.row.heightFraction).styleString;
-    } else {
-      this.square.style.height = '100%'; // use the full row height
-    }
+    return () => {
+      // part 2:  key internals - these do depend on recalculating internal layout.
 
-    super.refreshLayout(vkbd);
+      // Ideally, the rest would be in yet another calculation layer... need to figure out a good design for this.
+      keyTextClosure(); // we're already in that phase, so go ahead and run it.
 
-    const device = vkbd.device;
-    const resizeLabels = (device.OS == DeviceSpec.OperatingSystem.iOS &&
-                          device.formFactor == DeviceSpec.FormFactor.Phone
-                          && landscapeView());
-
-    // Rescale keycap labels on iPhone (iOS 7)
-    if(resizeLabels && this.capLabel) {
-      this.capLabel.style.fontSize = '6px';
+      const emFont = layoutParams.baseEmFontSize;
+      // Rescale keycap labels on small phones
+      if(emFont.val < 12) {
+        this.capLabel.style.fontSize = '6px';
+      } else {
+        // The default value set within kmwosk.css.
+        this.capLabel.style.fontSize = ParsedLengthStyle.forScalar(0.5).styleString;
+      }
     }
   }