BDF Parser (TypeScript / JavaScript library)

Introduction

This is a BDF (Glyph Bitmap Distribution; Wikipedia; Spec) format bitmap font file parser library in TypeScript (JavaScript). It has Font, Glyph and Bitmap classes providing more than 30 chainable API methods of parsing BDF fonts, getting their meta information, rendering text in any writing direction, adding special effects and manipulating bitmap images. 0 dependency and tested in Node.js, browsers (so you can use HTML Canvas) and Deno, it has detailed documentation / tutorials / API reference.

You can even try the Live Demo & Code Editor!

BDF Parser TypeScript (JavaScript) library (documentation; GitHub page; npm page; npm i bdfparser) is a port of BDF Parser Python library (documentation; GitHub page; PyPI page; pip install bdfparser). Both are written by Tom Chen and under the MIT License.

Installation

npm

npm install bdfparser readlineiter

Yarn

yarn add bdfparser readlineiter

readlineiter is used for Node.js to read local file. You can instead use fetchline for browsers/Deno to fetch remote file. See Fetch Line JavaScript packages.

Quick examples

JavaScript (CJS)

const { $Font } = require('bdfparser')

const getline = require('readlineiter')

;(async () => {

const font = await $Font(getline('./test/fonts/unifont-13.0.04.bdf'))

console.log(`This font's global size is \

${font.headers.fbbx} x ${font.headers.fbby} (pixel), \

it contains ${font.length} glyphs.`)

})()

// This font's global size is 16 x 16 (pixel), it contains 57086 glyphs.

TypeScript (strict)

import { $Font } from 'bdfparser'

import getline from 'readlineiter'

;(async () => {

try {

const font = await $Font(getline('./test/fonts/unifont-13.0.04.bdf'))

if (!font || !font.headers) {

throw new Error('Unable to load font')

}

console.log(`This font's global size is \

${font.headers.fbbx} x ${font.headers.fbby} (pixel), \

it contains ${font.length} glyphs.`)

} catch (error) {

throw error

}

})()

// This font's global size is 16 x 16 (pixel), it contains 57086 glyphs.

Python

Python code is included here only for comparison. See Python library's documentation for details

from bdfparser import Font

font = Font('tests/fonts/unifont-13.0.04.bdf')

print(f"This font's global size is "

f"{font.headers['fbbx']} x {font.headers['fbby']} (pixel), "

f"it contains {len(font)} glyphs.")

# This font's global size is 16 x 16 (pixel), it contains 57086 glyphs.

Print cropped and combined "a" and "c" with shadow effect:

JavaScript (CJS)

const a = font.glyph('a')

const c = font.glyph('c')

const ac = a

.draw()

.crop(6, 8, 1, 2)

.concat(c.draw().crop(6, 8, 1, 2))

.shadow()

console.log(ac.toString())

// .####..####..

// #.&&&##.&&&#.

// .&...##&....&

// .######&.....

// #.&&&##&.....

// #&...##&.....

// #&..###&...#.

// .###.#&####.&

// ..&&&.&.&&&&.

TypeScript (strict)

const a = font.glyph('a')

const c = font.glyph('c')

if (a && c) {

const ac = a

.draw()

.crop(6, 8, 1, 2)

.concat(c.draw().crop(6, 8, 1, 2))

.shadow()

console.log(ac.toString())

}

// .####..####..

// #.&&&##.&&&#.

// .&...##&....&

// .######&.....

// #.&&&##&.....

// #&...##&.....

// #&..###&...#.

// .###.#&####.&

// ..&&&.&.&&&&.

Python

ac = font.glyph("a").draw().crop(6, 8, 1, 2).concat(

font.glyph("c").draw().crop(6, 8, 1, 2)

).shadow()

print(ac)

# .####..####..

# #.&&&##.&&&#.

# .&...##&....&

# .######&.....

# #.&&&##&.....

# #&...##&.....

# #&..###&...#.

# .###.#&####.&

# ..&&&.&.&&&&.

Get an enlarged version (8 times both width and height) of this "ac", and render it in HTML <canvas> in browser with JavaScript / TypeScript (or with PIL (Pillow) library in Python):

JavaScript (CJS)

const ac_8x8 = ac.enlarge(8, 8)

const ctx = canvas.getContext('2d')

ac_8x8.draw2canvas(ctx)

TypeScript (strict)

const ac_8x8 = ac.enlarge(8, 8)

const ctx = canvas.getContext('2d')

ac_8x8.draw2canvas(ctx)

Python

ac_8x8 = ac * 8

from PIL import Image

im_ac = Image.frombytes('RGBA',

(ac_8x8.width(), ac_8x8.height()),

ac_8x8.tobytes('RGBA'))

im_ac.save("ac.png", "PNG")

Get text "Hello!", from right to left, with glowing effect:

JavaScript (CJS)

const hello = font.draw('Hello!', {direction: 'rl'}).glow()

hello.draw2canvas(canvas.getContext('2d'))

TypeScript (strict)

const hello = font.draw('Hello!', {direction: 'rl'}).glow()

hello.draw2canvas(canvas.getContext('2d'))

Python

hello = font.draw('Hello!', direction='rl').glow()

Save all glyphs in Unifont as a black-and-white-two-color-only "font_preview.png" (with default width 512px):

JavaScript (CJS)

const font_preview = font.drawall()

font_preview.draw2canvas(canvas.getContext('2d'))

TypeScript (strict)

const font_preview = font.drawall()

font_preview.draw2canvas(canvas.getContext('2d'))

Python

font_preview = font.drawall()

im_ac = Image.frombytes(

'1',

(font_preview.width(), font_preview.height()),

font_preview.tobytes('1'),

)

im_ac.save('font_preview.png', 'PNG')

Parts of the Unifont preview image (click the image to view the long original)

Now try it your self. Copy and paste this into the Live Demo & Code Editor:

<BDF func={

(font) => {

return font.draw('Hello World!', {linelimit: 100, direction: 'tblr'})

.enlarge(3, 3).shadow(2, -2)

}

}/>

Or even this:

<BDF size={1} func={(font) => font.drawall()}/>

Copyright & links

Written by Tom Chen, under the MIT License, a permissive open-source license.

This TypeScript / JavaScript library supports Node.js, Deno and modern browsers. It has TypeScript source code, as well as compiled versions in CommonJS, ES module, minified UMD and seperate type definition files.

GitHub repo | npm page

The documentation belongs to font.tomchen.org, a website where I put font & typography related stuff. The documentation website's GitHub repo