@unmade/text-renderer 1.2.0 → 1.3.1

package/README.md

@@ -147,6 +147,53 @@ rendered output. Rotating the frame rather than reasoning about rotation inside
 solver keeps it working in one coordinate space, and is also what lets a rotated tall
 placement use its long side for the baseline.
 
+## Measuring text
+
+`renderText` returns artwork; `measureText` returns its dimensions, for the same
+inputs.
+
+```typescript
+import { measureText } from '@unmade/text-renderer';
+
+const m = measureText({
+  font,
+  text: 'HELLO',
+  boxDimensions,
+  physicalSize: [20, 'mm'],
+  spacing: { outlineWidth: 0, letterSpacing: 0, letterSpacingOutline: 0 },
+  baseline: 'flat',
+});
+
+m.bbox;              // { x, y, width, height } in box pixels
+m.physicalWidth;     // in the box's units
+m.physicalHeight;
+m.physicalCapHeight; // see below
+m.lines;             // per line, in rendered order
+```
+
+It measures the **same positioned glyphs that get drawn**, rather than
+re-deriving dimensions from font metrics. That matters for more than tidiness: a
+curved line's bounds follow the arch, which no flat metrics calculation can know
+about, and any second implementation eventually disagrees with the first.
+`renderText` and `measureText` share one layout pass for exactly that reason.
+
+It throws where `renderText` would throw, and for the same reasons — so if
+measuring succeeds, rendering the same options will too.
+
+### Cap height is reported, not derived
+
+`physicalCapHeight` is the physical height of a standard capital at the chosen
+font size. It is **not** `physicalHeight`, and can't be calculated from it:
+
+- `physicalHeight` measures the glyphs actually present, so it grows with
+  descenders, accents and punctuation
+- `physicalCapHeight` is a property of the font and size alone, so the same size
+  always reports the same cap height regardless of what was typed
+
+Both are needed. Cap height is what a fixed size preset targets and what gets
+persisted against a design for manufacturing; the measured height is what the
+artwork actually occupies.
+
 ## Configuration Engine adapter
 
 The `ce-adapter` sub-package bridges CE (Configuration Engine) editor state to renderer options:

