From 6e33e779aa8c465b7bd8b70b6a66ee788cbd22aa Mon Sep 17 00:00:00 2001 From: David HM Morgan <37144605+david-hm-morgan@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:23:04 +0000 Subject: [PATCH 1/9] Default CSS vars for text styling Will need to use these in UI text displayer --- ui/less/containers.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/less/containers.less b/ui/less/containers.less index 77b0fc07ca..8e900f1c39 100644 --- a/ui/less/containers.less +++ b/ui/less/containers.less @@ -6,6 +6,12 @@ /* All of the top-level containers into which various visible features go. */ +/* CSS Vars that can be overridden at the App */ +:root { + --shaka-text-font-size-scaling: 1; + --shaka-text-background: rgba(0, 0, 0, 80%); +} + /* A container for the entire video + controls combo. This is the auto-setup * div which we populate. */ .shaka-video-container { From 50114a1f4e25eada26bdc0faa456a4144b3c8222 Mon Sep 17 00:00:00 2001 From: David HM Morgan <37144605+david-hm-morgan@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:27:45 +0000 Subject: [PATCH 2/9] Update ui_text_displayer.js Use the CSS vars - need to add/update UT --- lib/text/ui_text_displayer.js | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js index 372c8c23f9..e3ab5675ae 100644 --- a/lib/text/ui_text_displayer.js +++ b/lib/text/ui_text_displayer.js @@ -669,6 +669,25 @@ shaka.text.UITextDisplayer = class { return Cue.positionAlign.CENTER; } + /** + * Applies accessibility font size scaling to the provided fontSize. + * @param {string} fontSize size with units + * @return {string} scaled font size + */ + _accessibilityFontSizeScaling(fontSize) { + if (fontSize && fontSize !== '') { + const fontSizeInfo = + shaka.text.UITextDisplayer.getLengthValueInfo_(fontSize); + if (fontSizeInfo) { + const {value, unit} = fontSizeInfo; + fontSize = `calc(${value}${unit} * ` + + 'var(--shaka-text-font-size-scaling))'; + } + } + + return fontSize; + } + /** * @param {!HTMLElement} cueElement * @param {!shaka.text.Cue} cue @@ -752,9 +771,9 @@ shaka.text.UITextDisplayer = class { if (bgColor) { elem.style.backgroundColor = bgColor; } else if (text) { - // If there is no background, default to a semi-transparent black. + // If there is no background, default to a CSS var provided value. // Only do this for the text itself. - elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; + elem.style.backgroundColor = 'var(--shaka-text-background)'; } } if (text) { @@ -798,8 +817,9 @@ shaka.text.UITextDisplayer = class { style.fontWeight = cue.fontWeight.toString(); style.fontStyle = cue.fontStyle; style.letterSpacing = cue.letterSpacing; - style.fontSize = shaka.text.UITextDisplayer.convertLengthValue_( - cue.fontSize, cue, this.videoContainer_); + style.fontSize = this._accessibilityFontSizeScaling( + shaka.text.UITextDisplayer.convertLengthValue_( + cue.fontSize, cue, this.videoContainer_)); // The line attribute defines the positioning of the text container inside // the video container. From 9f541f22cedeef10e3dfabda1bc09bd9c5864595 Mon Sep 17 00:00:00 2001 From: David HM Morgan <37144605+david-hm-morgan@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:30:59 +0000 Subject: [PATCH 3/9] Added UT --- test/text/ui_text_displayer_unit.js | 35 ++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/test/text/ui_text_displayer_unit.js b/test/text/ui_text_displayer_unit.js index 7abb9bbb06..be8a43a434 100644 --- a/test/text/ui_text_displayer_unit.js +++ b/test/text/ui_text_displayer_unit.js @@ -73,13 +73,18 @@ describe('UITextDisplayer', () => { textDisplayer.updateCaptions_(); } + function accessibilityScalingFontSize(cueSize) { + return `calc(${cueSize}*var(--shaka-text-font-size-scaling))`; + } + it('correctly displays styles for cues', () => { /** @type {!shaka.text.Cue} */ const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.'); cue.color = 'green'; cue.backgroundColor = 'black'; cue.direction = shaka.text.Cue.direction.HORIZONTAL_LEFT_TO_RIGHT; - cue.fontSize = '10px'; + const cueSampleFontSize = '10px'; + cue.fontSize = cueSampleFontSize; cue.fontWeight = shaka.text.Cue.fontWeight.NORMAL; cue.fontStyle = shaka.text.Cue.fontStyle.NORMAL; cue.lineHeight = '2'; @@ -98,7 +103,7 @@ describe('UITextDisplayer', () => { const expectCssObj = { 'color': 'green', 'direction': 'ltr', - 'font-size': '10px', + 'font-size': accessibilityScalingFontSize(cueSampleFontSize), 'font-style': 'normal', 'font-weight': 400, 'text-align': 'center', @@ -130,7 +135,8 @@ describe('UITextDisplayer', () => { nestedCue.writingMode = shaka.text.Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM; nestedCue.color = 'green'; nestedCue.backgroundColor = 'black'; - nestedCue.fontSize = '10px'; + const cueSampleFontSize = '10px'; + nestedCue.fontSize = cueSampleFontSize; nestedCue.fontWeight = shaka.text.Cue.fontWeight.NORMAL; nestedCue.fontStyle = shaka.text.Cue.fontStyle.NORMAL; nestedCue.lineHeight = '2'; @@ -148,7 +154,7 @@ describe('UITextDisplayer', () => { const expectCssObj = { 'color': 'green', - 'font-size': '10px', + 'font-size': accessibilityScalingFontSize(cueSampleFontSize), 'font-style': 'normal', 'font-weight': 400, 'text-align': 'center', @@ -174,7 +180,9 @@ describe('UITextDisplayer', () => { it('correctly displays styles for cellResolution units', () => { /** @type {!shaka.text.Cue} */ const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.'); - cue.fontSize = '0.80c'; + + const fontSizeAsCellResolution = 0.80; + cue.fontSize = `${fontSizeAsCellResolution}c`; cue.linePadding = '0.50c'; cue.cellResolution = { columns: 60, @@ -187,7 +195,10 @@ describe('UITextDisplayer', () => { // Expected value is calculated based on ttp:cellResolution="60 20" // videoContainerHeight=450px and tts:fontSize="0.80c" on the default style. - const expectedFontSize = '18px'; + const calculatedFontSize = (450/20) * fontSizeAsCellResolution; + const expectedFontSize = `${calculatedFontSize}px`; + const expectedAccessibilityFontSize = accessibilityScalingFontSize( + expectedFontSize); // Expected value is calculated based on ttp:cellResolution="60 20" // videoContainerHeight=450px and ebutts:linePadding="0.5c" on the default @@ -199,7 +210,7 @@ describe('UITextDisplayer', () => { const cssObj = parseCssText(captions.style.cssText); expect(cssObj).toEqual( jasmine.objectContaining({ - 'font-size': expectedFontSize, + 'font-size': expectedAccessibilityFontSize, 'padding-left': expectedLinePadding, 'padding-right': expectedLinePadding, })); @@ -208,7 +219,8 @@ describe('UITextDisplayer', () => { it('correctly displays styles for percentages units', () => { /** @type {!shaka.text.Cue} */ const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.'); - cue.fontSize = '90%'; + const cueSampleFontSize = 90; + cue.fontSize = `${cueSampleFontSize}%`; cue.cellResolution = { columns: 32, rows: 15, @@ -220,13 +232,16 @@ describe('UITextDisplayer', () => { // Expected value is calculated based on ttp:cellResolution="32 15" // videoContainerHeight=450px and tts:fontSize="90%" on the default style. - const expectedFontSize = '27px'; + const calculatedFontSize = (450/15) * (cueSampleFontSize/100); + const expectedFontSize = `${calculatedFontSize}px`; + const expectedAccessibilityFontSize = accessibilityScalingFontSize( + expectedFontSize); const textContainer = videoContainer.querySelector('.shaka-text-container'); const captions = textContainer.querySelector('div'); const cssObj = parseCssText(captions.style.cssText); expect(cssObj).toEqual( - jasmine.objectContaining({'font-size': expectedFontSize})); + jasmine.objectContaining({'font-size': expectedAccessibilityFontSize})); }); it('does not display duplicate cues', () => { From df8b4d2b0a243640fce8a6e51279b75c167daee6 Mon Sep 17 00:00:00 2001 From: David HM Morgan <37144605+david-hm-morgan@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:52:37 +0000 Subject: [PATCH 4/9] Update ui_text_displayer.js undo bg color --- lib/text/ui_text_displayer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js index e3ab5675ae..e18b54336a 100644 --- a/lib/text/ui_text_displayer.js +++ b/lib/text/ui_text_displayer.js @@ -771,9 +771,9 @@ shaka.text.UITextDisplayer = class { if (bgColor) { elem.style.backgroundColor = bgColor; } else if (text) { - // If there is no background, default to a CSS var provided value. + // If there is no background, default to a semi-transparent black. // Only do this for the text itself. - elem.style.backgroundColor = 'var(--shaka-text-background)'; + elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; } } if (text) { From f5580c5780c103f16ed8b168ba157428a8180dda Mon Sep 17 00:00:00 2001 From: David HM Morgan <37144605+david-hm-morgan@users.noreply.github.com> Date: Wed, 5 Mar 2025 13:59:08 +0000 Subject: [PATCH 5/9] fix whitespace --- lib/text/ui_text_displayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js index e18b54336a..f9425eccc0 100644 --- a/lib/text/ui_text_displayer.js +++ b/lib/text/ui_text_displayer.js @@ -687,7 +687,7 @@ shaka.text.UITextDisplayer = class { return fontSize; } - + /** * @param {!HTMLElement} cueElement * @param {!shaka.text.Cue} cue From 3cf3b95e3758dd083ab179fda9bff421c5224214 Mon Sep 17 00:00:00 2001 From: David Morgan Date: Wed, 5 Mar 2025 15:16:35 +0000 Subject: [PATCH 6/9] feedback re css var compatibility --- lib/text/ui_text_displayer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js index f9425eccc0..a6ab3dead3 100644 --- a/lib/text/ui_text_displayer.js +++ b/lib/text/ui_text_displayer.js @@ -678,7 +678,8 @@ shaka.text.UITextDisplayer = class { if (fontSize && fontSize !== '') { const fontSizeInfo = shaka.text.UITextDisplayer.getLengthValueInfo_(fontSize); - if (fontSizeInfo) { + if (fontSizeInfo && window.CSS && + CSS.supports('font-size', 'var(--shaka-text-font-size-scaling)')) { const {value, unit} = fontSizeInfo; fontSize = `calc(${value}${unit} * ` + 'var(--shaka-text-font-size-scaling))'; From 34d95816c4c3ad551d84b6084db6da9541da4ae0 Mon Sep 17 00:00:00 2001 From: David Morgan Date: Wed, 5 Mar 2025 17:30:19 +0000 Subject: [PATCH 7/9] fix tizen UT where CSS feature not supported --- test/text/ui_text_displayer_unit.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/test/text/ui_text_displayer_unit.js b/test/text/ui_text_displayer_unit.js index be8a43a434..f42dceb32d 100644 --- a/test/text/ui_text_displayer_unit.js +++ b/test/text/ui_text_displayer_unit.js @@ -74,7 +74,12 @@ describe('UITextDisplayer', () => { } function accessibilityScalingFontSize(cueSize) { - return `calc(${cueSize}*var(--shaka-text-font-size-scaling))`; + let result = cueSize; + if (window.CSS && + CSS.supports('font-size', 'var(--shaka-text-font-size-scaling)')) { + result = `calc(${cueSize}*var(--shaka-text-font-size-scaling))`; + } + return result; } it('correctly displays styles for cues', () => { From d7863f74f9cc20f6afbda58d6428a1e1b7ebb267 Mon Sep 17 00:00:00 2001 From: David Morgan Date: Thu, 6 Mar 2025 10:51:17 +0000 Subject: [PATCH 8/9] doc: review comment request for tutorial notes --- docs/tutorials/text-displayer.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/tutorials/text-displayer.md b/docs/tutorials/text-displayer.md index 49386df52a..418b1834dd 100644 --- a/docs/tutorials/text-displayer.md +++ b/docs/tutorials/text-displayer.md @@ -28,6 +28,27 @@ const player = new shaka.Player(/* mediaElement= */ null, container); player.setVideoContainer(container); ``` +##### Font size scaling for readability + +For improved readability the option to scale text size is provided via CSS variable (where supported). The application must provide the following fallback setting in its CSS as a bare minimum: + +```css +:root { + --shaka-text-font-size-scaling: 1; +} +``` + +The scale factor can be changed in JS, for example, in response to the user selecting a percentage scale factor: + +```js +const fontSizeSelectElement = document.getElementById("fontScaling"); +const root = document.querySelector(":root"); +root.style.setProperty( + "--shaka-text-font-size-scaling", + fontSizeSelectElement.value / 100 +); +``` + ### Text displayer configuration Additional configuration for the text displayer can be passed by calling: From eeb1185f17eae7014357647ae4c73122b11b15fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= Date: Thu, 6 Mar 2025 12:45:38 +0100 Subject: [PATCH 9/9] Update ui/less/containers.less --- ui/less/containers.less | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/less/containers.less b/ui/less/containers.less index 8e900f1c39..7061bd7fd6 100644 --- a/ui/less/containers.less +++ b/ui/less/containers.less @@ -9,7 +9,6 @@ /* CSS Vars that can be overridden at the App */ :root { --shaka-text-font-size-scaling: 1; - --shaka-text-background: rgba(0, 0, 0, 80%); } /* A container for the entire video + controls combo. This is the auto-setup