From 87fc6921af0d09d5d55d8ecbf8b7cddac4c829fc Mon Sep 17 00:00:00 2001 From: "Joshua A. Horton" Date: Tue, 15 Nov 2022 14:42:39 +0700 Subject: [PATCH] change(web): adds a bit of dynamic resizing to help bubble --- web/source/osk/embedded/globeHint.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/web/source/osk/embedded/globeHint.ts b/web/source/osk/embedded/globeHint.ts index ed0bd49356..c13d6c944f 100644 --- a/web/source/osk/embedded/globeHint.ts +++ b/web/source/osk/embedded/globeHint.ts @@ -83,7 +83,14 @@ namespace com.keyman.osk.embedded { // Width dimensions must be set explicitly to prevent clipping. // We'll assume that the globe key is always positioned on the bottom row. - let bubbleWidth = xWidth + Math.ceil(xWidth * 1) * 2; + let oskBaseFontSize = new ParsedLengthStyle(keyman.osk.baseFontSize); + let bubbleWidth = Math.ceil(xWidth * 3); + + // The base OSK font-size is typically set in 'em', and we want to scale up + // the bubble accordingly for devices where it'd display too small otherwise. + if(!oskBaseFontSize.absolute) { + bubbleWidth *= oskBaseFontSize.val; + } bubbleStyle.bottom = Math.floor(keyman.osk.computedHeight - y) + 'px'; // CSS already defines transform: translateX(-50%) - this centers the element. @@ -112,6 +119,10 @@ namespace com.keyman.osk.embedded { this.tip.style.transform = 'translateX(-' + (xOverflow - rightEdgeMargin + 1) + 'px)'; } + if(!oskBaseFontSize.absolute) { + this.element.style.fontSize = keyman.osk.baseFontSize; + } + let capHeight = xHeight / 3; this.cap.style.bottom = (rrow.height - capHeight) + 'px';