package/dist/ce-adapter/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e.type===`text`}function t(e){let t=e.getState().garment;return e.settings.garments.find(e=>e.slug===t)}function n(e,t,n){if(!e.embellishment_positions)return;let r=e.embellishment_positions.filter(e=>e.placement===t?!n||!e.variant||e.variant===n||e.variant.toLowerCase()===`common`:!1);if(n&&r.length>1){let e=r.find(e=>e.variant===n);if(e)return e}return r[0]}function r(e,t){let n=e.fonts.find(e=>e.id===t);if(n)return{id:n.id,fontUrl:n.font_url,fontFamily:n.font_family,letterSpacing:n.letter_spacing??0,letterSpacingOutline:n.letter_spacing_outline??0,outlineWidth:n.outline_width??0,fixedColours:n.fixed_colours}}function i(t,i,a,o,s,c){let{library:l}=s,u=[];for(let[d,f]of Object.entries(o)){if(f.type!==`text`)continue;let o=f,{meta:p}=o;if(!p?.text)continue;let{libraryItemID:m}=o,h=l[m];if(!h||!e(h))continue;let g=p.font;if(g===void 0)continue;let _=r(h,g);if(!_)continue;let v=n(i,d,c);if(!v)continue;let y=null,b=null;if(p.colours&&h.palette!=null)try{let e=t.palettes.getUsedColours(h.palette,p.colours);y=e[0]??null,b=e[1]??null}catch(e){console.warn(`[extractTextPlacements] Colour resolution failed for ${d}:`,e)}let x=s.byId?.[d],S={vertical:`top`,horizontal:`left`};if(x){let e=x;e.vertical_alignment&&(S.vertical=e.vertical_alignment),e.horizontal_alignment&&(S.horizontal=e.horizontal_alignment)}u.push({placementId:d,displayName:d,source:a,text:p.text,font:_,isCurved:p.isCurved??!1,isDistributed:p.isDistributed??!1,verticalAlignment:p.verticalAlignment??S.vertical,horizontalAlignment:p.horizontalAlignment??S.horizontal,rotation:p.rotation??0,spacing:p.spacing??null,fillColour:y,outlineColour:b,position:{width:v.width,height:v.height,physicalWidth:v.physical_width_decimal,physicalHeight:v.physical_height_decimal,physicalUnits:v.physical_size_units,baselinePath:v.baseline_path,rotation:v.rotation},userSetPhysicalSize:p.retainedPhysicalSize??null,fontMetrics:(()=>{let e=p.fontMetrics??{size:0,height:0,baseline:0,width:0},t=e.physicalFontSize||(e.physicalHeight!=null&&e.physicalHeight>0&&e.physicalUnits!=null?[e.physicalHeight,e.physicalUnits]:void 0);return{...e,physicalFontSize:t}})(),manufacturingMethod:p.manufacturing_method??``})}return u}function a(e){let n=e.getState(),r=t(e);if(!r)return console.warn(`[extractTextPlacements] No matching garment found`),[];let a=typeof e.getCurrentVariant==`function`?e.getCurrentVariant():void 0,o=[],s=n.vals?.placements,c=e.settings.placements;s&&c&&o.push(...i(e,r,`placements`,s,c,a));let l=n.vals?.embellishments,u=e.settings.embellishments;return l&&u&&o.push(...i(e,r,`embellishments`,l,u,a)),o.length===0&&console.warn(`[extractTextPlacements] No text entries found in either placements or embellishments`),o}function o(e){return e===`center`?`centre`:e}function s(e){let t=o(e.horizontalAlignment);e.isDistributed&&(t=`distributed`);let n;n=e.position.baselinePath?{type:`custom`,path:e.position.baselinePath}:e.isCurved?`curved`:`flat`;let r=e.userSetPhysicalSize?[e.userSetPhysicalSize[0],e.userSetPhysicalSize[1]]:e.fontMetrics.physicalFontSize==null?[e.position.physicalHeight,e.position.physicalUnits]:e.fontMetrics.physicalFontSize,i={outlineWidth:e.outlineColour==null?0:e.font.outlineWidth,letterSpacing:e.spacing?.letter_spacing??0,letterSpacingOutline:e.spacing?.letter_spacing_outline??0},a=e.fillColour?{hex:e.fillColour.hex,reference:e.fillColour.reference??void 0}:void 0,s=e.outlineColour?{hex:e.outlineColour.hex,reference:e.outlineColour.reference??void 0}:void 0,c;if(e.font.fixedColours){let t={};for(let[n,r]of Object.entries(e.font.fixedColours))t[n]={hex:r.hex,reference:r.reference};c=t}return{text:e.text,fontUrl:e.font.fontUrl,physicalSize:r,fontSizeFallback:e.fontMetrics.size,boxDimensions:{width:e.position.width,height:e.position.height,physicalWidth:e.position.physicalWidth,physicalHeight:e.position.physicalHeight,physicalUnits:e.position.physicalUnits},spacing:i,verticalAlignment:o(e.verticalAlignment),horizontalAlignment:t,baseline:n,fillColour:a,strokeColour:s,colourMap:c}}exports.extractTextPlacements=a,exports.mapStateToRendererOptions=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e.type===`text`}function t(e){let t=e.getState().garment;return e.settings.garments.find(e=>e.slug===t)}function n(e,t,n){if(!e.embellishment_positions)return;let r=e.embellishment_positions.filter(e=>e.placement===t?!n||!e.variant||e.variant===n||e.variant.toLowerCase()===`common`:!1);if(n&&r.length>1){let e=r.find(e=>e.variant===n);if(e)return e}return r[0]}function r(e,t){let n=e.fonts.find(e=>e.id===t);if(n)return{id:n.id,fontUrl:n.font_url,fontFamily:n.font_family,letterSpacing:n.letter_spacing??0,letterSpacingOutline:n.letter_spacing_outline??0,outlineWidth:n.outline_width??0,fixedColours:n.fixed_colours}}function i(t,i,a,o,s,c){let{library:l}=s,u=[];for(let[d,f]of Object.entries(o)){if(f.type!==`text`)continue;let o=f,{meta:p}=o;if(!p?.text)continue;let{libraryItemID:m}=o,h=l[m];if(!h||!e(h))continue;let g=p.font;if(g===void 0)continue;let _=r(h,g);if(!_)continue;let v=n(i,d,c);if(!v)continue;let y=null,b=null;if(p.colours&&h.palette!=null)try{let e=t.palettes.getUsedColours(h.palette,p.colours);y=e[0]??null,b=e[1]??null}catch(e){console.warn(`[extractTextPlacements] Colour resolution failed for ${d}:`,e)}let x=s.byId?.[d],S={vertical:`top`,horizontal:`left`};if(x){let e=x;e.vertical_alignment&&(S.vertical=e.vertical_alignment),e.horizontal_alignment&&(S.horizontal=e.horizontal_alignment)}u.push({placementId:d,displayName:d,source:a,text:p.text,font:_,isCurved:p.isCurved??!1,isDistributed:p.isDistributed??!1,verticalAlignment:p.verticalAlignment??S.vertical,horizontalAlignment:p.horizontalAlignment??S.horizontal,rotation:p.rotation??0,spacing:p.spacing??null,fillColour:y,outlineColour:b,position:{width:v.width,height:v.height,physicalWidth:v.physical_width_decimal,physicalHeight:v.physical_height_decimal,physicalUnits:v.physical_size_units,baselinePath:v.baseline_path,rotation:v.rotation},userSetPhysicalSize:p.retainedPhysicalSize??null,fontMetrics:(()=>{let e=p.fontMetrics??{size:0,height:0,baseline:0,width:0},t=e.physicalFontSize||(e.physicalHeight!=null&&e.physicalHeight>0&&e.physicalUnits!=null?[e.physicalHeight,e.physicalUnits]:void 0);return{...e,physicalFontSize:t}})(),manufacturingMethod:p.manufacturing_method??``})}return u}function a(e){let n=e.getState(),r=t(e);if(!r)return console.warn(`[extractTextPlacements] No matching garment found`),[];let a=typeof e.getCurrentVariant==`function`?e.getCurrentVariant():void 0,o=[],s=n.vals?.placements,c=e.settings.placements;s&&c&&o.push(...i(e,r,`placements`,s,c,a));let l=n.vals?.embellishments,u=e.settings.embellishments;return l&&u&&o.push(...i(e,r,`embellishments`,l,u,a)),o.length===0&&console.warn(`[extractTextPlacements] No text entries found in either placements or embellishments`),o}function o(e){return e===`center`?`centre`:e}function s(e){let t=o(e.horizontalAlignment);e.isDistributed&&(t=`distributed`);let n;n=e.position.baselinePath?{type:`custom`,path:e.position.baselinePath}:e.isCurved?`curved`:`flat`;let r=e.userSetPhysicalSize?[e.userSetPhysicalSize[0],e.userSetPhysicalSize[1]]:e.fontMetrics.physicalFontSize==null?[e.position.physicalHeight,e.position.physicalUnits]:e.fontMetrics.physicalFontSize,i=e.outlineColour!=null,a=e.spacing??{letter_spacing:e.font.letterSpacing,letter_spacing_outline:e.font.letterSpacingOutline,outline_width:e.font.outlineWidth},s={outlineWidth:i?a.outline_width:0,letterSpacing:a.letter_spacing,letterSpacingOutline:a.letter_spacing_outline},c=e.fillColour?{hex:e.fillColour.hex,reference:e.fillColour.reference??void 0}:void 0,l=e.outlineColour?{hex:e.outlineColour.hex,reference:e.outlineColour.reference??void 0}:void 0,u;if(e.font.fixedColours){let t={};for(let[n,r]of Object.entries(e.font.fixedColours))t[n]={hex:r.hex,reference:r.reference};u=t}return{text:e.text,fontUrl:e.font.fontUrl,physicalSize:r,fontSizeFallback:e.fontMetrics.size,boxDimensions:{width:e.position.width,height:e.position.height,physicalWidth:e.position.physicalWidth,physicalHeight:e.position.physicalHeight,physicalUnits:e.position.physicalUnits},spacing:s,verticalAlignment:o(e.verticalAlignment),horizontalAlignment:t,baseline:n,fillColour:c,strokeColour:l,colourMap:u}}exports.extractTextPlacements=a,exports.mapStateToRendererOptions=s;

