fontdue-js 2.20.0 → 2.20.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.20.1
+
+- Fixed `useAutofit` measuring multi-line text as a single line, causing the font size to be too small when type tester content contains line breaks
+
 ## 2.20.0
 
 - **Font loading now uses the FontFace API instead of CSS `@font-face`**. Fonts loaded by fontdue-js components (TypeTester, StoreModal, CharacterViewer, etc.) are no longer loaded via CSS stylesheet injection. Instead, font files are fetched as binary data and loaded via the browser's `FontFace` API. **Note:** components like TypeTesters and CharacterViewer previously loaded the entire family's CSS, which made all styles available page-wide as a side effect. They now only load the specific style they're rendering. If you render font styles outside of fontdue-js components (e.g., in a specimen section), you'll need to load those fonts yourself — either with the new `useFont` hook and `webfontSources`, or with your own `@font-face` rules.

package/dist/hooks/useAutofit.js

@@ -87,10 +87,11 @@ const useAutofit = _ref => {
     const availableWidth = containerWidth - padding;
     if (availableWidth <= 0 || !text) return;
 
-    // Use DOM measurement when variable font settings are active
-    // (canvas doesn't support fontVariationSettings in most browsers).
-    // Otherwise use canvas for better performance (no layout reflow).
-    const refWidth = fontVariationSettings ? measureWithDOM(text, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : measureWithCanvas(text, fontFamily, fontWeight, fontStyle, letterSpacing);
+    // Split by newlines and measure the widest line, since the rendered
+    // text preserves line breaks (Draft.js uses white-space: pre-wrap).
+    const lines = text.split('\n');
+    const measure = fontVariationSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
+    const refWidth = Math.max(...lines.map(measure));
     if (refWidth <= 0) return;
 
     // Text width scales linearly with font size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",