Merge pull request #13646 from keymanapp/fix/web/match-osk-and-banner-font-scaling

fix(web): match banner font scaling to osk font scaling

web/src/engine/osk/src/banner/suggestionBanner.ts

@@ -26,6 +26,9 @@ const BANNER_SCROLLER_CLASS = 'kmw-suggest-banner-scroller';
 
 const BANNER_VERT_ROAMING_HEIGHT_RATIO = 0.666;
 
+// .85 is seen in kmwosk.css on `.kmw-banner-bar .kmw-suggest-option`.
+const SUGGESTION_HEIGHT_IN_BANNER_RATIO = 0.85;
+
 /**
  * The style to temporarily apply when updating suggestion text in order to prevent
  * fade transitions at that time.
@@ -67,7 +70,13 @@ interface BannerSuggestionFormatSpec {
    * Sets a target width to use when 'collapsing' suggestions.  Only affects those long
    * enough to need said 'collapsing'.
    */
-  collapsedWidth?: number
+  collapsedWidth?: number;
+
+  /**
+   * The height allotted to each suggestion; needed to support font scaling if the
+   * font would otherwise be too large.
+   */
+  height?: number
 }
 
 export class BannerSuggestion {
@@ -170,7 +179,20 @@ export class BannerSuggestion {
 
     if(suggestion && suggestion.displayAs) {
       const rawMetrics = getTextMetrics(suggestion.displayAs, format.emSize, format.styleForFont);
-      this._textWidth = rawMetrics.width;
+      const projectedHeight = rawMetrics.fontBoundingBoxAscent
+        ? rawMetrics.fontBoundingBoxAscent + rawMetrics.fontBoundingBoxDescent
+        : 1;
+      const ratio = Math.min(1, format.height / projectedHeight);
+
+      // do we need font-height scaling?
+      this._textWidth = rawMetrics.width * ratio;
+      // Apply styling to the container element so that it does not override CSS styling on the
+      // display element (for tablets)
+      if(ratio < 1) {
+        this.container.style.fontSize = ParsedLengthStyle.forScalar(ratio).styleString;
+      } else {
+        delete this.container.style.fontSize;
+      }
     } else {
       this._textWidth = 0;
     }
@@ -726,14 +748,15 @@ export class SuggestionBanner extends Banner {
     const emSizeStr = getComputedStyle(document.body).fontSize;
     const emSize    = getFontSizeStyle(emSizeStr).val;
 
-    const textStyle = getComputedStyle(this.options[0].container.firstChild as HTMLSpanElement);
+    const textElementStyle = getComputedStyle(this.options[0].container.firstChild as HTMLSpanElement);
 
     const targetWidth = this.width / SuggestionBanner.LONG_SUGGESTION_DISPLAY_LIMIT;
+    const height = this.height * SUGGESTION_HEIGHT_IN_BANNER_RATIO;
 
     // computedStyle will fail if the element's not in the DOM yet.
     // Seeks to get the values specified within kmwosk.css.
-    const textLeftPad = new ParsedLengthStyle(textStyle.paddingLeft   || '4px');
-    const textRightPad = new ParsedLengthStyle(textStyle.paddingRight || '4px');
+    const textLeftPad = new ParsedLengthStyle(textElementStyle.paddingLeft   || '4px');
+    const textRightPad = new ParsedLengthStyle(textElementStyle.paddingRight || '4px');
 
     let optionFormat: BannerSuggestionFormatSpec = {
       paddingWidth: textLeftPad.val + textRightPad.val, // Assumes fixed px padding.
@@ -741,6 +764,7 @@ export class SuggestionBanner extends Banner {
       styleForFont: fontStyle,
       collapsedWidth: targetWidth,
       minWidth: 0,
+      height: height
     }
 
     for (let i=0; i<SuggestionBanner.SUGGESTION_LIMIT; i++) {

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

@@ -40,14 +40,6 @@ export default class OSKLayerGroup {
       return;
     }
 
-    // Set default OSK font size (Build 344, KMEW-90)
-    let layoutFS = layout['fontsize'];
-    if(typeof layoutFS == 'undefined' || layoutFS == null || layoutFS == '') {
-      ls.fontSize='1em';
-    } else {
-      ls.fontSize=layout['fontsize'];
-    }
-
     ls.width = '100%';
     ls.height = '100%';
 

web/src/engine/osk/src/views/oskView.ts

@@ -518,7 +518,17 @@ export default abstract class OSKView
       this._baseFontSize = OSKView.defaultFontSize(this.targetDevice, this.computedHeight, this.isEmbedded);
     }
 
-    return this._baseFontSize;
+    // Set default OSK font size (Build 344, KMEW-90)
+    // If the layer group specifies a fontsize value, we need
+    // to apply that to the banner as well.
+    const layerFontSize = this.vkbd?.layerGroup?.spec.fontsize;
+
+    if(layerFontSize) {
+      const parsedSize = new ParsedLengthStyle(layerFontSize);
+      return parsedSize.absolute ? parsedSize : this._baseFontSize.scaledBy(parsedSize.val);
+    } else {
+      return this._baseFontSize;
+    }
   }
 
   public static defaultFontSize(device: DeviceSpec, computedHeight: number, isEmbedded: boolean): ParsedLengthStyle {

web/src/resources/osk/kmwosk.css

@@ -49,7 +49,6 @@
   color: #000;
   text-align: center;
   display: block;
-  line-height: normal;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
@@ -64,6 +63,7 @@
   width: 100%;
   height: 100%;
   scrollbar-width: none; /* Firefox scrollbar prevention */
+  line-height: 100%;
 }
 
 .kmw-suggest-banner-scroller::-webkit-scrollbar {
@@ -463,7 +463,6 @@
 .kmw-banner-bar .kmw-suggest-option {display:inline-block; text-align: center; height: 85%; position: relative; z-index: 10001}
 .kmw-suggestion-text {
   color:#fff;
-  line-height: normal;
   position: relative;
   vertical-align: middle;
   /* Contrast with .kmw-suggest-option::before .width styling.  */