Git Product home page Git Product logo

bdf.js's Introduction

BDF.js

Simple library for reading Adobe Glyph Bitmap Distribution font files. Read more about this format on Wikipedia.

Install

npm install bdf

How to use

var font = new BDF();
font.load("c64.bfd", function() {
  console.log(font);
});

An example Commodore 64 8x8 point font is included.

API

  • Constructor BDF()

Initializes a BDF font instance.

  • load(path, callback)

Loads font data from a file. The first path argument specifies the path to the BDF font file. The callback function is invoked once the font is loaded. A single error argument is passed if there was an error finding the file.

  • loadSync(path)

Similar to load, but synchronous.

  • meta (property)

An object containing metadata about the font once loaded. This includes the font version, name, size and several other properties.

Example meta object:

{
  version: '2.1',
  name: 'c64',
  size: { points: 8, resolutionX: 75, resolutionY: 75 },
  boundingBox: { width: 8, height: 8, x: 0, y: -2 },
  properties: { fontDescent: 2, fontAscent: 6, defaultChar: 0 },
  totalChars: 95
}
  • glyphs (property)

An object containing data for every glyph in the font. Each key in this object represents the character encoding.

Example glyphs object:

{
  ...
  '64': { ... }
  '65': {
    name: 'C0001',
    bytes: [Object],
    bitmap: [Object],
    code: 65,
    char: 'A',
    scalableWidthX: 666,
    scalableWidthY: 0,
    deviceWidthX: 8,
    deviceWidthY: 0,
    boundingBox: { x: 0, y: -2, width: 8, height: 8 }
  }
  '66': { ... }
  ...
}

The bitmap object corresponding to each glyph contains a matrix of 1s and 0s defining the shape of the glyph in the bounding box. Example bitmap object, for the character 'A' with code 65: (the spaces are 0s, left out in the example below to make it clearer)

[
  [       1 1       ],
  [     1 1 1 1     ],
  [   1 1     1 1   ],
  [   1 1 1 1 1 1   ],
  [   1 1     1 1   ],
  [   1 1     1 1   ],
  [   1 1     1 1   ],
  [                 ]
]

The bytes object corresponding to each glyph is similar to the bitmap object, but each series of eight 1s and 0s on a row is encoded in a byte, instead of being laid out as 1s and 0s in an array. Example bytes object, for the character 'A' with code 65: [ 24, 60, 102, 126, 102, 102, 102, 0 ]

  • toString()

Creates and returns a string containing all the characters in this font.

  • writeText(text, options)

Convenient way of creating a matrix concatenating bitmap information for several glyphs in this font. The first parameter, text is a string containing the text to convert to a bitmap. The optional options object contains a couple of flags for writing the text: textRepeat (a number specifying how many times the text repeats) and kerningBias (a number consistently added to the glyph width when building the bitmap).

This method returns an object containing bitmap information. Number keys like 0, 1, 2... correspond to bitmap rows, which are arrays of bits. The width and height properties define the bitmap bounds.

bdf.js's People

Contributors

victorporof avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.