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 install 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#

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.

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

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())
// .####..####..
// #.&&&##.&&&#.
// .&...##&....&
// .######&.....
// #.&&&##&.....
// #&...##&.....
// #&..###&...#.
// .###.#&####.&
// ..&&&.&.&&&&.

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):

const ac_8x8 = ac.enlarge(8, 8)
const ctx = canvas.getContext('2d')
ac_8x8.draw2canvas(ctx)

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

const hello = font.draw('Hello!', {direction: 'rl'}).glow()
hello.draw2canvas(canvas.getContext('2d'))

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

const font_preview = font.drawall()
font_preview.draw2canvas(canvas.getContext('2d'))
Parts of the Unifont preview image (click the image to view the long original)
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