Determine textSize given textHeight for a font

[PolGuixe]

Would it be possible to define a textSize given the desired textHeight for a font?

It would be the inverse of:

const textHeight = font.heightOfFontAtSize(textSize);

e.g.

const textSize = font.sizeOfFontForHeight(textHeight);

[Hopding]

Hello @PolGuixe! This is certainly possible to do. However, pdf-lib doesn't currently expose and methods for doing this. So, you'll have to define some helpers on your own. You'll need one for standard fonts, and one for non-standard fonts.

Here are the functions:

const sizeOfStandardFontAtHeight = (
  factory: PDFStandardFontFactory,
  height: number,
): number => {
  const { Ascender, Descender, FontBBox } = factory.font;
  const yTop = Ascender || FontBBox[3];
  const yBottom = Descender || FontBBox[1];
  return (1000 * height) / (yTop - yBottom);
};

const sizeOfEmbeddedFontAtHeight = (
  factory: PDFEmbeddedFontFactory,
  height: number,
): number => {
  const { ascent, descent, bbox } = factory.font;
  const yTop = (ascent || bbox.maxY) * factory.scale;
  const yBottom = (descent || bbox.minY) * factory.scale;
  return (1000 * height) / (yTop - yBottom);
};

And here's an example demonstrating how to use them:

const pdfDoc = PDFDocumentFactory.create();

const [helveticaRef, helveticaFont] = pdfDoc.embedStandardFont(
  StandardFonts.Helvetica,
);
const [embeddedRef, embeddedFont] = pdfDoc.embedNonstandardFont(
  /* Uint8Array containing a font file */
);

const fontHeight = 50;

const helveticaFontSize = sizeOfStandardFontAtHeight(
  helveticaFont,
  fontHeight,
);
const helveticaTextWidth = helveticaFont.widthOfTextAtSize(
  'Stuff and things!',
  helveticaFontSize,
);

const embeddedFontSize = sizeOfEmbeddedFontAtHeight(embeddedFont, fontHeight);
const embeddedTextWidth = embeddedFont.widthOfTextAtSize(
  'Stuff and things!',
  embeddedFontSize,
);

const contentStream = pdfDoc.register(
  pdfDoc.createContentStream(
    drawRectangle({
      x: 25,
      y: 25,
      width: helveticaTextWidth,
      height: fontHeight,
      colorRgb: [1, 0.5, 0.5],
    }),
    drawText(helveticaFont.encodeText('Stuff and things!'), {
      x: 25,
      y: 25,
      font: 'Helvetica',
      size: helveticaFontSize,
    }),
    drawRectangle({
      x: 25,
      y: 200,
      width: embeddedTextWidth,
      height: fontHeight,
      colorRgb: [1, 0.5, 0.5],
    }),
    drawText(embeddedFont.encodeText('Stuff and things!'), {
      x: 25,
      y: 200,
      font: 'EmbeddedFont',
      size: embeddedFontSize,
    }),
  ),
);

const page = pdfDoc
  .createPage([500, 500])
  .addFontDictionary('Helvetica', helveticaRef)
  .addFontDictionary('EmbeddedFont', embeddedRef)
  .addContentStreams(contentStream);

pdfDoc.addPage(page);

const pdfBytes = PDFDocumentWriter.saveToBytes(pdfDoc);

The resulting PDF will look a bit different depending on what font you embed. Here's an output PDF using the Ubuntu Regular font: output.pdf

---

Sorry for the very late response on this. I haven't had time to work on these issues the past few weeks. I hope you still find this helpful! I'll probably add some methods to the font objects in a future release of pdf-lib to make this easier.

[Hopding]

Version 0.6.2 is now published. It contains new sizeOfFontForHeight methods on font objects. The full release notes are available here.

You can install this new version with npm:

npm install pdf-lib@0.6.2

It's also available on unpkg:

• https://unpkg.com/pdf-lib@0.6.2/dist/pdf-lib.js
• https://unpkg.com/pdf-lib@0.6.2/dist/pdf-lib.min.js