@pdfme/common 2.0.2 → 2.2.0

package/dist/types/src/type.d.ts

@@ -1,5 +1,12 @@
 import { z } from 'zod';
+import type { Font as FontKitFont } from 'fontkit';
 import { Lang, Size, Alignment, BarcodeSchemaType, SchemaType, CommonSchema as _CommonSchema, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaInputs, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps } from './schema.js';
+export declare type FontWidthCalcValues = {
+    font: FontKitFont;
+    fontSize: number;
+    characterSpacing: number;
+    boxWidthInPt: number;
+};
 declare type CommonSchema = z.infer<typeof _CommonSchema>;
 export declare const schemaTypes: readonly ["text", "image", "qrcode", "japanpost", "ean13", "ean8", "code39", "code128", "nw7", "itf14", "upca", "upce", "gs1datamatrix"];
 export declare const isTextSchema: (arg: CommonSchema) => arg is {
@@ -12,6 +19,7 @@ export declare const isTextSchema: (arg: CommonSchema) => arg is {
     };
     rotate?: number | undefined;
     alignment?: "center" | "left" | "right" | undefined;
+    verticalAlignment?: "top" | "bottom" | "middle" | undefined;
     fontSize?: number | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
@@ -21,6 +29,7 @@ export declare const isTextSchema: (arg: CommonSchema) => arg is {
     dynamicFontSize?: {
         max: number;
         min: number;
+        fit?: string | undefined;
     } | undefined;
 };
 export declare const isImageSchema: (arg: CommonSchema) => arg is {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/common",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/constants.ts

@@ -1,13 +1,20 @@
 export const DEFAULT_FONT_NAME = 'Roboto';
 export const DEFAULT_FONT_SIZE = 13;
 export const DEFAULT_ALIGNMENT = 'left';
+export const VERTICAL_ALIGN_TOP = 'top';
+export const VERTICAL_ALIGN_MIDDLE = 'middle';
+export const VERTICAL_ALIGN_BOTTOM = 'bottom';
+export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
 export const DEFAULT_LINE_HEIGHT = 1;
 export const DEFAULT_CHARACTER_SPACING = 0;
 export const DEFAULT_FONT_COLOR = '#000';
-export const DEFAULT_TOLERANCE = 1;
-export const DEFAULT_FONT_SIZE_ADJUSTMENT = 0.25;
-export const DEFAULT_PT_TO_PX_RATIO = 1.333;
-export const DEFAULT_PT_TO_MM_RATIO = 0.3528;
+export const DYNAMIC_FIT_VERTICAL = 'vertical';
+export const DYNAMIC_FIT_HORIZONTAL = 'horizontal';
+export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
+export const FONT_SIZE_ADJUSTMENT = 0.25;
+export const PT_TO_PX_RATIO = 1.333;
+export const PT_TO_MM_RATIO = 0.3528;
+export const MM_TO_PT_RATIO = 2.8346; // https://www.ddc.co.jp/words/archives/20090701114500.html
 
 export const BLANK_PDF =
   'data:application/pdf;base64,JVBERi0xLjcKJeLjz9MKNSAwIG9iago8PAovRmlsdGVyIC9GbGF0ZURlY29kZQovTGVuZ3RoIDM4Cj4+CnN0cmVhbQp4nCvkMlAwUDC1NNUzMVGwMDHUszRSKErlCtfiyuMK5AIAXQ8GCgplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL01lZGlhQm94IFswIDAgNTk1LjQ0IDg0MS45Ml0KL1Jlc291cmNlcyA8PAo+PgovQ29udGVudHMgNSAwIFIKL1BhcmVudCAyIDAgUgo+PgplbmRvYmoKMiAwIG9iago8PAovVHlwZSAvUGFnZXMKL0tpZHMgWzQgMCBSXQovQ291bnQgMQo+PgplbmRvYmoKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKPj4KZW5kb2JqCjMgMCBvYmoKPDwKL3RyYXBwZWQgKGZhbHNlKQovQ3JlYXRvciAoU2VyaWYgQWZmaW5pdHkgRGVzaWduZXIgMS4xMC40KQovVGl0bGUgKFVudGl0bGVkLnBkZikKL0NyZWF0aW9uRGF0ZSAoRDoyMDIyMDEwNjE0MDg1OCswOScwMCcpCi9Qcm9kdWNlciAoaUxvdmVQREYpCi9Nb2REYXRlIChEOjIwMjIwMTA2MDUwOTA5WikKPj4KZW5kb2JqCjYgMCBvYmoKPDwKL1NpemUgNwovUm9vdCAxIDAgUgovSW5mbyAzIDAgUgovSUQgWzwyODhCM0VENTAyOEU0MDcyNERBNzNCOUE0Nzk4OUEwQT4gPEY1RkJGNjg4NkVERDZBQUNBNDRCNEZDRjBBRDUxRDlDPl0KL1R5cGUgL1hSZWYKL1cgWzEgMiAyXQovRmlsdGVyIC9GbGF0ZURlY29kZQovSW5kZXggWzAgN10KL0xlbmd0aCAzNgo+PgpzdHJlYW0KeJxjYGD4/5+RUZmBgZHhFZBgDAGxakAEP5BgEmFgAABlRwQJCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjUzMgolJUVPRgo=';

package/src/font.ts

@@ -1,17 +1,20 @@
 import * as fontkit from 'fontkit';
 import type { Font as FontKitFont } from 'fontkit';
-import { Template, Schema, Font, isTextSchema, TextSchema } from './type';
+import { FontWidthCalcValues, Template, Schema, Font, isTextSchema, TextSchema } from './type';
 import { Buffer } from 'buffer';
 import {
   DEFAULT_FONT_VALUE,
   DEFAULT_FONT_NAME,
   DEFAULT_FONT_SIZE,
   DEFAULT_CHARACTER_SPACING,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DEFAULT_LINE_HEIGHT,
+  FONT_SIZE_ADJUSTMENT,
+  DEFAULT_DYNAMIC_FIT,
+  DYNAMIC_FIT_HORIZONTAL,
+  DYNAMIC_FIT_VERTICAL,
+  VERTICAL_ALIGN_TOP,
 } from './constants';
+import { mm2pt, pt2mm, pt2px } from './helper';
 import { b64toUint8Array } from "."
 
 export const getFallbackFontName = (font: Font) => {
@@ -31,7 +34,7 @@ export const getFallbackFontName = (font: Font) => {
 const getFallbackFont = (font: Font) => {
   const fallbackFontName = getFallbackFontName(font);
   return font[fallbackFontName];
-}
+};
 
 export const getDefaultFont = (): Font => ({
   [DEFAULT_FONT_NAME]: { data: b64toUint8Array(DEFAULT_FONT_VALUE), fallback: true },
@@ -74,21 +77,51 @@ export const checkFont = (arg: { font: Font; template: Template }) => {
   }
 };
 
-export const getFontAlignmentValue = (fontKitFont: FontKitFont, fontSize: number) => {
+export const getBrowserVerticalFontAdjustments = (
+  fontKitFont: FontKitFont,
+  fontSize: number,
+  lineHeight: number,
+  verticalAlignment: string
+) => {
   const { ascent, descent, unitsPerEm } = fontKitFont;
 
-  const fontSizeInPx = fontSize * DEFAULT_PT_TO_PX_RATIO;
+  // Fonts have a designed line height that the browser renders when using `line-height: normal`
+  const fontBaseLineHeight = (ascent - descent) / unitsPerEm;
 
-  // Convert ascent and descent to px values
-  const ascentInPixels = (ascent / unitsPerEm) * fontSizeInPx;
-  const descentInPixels = (descent / unitsPerEm) * fontSizeInPx;
+  // For vertical alignment top
+  // To achieve consistent positioning between browser and PDF, we apply the difference between
+  // the font's actual height and the font size in pixels.
+  // Browsers middle the font within this height, so we only need half of it to apply to the top.
+  // This means the font renders a bit lower in the browser, but achieves PDF alignment
+  const topAdjustment = (fontBaseLineHeight * fontSize - fontSize) / 2;
 
-  // Calculate the single line height in px
-  const singleLineHeight = ((ascentInPixels + Math.abs(descentInPixels)) / fontSizeInPx);
+  if (verticalAlignment === VERTICAL_ALIGN_TOP) {
+    return { topAdj: pt2px(topAdjustment), bottomAdj: 0 };
+  }
 
-  // Calculate the top margin/padding in px
-  return ((singleLineHeight * fontSizeInPx) - fontSizeInPx) / 2
-}
+  // For vertical alignment bottom and middle
+  // When browsers render text in a non-form element (such as a <div>), some of the text may be
+  // lowered below and outside the containing element if the line height used is less than
+  // the base line-height of the font.
+  // This behaviour does not happen in a <textarea> though, so we need to adjust the positioning
+  // for consistency between editing and viewing to stop text jumping up and down.
+  // This portion of text is half of the difference between the base line height and the used
+  // line height. If using the same or higher line-height than the base font, then line-height
+  // takes over in the browser and this adjustment is not needed.
+  // Unlike the top adjustment - this is only driven by browser behaviour, not PDF alignment.
+  let bottomAdjustment = 0;
+  if (lineHeight < fontBaseLineHeight) {
+    bottomAdjustment = ((fontBaseLineHeight - lineHeight) * fontSize) / 2;
+  }
+
+  return { topAdj: 0, bottomAdj: pt2px(bottomAdjustment) };
+};
+
+export const getFontDescentInPt = (fontKitFont: FontKitFont, fontSize: number) => {
+  const { descent, unitsPerEm } = fontKitFont;
+
+  return (descent / unitsPerEm) * fontSize;
+};
 
 export const heightOfFontAtSize = (fontKitFont: FontKitFont, fontSize: number) => {
   const { ascent, descent, bbox, unitsPerEm } = fontKitFont;
@@ -103,46 +136,19 @@ export const heightOfFontAtSize = (fontKitFont: FontKitFont, fontSize: number) =
   return (height / 1000) * fontSize;
 };
 
-const widthOfTextAtSize = (input: string, fontKitFont: FontKitFont, fontSize: number) => {
-  const { glyphs } = fontKitFont.layout(input);
-  const scale = 1000 / fontKitFont.unitsPerEm;
-  return glyphs.reduce((totalWidth, glyph) => totalWidth + glyph.advanceWidth * scale, 0) * (fontSize / 1000);
-}
-
-const calculateCharacterSpacing = (
-  textContent: string,
-  textCharacterSpacing: number
-) => {
-  const numberOfCharacters = textContent.length;
-  return (numberOfCharacters - 1) * textCharacterSpacing;
+const calculateCharacterSpacing = (textContent: string, textCharacterSpacing: number) => {
+  return (textContent.length - 1) * textCharacterSpacing;
 };
 
-const calculateTextWidthInMm = (textContent: string, textWidth: number, textCharacterSpacing: number) =>
-  (textWidth + calculateCharacterSpacing(textContent, textCharacterSpacing)) * DEFAULT_PT_TO_MM_RATIO;
-
-const getLongestLine = (
-  textContentRows: string[],
-  fontKitFont: FontKitFont,
-  fontSize: number,
-  characterSpacingCount: number
-) => {
-  let longestLine = '';
-  let maxLineWidth = 0;
-
-  textContentRows.forEach((line) => {
-    const textWidth = widthOfTextAtSize(line, fontKitFont, fontSize);
-    const lineWidth = calculateTextWidthInMm(line, textWidth, characterSpacingCount);
-
-    if (lineWidth > maxLineWidth) {
-      longestLine = line;
-      maxLineWidth = lineWidth;
-    }
-  });
-
-  return longestLine;
+export const widthOfTextAtSize = (text: string, fontKitFont: FontKitFont, fontSize: number, characterSpacing: number) => {
+  const { glyphs } = fontKitFont.layout(text);
+  const scale = 1000 / fontKitFont.unitsPerEm;
+  const standardWidth =
+    glyphs.reduce((totalWidth, glyph) => totalWidth + glyph.advanceWidth * scale, 0) *
+    (fontSize / 1000);
+  return standardWidth + calculateCharacterSpacing(text, characterSpacing);
 };
 
-
 const fontKitFontCache: { [fontName: string]: FontKitFont } = {};
 export const getFontKitFont = async (textSchema: TextSchema, font: Font) => {
   const fontName = textSchema.fontName || getFallbackFontName(font);
@@ -157,38 +163,188 @@ export const getFontKitFont = async (textSchema: TextSchema, font: Font) => {
   }
 
   const fontKitFont = fontkit.create(fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer));
-  fontKitFontCache[fontName] = fontKitFont
+  fontKitFontCache[fontName] = fontKitFont;
 
   return fontKitFont;
-}
+};
 
-const getTextContent = (input: string, fontKitFont: FontKitFont, fontSize: number, characterSpacingCount: number): string => {
-  const textContentRows = input.split('\n');
-  return textContentRows.length > 1 ? getLongestLine(textContentRows, fontKitFont, fontSize, characterSpacingCount) : input;
-}
 
-export const calculateDynamicFontSize = async ({ textSchema, font, input }: { textSchema: TextSchema, font: Font, input: string }) => {
-  const { fontSize: _fontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing, width } = textSchema;
-  const fontSize = _fontSize || DEFAULT_FONT_SIZE;
+const isTextExceedingBoxWidth = (text: string, calcValues: FontWidthCalcValues) => {
+  const { font, fontSize, characterSpacing, boxWidthInPt } = calcValues;
+  const textWidth = widthOfTextAtSize(text, font, fontSize, characterSpacing);
+  return textWidth > boxWidthInPt;
+};
+
+/**
+ * Incrementally checks the current line for its real length
+ * and returns the position where it exceeds the box width.
+ * Returns `null` to indicate if textLine is shorter than the available box.
+ */
+const getOverPosition = (textLine: string, calcValues: FontWidthCalcValues) => {
+  for (let i = 0; i <= textLine.length; i++) {
+    if (isTextExceedingBoxWidth(textLine.slice(0, i + 1), calcValues)) {
+      return i;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Gets the position of the split. Splits the exceeding line at
+ * the last whitespace prior to it exceeding the bounding box width.
+ */
+const getSplitPosition = (textLine: string, calcValues: FontWidthCalcValues) => {
+  const overPos = getOverPosition(textLine, calcValues);
+  if (overPos === null) return textLine.length; // input line is shorter than the available space
+
+  let overPosTmp = overPos;
+  while (textLine[overPosTmp] !== ' ' && overPosTmp >= 0) {
+    overPosTmp--;
+  }
+
+  // For very long lines with no whitespace use the original overPos
+  return overPosTmp > 0 ? overPosTmp : overPos;
+};
+
+/**
+ * Recursively splits the line at getSplitPosition.
+ * If there is some leftover, split the rest again in the same manner.
+ */
+export const getSplittedLines = (textLine: string, calcValues: FontWidthCalcValues): string[] => {
+  const splitPos = getSplitPosition(textLine, calcValues);
+  const splittedLine = textLine.substring(0, splitPos);
+  const rest = textLine.substring(splitPos).trimStart();
+
+  if (rest === textLine) {
+    // if we went so small that we want to split on the first char
+    // then end recursion to avoid infinite loop
+    return [textLine];
+  }
+
+  if (rest.length === 0) {
+    // end recursion if there is no leftover
+    return [splittedLine];
+  }
+
+  return [splittedLine, ...getSplittedLines(rest, calcValues)];
+};
+
+/**
+ * If using dynamic font size, iteratively increment or decrement the
+ * font size to fit the containing box.
+ * Calculating space usage involves splitting lines where they exceed
+ * the box width based on the proposed size.
+ */
+export const calculateDynamicFontSize = async ({
+  textSchema,
+  font,
+  input,
+  startingFontSize,
+}: {
+  textSchema: TextSchema;
+  font: Font;
+  input: string;
+  startingFontSize?: number | undefined;
+}) => {
+  const {
+    fontSize: schemaFontSize,
+    dynamicFontSize: dynamicFontSizeSetting,
+    characterSpacing: schemaCharacterSpacing,
+    width: boxWidth,
+    height: boxHeight,
+    lineHeight = DEFAULT_LINE_HEIGHT,
+  } = textSchema;
+  const fontSize = startingFontSize || schemaFontSize || DEFAULT_FONT_SIZE;
   if (!dynamicFontSizeSetting) return fontSize;
+  if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
 
-  const characterSpacingCount = characterSpacing ?? DEFAULT_CHARACTER_SPACING;
+  const characterSpacing = schemaCharacterSpacing ?? DEFAULT_CHARACTER_SPACING;
   const fontKitFont = await getFontKitFont(textSchema, font);
-  const textContent = getTextContent(input, fontKitFont, fontSize, characterSpacingCount);
-  const textWidth = widthOfTextAtSize(textContent, fontKitFont, fontSize);
+  const textContentRows = input.split('\n');
 
   let dynamicFontSize = fontSize;
-  let textWidthInMm = calculateTextWidthInMm(textContent, textWidth, characterSpacingCount);
+  if (dynamicFontSize < dynamicFontSizeSetting.min) {
+    dynamicFontSize = dynamicFontSizeSetting.min;
+  } else if (dynamicFontSize > dynamicFontSizeSetting.max) {
+    dynamicFontSize = dynamicFontSizeSetting.max;
+  }
+  const dynamicFontFit = dynamicFontSizeSetting.fit ?? DEFAULT_DYNAMIC_FIT;
+
+  const calculateConstraints = (size: number) => {
+    let totalWidthInMm = 0;
+    let totalHeightInMm = 0;
+
+    const boxWidthInPt = mm2pt(boxWidth);
+    const textHeight = heightOfFontAtSize(fontKitFont, size);
+    const textHeightInMm = pt2mm(textHeight * lineHeight);
+
+    textContentRows.forEach((paragraph) => {
+      const lines = getSplittedLines(paragraph, {
+        font: fontKitFont,
+        fontSize: size,
+        characterSpacing,
+        boxWidthInPt,
+      });
+      lines.forEach((line) => {
+        if (dynamicFontFit === DYNAMIC_FIT_VERTICAL) {
+          // For vertical fit we want to consider the width of text lines where we detect a split
+          const textWidth = widthOfTextAtSize(line, fontKitFont, size, characterSpacing);
+          const textWidthInMm = pt2mm(textWidth);
+          totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
+        }
+
+        totalHeightInMm += textHeightInMm;
+      });
+      if (dynamicFontFit === DYNAMIC_FIT_HORIZONTAL) {
+        // For horizontal fit we want to consider the line's width 'unsplit'
+        const textWidth = widthOfTextAtSize(paragraph, fontKitFont, size, characterSpacing);
+        const textWidthInMm = pt2mm(textWidth);
+        totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);
+      }
+    });
+
+    return { totalWidthInMm, totalHeightInMm };
+  };
+
+  const shouldFontGrowToFit = (totalWidthInMm: number, totalHeightInMm: number) => {
+    if (dynamicFontSize >= dynamicFontSizeSetting.max) {
+      return false;
+    }
+    if (dynamicFontFit === DYNAMIC_FIT_HORIZONTAL) {
+      return totalWidthInMm < boxWidth;
+    }
+    return totalHeightInMm < boxHeight;
+  };
 
-  while (textWidthInMm > width - DEFAULT_TOLERANCE && dynamicFontSize > dynamicFontSizeSetting.min) {
-    dynamicFontSize -= DEFAULT_FONT_SIZE_ADJUSTMENT;
-    textWidthInMm = calculateTextWidthInMm(textContent, widthOfTextAtSize(textContent, fontKitFont, dynamicFontSize), characterSpacingCount);
+  const shouldFontShrinkToFit = (totalWidthInMm: number, totalHeightInMm: number) => {
+    if (dynamicFontSize <= dynamicFontSizeSetting.min || dynamicFontSize <= 0) {
+      return false;
+    }
+    return totalWidthInMm > boxWidth || totalHeightInMm > boxHeight;
+  };
+
+  let { totalWidthInMm, totalHeightInMm } = calculateConstraints(dynamicFontSize);
+
+  // Attempt to increase the font size up to desired fit
+  while (shouldFontGrowToFit(totalWidthInMm, totalHeightInMm)) {
+    dynamicFontSize += FONT_SIZE_ADJUSTMENT;
+    const { totalWidthInMm: newWidth, totalHeightInMm: newHeight } = calculateConstraints(dynamicFontSize);
+
+    if (newHeight < boxHeight) {
+      totalWidthInMm = newWidth;
+      totalHeightInMm = newHeight;
+    } else {
+      dynamicFontSize -= FONT_SIZE_ADJUSTMENT;
+      break;
+    }
   }
 
-  while (textWidthInMm < width - DEFAULT_TOLERANCE && dynamicFontSize < dynamicFontSizeSetting.max) {
-    dynamicFontSize += DEFAULT_FONT_SIZE_ADJUSTMENT;
-    textWidthInMm = calculateTextWidthInMm(textContent, widthOfTextAtSize(textContent, fontKitFont, dynamicFontSize), characterSpacingCount);
+  // Attempt to decrease the font size down to desired fit
+  while (shouldFontShrinkToFit(totalWidthInMm, totalHeightInMm)) {
+    dynamicFontSize -= FONT_SIZE_ADJUSTMENT;
+    ({ totalWidthInMm, totalHeightInMm } = calculateConstraints(dynamicFontSize));
   }
 
   return dynamicFontSize;
-};
+};

package/src/helper.ts

@@ -10,7 +10,20 @@ import {
   GenerateProps as GeneratePropsSchema,
   UIProps as UIPropsSchema,
 } from './schema';
-import { checkFont } from "./font"
+import { MM_TO_PT_RATIO, PT_TO_MM_RATIO, PT_TO_PX_RATIO } from './constants';
+import { checkFont } from './font';
+
+export const mm2pt = (mm: number): number => {
+  return parseFloat(String(mm)) * MM_TO_PT_RATIO;
+};
+
+export const pt2mm = (pt: number): number => {
+  return pt * PT_TO_MM_RATIO;
+};
+
+export const pt2px = (pt: number): number => {
+  return pt * PT_TO_PX_RATIO;
+};
 
 const blob2Base64Pdf = (blob: Blob) => {
   return new Promise<string>((resolve, reject) => {

package/src/index.ts

@@ -2,18 +2,26 @@ import {
   DEFAULT_FONT_NAME,
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  FONT_SIZE_ADJUSTMENT,
+  MM_TO_PT_RATIO,
+  PT_TO_MM_RATIO,
+  PT_TO_PX_RATIO,
   BLANK_PDF,
   DEFAULT_FONT_VALUE,
 } from './constants.js';
 import { schemaTypes, isImageSchema, isBarcodeSchema, isTextSchema } from './type.js';
 import type {
+  FontWidthCalcValues,
   Lang,
   Size,
   Alignment,
@@ -48,28 +56,41 @@ import {
   checkPreviewProps,
   checkDesignerProps,
   checkGenerateProps,
+  mm2pt,
+  pt2px,
   validateBarcodeInput,
 } from './helper.js';
 import {
-  calculateDynamicFontSize, getFallbackFontName,
+  calculateDynamicFontSize,
+  getFallbackFontName,
   getDefaultFont,
   heightOfFontAtSize,
+  widthOfTextAtSize,
   checkFont,
   getFontKitFont,
-  getFontAlignmentValue,
+  getBrowserVerticalFontAdjustments,
+  getFontDescentInPt,
+  getSplittedLines,
 } from './font.js';
 
 export {
   DEFAULT_FONT_NAME,
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
-  DEFAULT_TOLERANCE,
-  DEFAULT_FONT_SIZE_ADJUSTMENT,
-  DEFAULT_PT_TO_MM_RATIO,
-  DEFAULT_PT_TO_PX_RATIO,
+  DYNAMIC_FIT_VERTICAL,
+  DYNAMIC_FIT_HORIZONTAL,
+  DEFAULT_DYNAMIC_FIT,
+  FONT_SIZE_ADJUSTMENT,
+  MM_TO_PT_RATIO,
+  PT_TO_MM_RATIO,
+  PT_TO_PX_RATIO,
   BLANK_PDF,
   DEFAULT_FONT_VALUE,
   schemaTypes,
@@ -80,10 +101,15 @@ export {
   b64toUint8Array,
   getFallbackFontName,
   getDefaultFont,
+  getSplittedLines,
   heightOfFontAtSize,
+  widthOfTextAtSize,
+  mm2pt,
+  pt2px,
   checkFont,
+  getBrowserVerticalFontAdjustments,
+  getFontDescentInPt,
   getFontKitFont,
-  getFontAlignmentValue,
   checkInputs,
   checkUIOptions,
   checkTemplate,
@@ -119,4 +145,5 @@ export type {
   PreviewReactProps,
   DesignerProps,
   DesignerReactProps,
+  FontWidthCalcValues,
 };

package/src/schema.ts

@@ -1,5 +1,6 @@
 /* eslint dot-notation: "off"*/
 import { z } from 'zod';
+import { VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM } from "./constants";
 
 const langs = ['en', 'ja', 'ar', 'th', 'pl'] as const;
 export const Lang = z.enum(langs);
@@ -9,6 +10,13 @@ export const Size = z.object({ height: z.number(), width: z.number() });
 const alignments = ['left', 'center', 'right'] as const;
 export const Alignment = z.enum(alignments);
 
+const verticalAlignments = [
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+] as const;
+export const VerticalAlignment = z.enum(verticalAlignments);
+
 // prettier-ignore
 export const barcodeSchemaTypes = ['qrcode', 'japanpost', 'ean13', 'ean8', 'code39', 'code128', 'nw7', 'itf14', 'upca', 'upce', 'gs1datamatrix'] as const;
 const notBarcodeSchemaTypes = ['text', 'image'] as const;
@@ -28,6 +36,7 @@ export const CommonSchema = z.object({
 export const TextSchema = CommonSchema.extend({
   type: z.literal(SchemaType.Enum.text),
   alignment: Alignment.optional(),
+  verticalAlignment: VerticalAlignment.optional(),
   fontSize: z.number().optional(),
   fontName: z.string().optional(),
   fontColor: z.string().optional(),
@@ -37,6 +46,7 @@ export const TextSchema = CommonSchema.extend({
   dynamicFontSize: z.object({
     max: z.number(),
     min: z.number(),
+    fit: z.string().optional(),
   }).optional(),
 });
 

package/src/type.ts

@@ -1,4 +1,6 @@
 import { z } from 'zod';
+import type { Font as FontKitFont } from 'fontkit';
+
 import {
   Lang,
   Size,
@@ -28,6 +30,13 @@ import {
   DesignerReactProps,
 } from './schema.js';
 
+export type FontWidthCalcValues = {
+  font: FontKitFont;
+  fontSize: number;
+  characterSpacing: number;
+  boxWidthInPt: number;
+};
+
 type CommonSchema = z.infer<typeof _CommonSchema>;
 export const schemaTypes = _schemaTypes;
 export const isTextSchema = (arg: CommonSchema): arg is TextSchema => arg.type === 'text';