wip: adjust text optical size AND width

olzzon · olzzon · commit cec285ca30ef · 2025-03-13T13:19:02.000+01:00
diff --git a/packages/webui/src/client/styles/countdown/director.scss b/packages/webui/src/client/styles/countdown/director.scss
@@ -70,7 +70,7 @@ $hold-status-color: $liveline-timecode-color;
 			display: grid;
 			grid-template:
 				24em
-				50em
+				70em
 				30em / #{'min(13vw, 27vh)'} auto;
 			white-space: nowrap;
 
@@ -79,13 +79,22 @@ $hold-status-color: $liveline-timecode-color;
 				grid-column: 1 / -1;
 				text-align: left;
 				padding-left: 10px;
-				font-size: 20em;
-				font-weight: 500;
-				line-height: 120%;
-				letter-spacing: 0%;
 				vertical-align: middle;
-				color: #fff;
 				position: relative;
+				/* PartNameWide */
+				font-family: 'Roboto Flex';
+				font-style: normal;
+				font-weight: 700;
+				font-size: 99px;
+				line-height: 110%;
+				letter-spacing: 0.01em;
+				font-feature-settings: 'pnum' on, 'lnum' on;
+
+				color: #FFFFFF;
+				font-stretch: 100;
+				font-variation-settings: 'GRAD' -90, 'XOPQ' 96, 'XTRA' 372, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'slnt' 0, 'opsz' 38;
+
+				text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
 				box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 				z-index: 1; 
 
