Skip to content

BDF (Glyph Bitmap Distribution) format bitmap font file parser library in TypeScript (JavaScript) πŸ”£πŸ“œ

License

Notifications You must be signed in to change notification settings

tomchen/bdfparser-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

71a4ee3 Β· Sep 15, 2021

History

21 Commits
Sep 15, 2021
Feb 14, 2021
Feb 6, 2021
Sep 15, 2021
Feb 6, 2021
Feb 6, 2021
Feb 1, 2021
Jan 28, 2021
Feb 6, 2021
Jan 28, 2021
Feb 14, 2021
Jan 28, 2021
Feb 14, 2021
Sep 15, 2021
Feb 14, 2021
Jan 31, 2021
Sep 15, 2021
Feb 2, 2021
Sep 15, 2021

Repository files navigation

BDF Parser TypeScript (JavaScript) library

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 dependencies and tested in Node.js Node.js, browsers Google ChromeFirefoxSafariMicrosoft EdgeOperaSamsung Internet (so you can use HTML Canvas) and Deno Deno, it has detailed documentation / tutorials / API reference.

npm package version number Actions Status Node.js Deno License

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.

You can even try the Live Demo & Code Editor!

BDF Parser Live Demo & Code Editor

Below I'll show you some quick examples, but it is still strongly recommended you go to BDF Parser TypeScript (JavaScript) library's official website to read the detailed documentation / tutorials / API reference.

Install bdfparser TypeScript (JavaScript) library with npm (or yarn add ...):

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 my Fetch Line JavaScript packages.

Non type checked CommonJS example (read doc for its strict TypeScript ES module code):

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.`)

# =================================

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()
const ac_8x8 = ac.enlarge(8, 8)
ac_8x8.draw2canvas(document.getElementById('mycanvas').getContext('2d'))

# =================================

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

# =================================

const font_preview = font.drawall()
font_preview.draw2canvas(document.getElementById('mycanvas3').getContext('2d'))

})()

If you are using Deno instead of Node.js, you don't need to install the package with npm/yarn, and you should replace const { $Font } = require('bdfparser'); const getline = require('readlineiter') by:

import { $Font } from "https://raw.githubusercontent.com/tomchen/bdfparser-js/main/deno/mod.ts"
import readlineiter from 'https://raw.githubusercontent.com/tomchen/fetchline/main/packages/readlineiter-deno/mod.ts'