package/dist/ce-adapter/index.d.ts

@@ -6,7 +6,7 @@
  * renderer options. Intended for use in server-side comparison pipelines
  * and any environment that bridges CE state to the text-renderer.
  */
+export type { BasePlacementSettings, BasePlacementState, CombinedEditorSettings, ConfigEditor, EditorGarment, EditorPalette, EditorPaletteColour, EditorState, EditorStateVals, EditorVariant, EmbellishmentPosition, Palettes, PlacementLibraryItem, PlacementPositionResult, PlacementsSettings, TextLibraryItem, TextLibraryItemFont, } from './ce-types';
 export { extractTextPlacements } from './extractTextPlacements';
 export { mapStateToRendererOptions } from './mapStateToRendererOptions';
-export type { BasePlacementSettings, BasePlacementState, CombinedEditorSettings, ConfigEditor, EditorGarment, EditorPalette, EditorPaletteColour, EditorState, EditorStateVals, EditorVariant, EmbellishmentPosition, Palettes, PlacementLibraryItem, PlacementPositionResult, PlacementsSettings, TextLibraryItem, TextLibraryItemFont, } from './ce-types';
 export type { LoadedTextPlacement, TextPlacementFont, TextPlacementPosition, TextPlacementSpacing, } from './types';

package/dist/ce-adapter/index.js

@@ -118,24 +118,28 @@ function s(e) {
 		type: "custom",
 		path: e.position.baselinePath
 	} : e.isCurved ? "curved" : "flat";
