https://github.com/tomchen/bdfparser-js

BDF (Glyph Bitmap Distribution) format bitmap font file parser library in TypeScript (JavaScript) 🔣📜
https://github.com/tomchen/bdfparser-js

bdf bdf-font bdf-fonts bdf-format bitmap bitmap-font bitmap-fonts browser deno font node parser typescript

Last synced: about 2 months ago
JSON representation

BDF (Glyph Bitmap Distribution) format bitmap font file parser library in TypeScript (JavaScript) 🔣📜

• Host: GitHub
• URL: https://github.com/tomchen/bdfparser-js
• Owner: tomchen
• License: mit
• Created: 2021-01-31T22:31:16.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-07T16:32:38.000Z (4 months ago)
• Last Synced: 2025-02-25T23:34:47.714Z (2 months ago)
• Topics: bdf, bdf-font, bdf-fonts, bdf-format, bitmap, bitmap-font, bitmap-fonts, browser, deno, font, node, parser, typescript
• Language: TypeScript
• Homepage: https://font.tomchen.org/bdfparser_js/
• Size: 2.57 MB
• Stars: 18
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-typography - bdfparser-js - BDF (Glyph Bitmap Distribution) format bitmap font file parser library in TypeScript (JavaScript). (JavaScript)

README

        
# BDF Parser TypeScript (JavaScript) library

BDF (Glyph Bitmap Distribution; [Wikipedia](https://en.wikipedia.org/wiki/Glyph_Bitmap_Distribution_Format); [Spec](https://font.tomchen.org/bdf_spec/)) format bitmap font file parser library in TypeScript (JavaScript). It has [`Font`](https://font.tomchen.org/bdfparser_js/font), [`Glyph`](https://font.tomchen.org/bdfparser_js/glyph) and [`Bitmap`](https://font.tomchen.org/bdfparser_js/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 , browsers  (so you can use HTML Canvas) and Deno , it has detailed documentation / tutorials / API reference.

[![npm package](https://img.shields.io/badge/npm%20i-bdfparser-brightgreen)](https://www.npmjs.com/package/bdfparser) [![version number](https://img.shields.io/npm/v/bdfparser?color=green&label=version)](https://github.com/tomchen/bdfparser/releases) [![Actions Status](https://github.com/tomchen/bdfparser/workflows/Test/badge.svg)](https://github.com/tomchen/bdfparser/actions) [![Node.js](https://img.shields.io/badge/node-%3E=12.0-brightgreen.svg?logo=node.js)](https://nodejs.org/) [![Deno](https://img.shields.io/badge/deno-%3E=1.13.0-white.svg?logo=deno)](https://deno.land/x/bdfparser) [![License](https://img.shields.io/github/license/tomchen/bdfparser)](https://github.com/tomchen/bdfparser/blob/main/LICENSE)

**BDF Parser TypeScript (JavaScript) library** ([documentation](https://font.tomchen.org/bdfparser_js/); [GitHub page](https://github.com/tomchen/bdfparser-js); [npm page](https://www.npmjs.com/package/bdfparser); `npm i bdfparser`) is a port of **BDF Parser Python library** ([documentation](https://font.tomchen.org/bdfparser_py/); [GitHub page](https://github.com/tomchen/bdfparser); [PyPI page](https://pypi.org/project/bdfparser/); `pip install bdfparser`). Both are written by [Tom Chen](https://github.com/tomchen/) and under the MIT License.

You can even try the [**Live Demo & Code Editor**](https://font.tomchen.org/bdfparser_js/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**](https://font.tomchen.org/bdfparser_js/).

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

```bash

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](https://github.com/tomchen/fetchline).

Non type checked CommonJS example (read [doc](https://font.tomchen.org/bdfparser_js/) for its strict TypeScript ES module code):

```js

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:

```ts

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'

```