@@ -100,6 +109,7 @@ $hold-status-color: $liveline-timecode-color;
 				}
 				.director-screen__body__segment__countdown {
 					position: absolute;
+					font-size: 120px;
 					top: 0;
 					right: 0;
 					height: 100%;
diff --git a/packages/webui/src/client/styles/counterComponents.scss b/packages/webui/src/client/styles/counterComponents.scss
@@ -1,10 +1,19 @@
 .counter-component__over-under {
 	color: black;
-	font-family: Roboto Flex;
-	font-weight: 400;
-	font-size: 2em;
+	font-family: 'Roboto Flex';
+	margin-top: 4px;
+	margin-bottom: 4px;
+	font-style: normal;
+	font-weight: 500;
+	font-size: 90px;
 	line-height: 100%;
-	letter-spacing: 0%;	
+	/* identical to box height, or 120px */
+	text-align: right;
+	font-feature-settings: 'liga' off;
+
+	font-stretch: 57;
+	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
+
 
 	.under {
 		background-color: #ff0;
@@ -27,31 +36,67 @@
 }
 
 .counter-component__planned-end {
-	color: #fff;
-	font-family: Roboto Flex;
+	/* TimeOfDay */
+	font-family: 'Roboto Flex';
+	font-style: normal;
 	font-weight: 400;
-	font-style: italic;
-	font-size: 2em;
+	font-size: 90px;
 	line-height: 100%;
 	letter-spacing: 0%;	
+	/* identical to box height, or 120px */
+	font-feature-settings: 'liga' off;
+
+	color: #FFFFFF;
+	font-stretch: 70;
+	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 44;
+
+
+	/* Inside auto layout */
+	flex: none;
+	order: 0;
+	flex-grow: 0;
+
 }
 
 .counter-component__time-to-planned-end {
 	color:#ff0;
-	font-family: Roboto Flex;
-	font-weight: 500;
-	font-size: 2em;
-	line-height: 100%;
 	letter-spacing: 0%;
-	text-align: center;
+	/* CounterUnder */
+font-family: 'Roboto Flex';
+font-style: normal;
+font-weight: 500;
+font-size: 90px;
+line-height: 100%;
+/* identical to box height, or 120px */
+text-align: right;
+font-feature-settings: 'liga' off;
+
+color: #000000;
+font-stretch: 57;
+font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
+
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
 }
 
 .counter-component__time-since-planned-end {
 	color: #FF5218;
-	font-family: Roboto Flex;
-	font-weight: 630;
-	font-size: 2em;
-	line-height: 100%;
-	letter-spacing: -3.5%;
-	text-align: center;
+
+	font-family: 'Roboto Flex';
+font-style: normal;
+font-weight: 500;
+font-size: 90px;
+line-height: 100%;
+/* identical to box height, or 120px */
+text-align: right;
+font-feature-settings: 'liga' off;
+
+font-stretch: 57;
+font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
+
+
 }
diff --git a/packages/webui/src/client/ui/ClockView/DirectorScreen.tsx b/packages/webui/src/client/ui/ClockView/DirectorScreen.tsx
@@ -401,9 +401,9 @@ function DirectorScreenRender({
 								label={currentSegment?.name || ''}
 								width={'80vw'}
 								fontFamily="Roboto Flex"
-								fontSize="1em"
-								minFontSize={70}
-								maxFontSize={100}
+								fontSize="0.8em"
+								minFontWidth={70}
+								maxFontWidth={90}
 								minLetterSpacing={0}
 								hardCutText={true}
 							/>
@@ -437,8 +437,8 @@ function DirectorScreenRender({
 											width: '90vw',
 											fontFamily: 'Roboto Flex',
 											fontSize: '2em',
-											minFontSize: 70,
-											maxFontSize: 100,
+											minFontWidth: 20,
+											maxFontWidth: 90,
 											minLetterSpacing: 2,
 										}}
 									/>
@@ -484,9 +484,9 @@ function DirectorScreenRender({
 									label={nextSegment?.name || ''}
 									width={'80vw'}
 									fontFamily="Roboto Flex"
-									fontSize="1em"
-									minFontSize={70}
-									maxFontSize={100}
+									fontSize="0.8em"
+									minFontWidth={70}
+									maxFontWidth={90}
 									minLetterSpacing={0}
 									hardCutText={true}
 								/>
@@ -522,8 +522,8 @@ function DirectorScreenRender({
 												width: '90vw',
 												fontFamily: 'Roboto Flex',
 												fontSize: '2em',
-												minFontSize: 70,
-												maxFontSize: 100,
+												minFontWidth: 20,
+												maxFontWidth: 90,
 												minLetterSpacing: 2,
 											}}
 										/>
diff --git a/packages/webui/src/client/ui/util/AdjustLabelFit.tsx b/packages/webui/src/client/ui/util/AdjustLabelFit.tsx
@@ -24,16 +24,16 @@ export interface AdjustLabelFitProps {
 	fontSize?: string | number
 
 	/**
-	 * Minimum font size in percentage relative to fontSize (for auto-scaling)
+	 * Minimum font width in percentage relative to normal (for auto-scaling)
 	 * Default is 50
 	 */
-	minFontSize?: number
+	minFontWidth?: number
 
 	/**
-	 * Maximum font size in percentage relative to fontSize (for auto-scaling)
+	 * Maximum font size in percentage relative to normal (for auto-scaling)
 	 * Default is 120
 	 */
-	maxFontSize?: number
+	maxFontWidth?: number
 
 	/**
 	 * Minimum letter spacing in pixels
@@ -72,8 +72,8 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 	width,
 	fontFamily,
 	fontSize,
-	minFontSize = 50,
-	maxFontSize = 120,
+	minFontWidth = 50,
+	maxFontWidth = 120,
 	minLetterSpacing = -1,
 	containerStyle = {},
 	labelStyle = {},
@@ -109,9 +109,11 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 		if (!labelElement || !containerElement) return
 
 		const DEFAULT_WIDTH = 100
+		const DEFAULT_OPTICAL_SIZE = 10
 		labelElement.style.letterSpacing = '0px'
 
-		labelElement.style.fontVariationSettings = `'wdth' ${DEFAULT_WIDTH}`
+		// Apply the new width setting
+		labelElement.style.fontVariationSettings = `'opsz' ${DEFAULT_OPTICAL_SIZE}, 'wdth' ${DEFAULT_WIDTH}`
 
 		// Reset label content if it was cut
 		labelElement.textContent = label
@@ -131,25 +133,6 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 
 		// Measure the container and text widths
 		const containerWidth = containerElement.clientWidth
-		const textWidth = labelElement.getBoundingClientRect().width
-
-		if (textWidth <= containerWidth) {
-			const currentFontSize = parseFloat(window.getComputedStyle(labelElement).fontSize)
-			const scaleFactor = containerWidth / textWidth
-			const newFontSize = Math.min(currentFontSize * scaleFactor, maxFontSize)
-
-			labelElement.style.fontSize = `${newFontSize}px`
-
-			// Re-center text vertically if needed
-			labelElement.style.lineHeight = '1'
-
-			return
-		}
-
-		const currentFontSize = parseFloat(window.getComputedStyle(labelElement).fontSize)
-		const scaleFactor = containerWidth / textWidth
-		const newFontSize = Math.max(currentFontSize * scaleFactor, minFontSize)
-		labelElement.style.fontSize = `${newFontSize}px`
 
 		// Remeasure after font size adjustment
 		void labelElement.offsetWidth
@@ -162,10 +145,10 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 		let currentWidth = DEFAULT_WIDTH * widthRatio
 
 		// Use a reasonable range for width variation
-		currentWidth = Math.max(currentWidth, 75) // minimum 75%
-		currentWidth = Math.min(currentWidth, 110) // maximum 110%
+		currentWidth = Math.max(currentWidth, minFontWidth)
+		currentWidth = Math.min(currentWidth, maxFontWidth)
 
-		labelElement.style.fontVariationSettings = `'wdth' ${currentWidth}`
+		labelElement.style.fontVariationSettings = `'opsz' ${100 - minFontWidth}, 'wdth' ${currentWidth}`
 
 		// Remeasure text width after adjustment:
 		void labelElement.offsetWidth
@@ -194,10 +177,6 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 				void labelElement.offsetWidth
 				const finalTextWidth = labelElement.getBoundingClientRect().width
 				if (finalTextWidth > containerWidth) {
-					const currentFontSize = parseFloat(window.getComputedStyle(labelElement).fontSize)
-					const minFontSizeValue = currentFontSize * (minFontSize / 100)
-					labelElement.style.fontSize = `${minFontSizeValue}px`
-
 					labelElement.textContent = ''
 
 					for (let i = 0; i < label.length; i++) {
@@ -247,7 +226,7 @@ export const AdjustLabelFit: React.FC<AdjustLabelFitProps> = ({
 			cancelAnimationFrame(adjustmentTimer)
 			cancelAnimationFrame(resizeTimer)
 		}
-	}, [label, width, fontFamily, fontSize, minFontSize, maxFontSize, minLetterSpacing])
+	}, [label, width, fontFamily, fontSize, minFontWidth, maxFontWidth, minLetterSpacing])
 
 	return (
 		<div ref={containerRef} className={`adjust-label-fit ${className}`} style={finalContainerStyle}>