-	let r = e.userSetPhysicalSize ? [e.userSetPhysicalSize[0], e.userSetPhysicalSize[1]] : e.fontMetrics.physicalFontSize == null ? [e.position.physicalHeight, e.position.physicalUnits] : e.fontMetrics.physicalFontSize, i = {
-		outlineWidth: e.outlineColour == null ? 0 : e.font.outlineWidth,
-		letterSpacing: e.spacing?.letter_spacing ?? 0,
-		letterSpacingOutline: e.spacing?.letter_spacing_outline ?? 0
-	}, a = e.fillColour ? {
+	let r = e.userSetPhysicalSize ? [e.userSetPhysicalSize[0], e.userSetPhysicalSize[1]] : e.fontMetrics.physicalFontSize == null ? [e.position.physicalHeight, e.position.physicalUnits] : e.fontMetrics.physicalFontSize, i = e.outlineColour != null, a = e.spacing ?? {
+		letter_spacing: e.font.letterSpacing,
+		letter_spacing_outline: e.font.letterSpacingOutline,
+		outline_width: e.font.outlineWidth
+	}, s = {
+		outlineWidth: i ? a.outline_width : 0,
+		letterSpacing: a.letter_spacing,
+		letterSpacingOutline: a.letter_spacing_outline
+	}, c = e.fillColour ? {
 		hex: e.fillColour.hex,
 		reference: e.fillColour.reference ?? void 0
-	} : void 0, s = e.outlineColour ? {
+	} : void 0, l = e.outlineColour ? {
 		hex: e.outlineColour.hex,
 		reference: e.outlineColour.reference ?? void 0
-	} : void 0, c;
+	} : void 0, u;
 	if (e.font.fixedColours) {
 		let t = {};
 		for (let [n, r] of Object.entries(e.font.fixedColours)) t[n] = {
 			hex: r.hex,
 			reference: r.reference
 		};
-		c = t;
+		u = t;
 	}
 	return {
 		text: e.text,
@@ -149,13 +153,13 @@ function s(e) {
 			physicalHeight: e.position.physicalHeight,
 			physicalUnits: e.position.physicalUnits
 		},
-		spacing: i,
+		spacing: s,
 		verticalAlignment: o(e.verticalAlignment),
 		horizontalAlignment: t,
 		baseline: n,
-		fillColour: a,
-		strokeColour: s,
-		colourMap: c
+		fillColour: c,
+		strokeColour: l,
+		colourMap: u
 	};
 }
 //#endregion

package/dist/ce-adapter/types.d.ts

@@ -25,6 +25,7 @@ export interface TextPlacementFont {
 export interface TextPlacementSpacing {
     letter_spacing: number;
     letter_spacing_outline: number;
+    outline_width: number;
     line_height?: number;
 }
 export interface LoadedTextPlacement {

package/dist/fitting/index.d.ts

@@ -67,9 +67,9 @@ export interface FitAndTruncateTextToBoxResult extends FitTextToBoxResult {
 /**
  * Calculate the font size at which `text` fills `boxDimensions` as closely
  * as possible without overflowing, for any baseline shape. This replaces
- * binary-searching for a fitting font size: for flat and custom baselines
- * it's a direct O(1) calculation; for curved baselines it's a bounded
- * numeric solve (see solveCurvedFit).
+ * binary-searching for a fitting font size: flat and custom baselines are
+ * solved in one step, from a single measurement, while curved baselines need
+ * a bounded numeric solve (see solveCurvedFit).
  *
  * `fits: false` means the text doesn't fit even at minFontSize — the caller
  * (e.g. fitAndTruncateTextToBox) should either shorten the text or accept

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { type GenerateCurvedBaselineOptions, type GenerateFlatBaselineOptions, g
 export { DEFAULT_OUTLINE_FACTOR, DEFAULT_SPACING, LINE_HEIGHT, } from './constants';
 export { type FitAndTruncateTextToBoxResult, type FitConstraint, type FitSize, type FitTextToBoxOptions, type FitTextToBoxResult, fitAndTruncateTextToBox, getFontSizeToFitBox, } from './fitting';
 export { getFontColours } from './glyph/svg-glyph-converter';
+export { type LayoutTextOptions, layoutText, type MeasuredLine, measureText, type TextLayout, type TextMeasurement, } from './layout';
 export { getFontCache, type LoadedFont, loadFont } from './loading';
 export { type GetFontSizeFromPhysicalSizeOptions, type GetTextMetricsAtFontSizeOptions, getFontSizeFromPhysicalSize, getTextMetricsAtFontSize, } from './measuring';
 export type { GetTextAsPathDataOptions, SvgGlyphEntry } from './rendering';