How to Handle Deprecated `<font>` Tags in html-to-pdfmake

html-to-pdfmake automatically converts deprecated <font> tags to PDFMake styles by mapping the color attribute directly and translating size attributes (1-7) to point sizes via a configurable array.

The aymkdn/html-to-pdfmake library maintains backward compatibility with legacy HTML content that uses the obsolete <font> element. While modern HTML5 standards deprecate this tag, the parser seamlessly translates its attributes into equivalent PDFMake style properties during document generation.

How html-to-pdfmake Processes Deprecated <font> Tags

The conversion engine inspects <font> elements during the DOM traversal and extracts specific presentation attributes.

Mapping the color Attribute

When the parser encounters a color attribute on a <font> tag, it extracts the value in the parseStyle function (located at line 781 in index.js). The value passes through parseColor and stores directly as the PDFMake color property.

Converting size Attributes to Point Sizes

The size attribute handling occurs in the same parseStyle block (lines 781-792). The parser:

1. Extracts the numeric size value
2. Clamps it to the valid range of 1-7 (matching legacy browser behavior)
3. Looks up the corresponding point size in the fontSizes array (defined at lines 55-56)
4. Assigns the result to the fontSize property

// index.js – size handling (excerpt)
if (size !== null) {
  // clamp size between 1 and 7
  size = Math.min(Math.max(1, parseInt(size)), 7);
  // map to a point size using the fontSizes array
  ret.push({key:'fontSize',
            value:Math.max(this.fontSizes[0], this.fontSizes[size - 1])});
}

The default fontSizes array maps size 1 to 10 pt and size 7 to 28 pt: [10, 14, 16, 18, 20, 24, 28].

Customizing <font> Tag Conversion Behavior

You can override the default handling through the options object passed to the converter.

Overriding Default Font Sizes

Pass a custom fontSizes array to change how numeric size values translate to points:

const customSizes = [8, 10, 12, 14, 16, 18, 20]; // 1 → 8 pt, …, 7 → 20 pt

const pdfDef = htmlToPdfMake(html, { window, fontSizes: customSizes });

Now size="4" produces fontSize: 14 instead of the default 18 pt.

Disabling <font> Tag Support Entirely

To ignore legacy <font> elements and prevent them from generating styles, provide a customTag handler that returns null for these elements:

const pdfDef = htmlToPdfMake(html, {
  window,
  customTag({ element }) {
    if (element.nodeName.toUpperCase() === 'FONT') {
      // Skip the element completely
      return null;
    }
    // otherwise fall back to default handling
    return this.parseElement(element, []);
  }
});

Alternatively, strip <font> tags from the HTML string before passing it to the converter.

Practical Code Examples

Basic Conversion of a <font> Tag

const htmlToPdfMake = require('html-to-pdfmake');
const { JSDOM } = require('jsdom');
const { window } = new JSDOM('').window;

// Simple HTML containing a <font> tag
const html = `
  <p>Normal text </p>
  <font color="#ff0033" size="4">Deprecated font element</font>
`;

const pdfDef = htmlToPdfMake(html, { window });
console.log(JSON.stringify(pdfDef, null, 2));

Result (relevant fragment):

{
  "text": [
    { "text": "Normal text " },
    {
      "text": "Deprecated font element",
      "color": "#ff0033",
      "fontSize": 18
    }
  ]
}

Source references – parsing of color/size in parseStyle at lines 781-792 and default size map at lines 55-56 in index.js.

Key Source Files and Implementation Details

File	Role	Link
index.js	Core conversion engine – parses HTML, handles <font> attributes, defines default fontSizes	src/index.js
test/unit.js	Unit tests that verify <font> color and size handling (<font color="#ff0033" size="4">)	test/unit.js
example.js	Demonstrates library usage, including a <font> tag in the sample HTML	example.js

These files demonstrate how the library supports the deprecated <font> element, how you can customize its behavior, and how to test or demo it in your own projects.

Summary

• html-to-pdfmake preserves legacy <font> tags by converting their attributes to PDFMake styles.
• The color attribute maps directly to the PDFMake color property via parseColor.
• The size attribute clamps to the range 1-7 and maps to point sizes using the configurable fontSizes array (default: 10 pt to 28 pt).
• Override default sizes by passing a custom fontSizes array in the options object.
• Disable <font> handling entirely by providing a customTag handler that returns null for these elements.

Frequently Asked Questions

Does html-to-pdfmake support all <font> attributes?

No. The library only processes the color and size attributes. Other deprecated attributes such as face (font family) are ignored during conversion. If you need to customize font families, use inline CSS styles or PDFMake style definitions instead.

What is the default font size mapping for <font size="n">?

By default, the library uses the array [10, 14, 16, 18, 20, 24, 28], where index 0 corresponds to size="1" (10 pt) and index 6 corresponds to size="7" (28 pt). The parser clamps input values outside the 1-7 range to the nearest valid boundary before indexing.

Can I completely ignore deprecated <font> tags during conversion?

Yes. Provide a customTag function in the options object that detects <font> elements and returns null. This prevents the parser from generating any PDFMake nodes for those elements. Alternatively, preprocess your HTML to strip <font> tags before passing the string to the converter.

Where is the <font> tag parsing logic located in the source code?

The attribute extraction occurs in the parseStyle function within index.js at lines 781-792. The default size mapping array is defined at lines 55-56 in the same file. Unit tests validating this behavior reside in test/unit.js, which includes test cases for both color and size attributes.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}