BDF Parser Live Code Editor

Live Editor

<BDF func={
  (font, {Font, Glyph, Bitmap, $Font, $Glyph, $Bitmap}) => {
    return font.draw('Hello! άßç й的のةُक!', {linelimit: 300}).glow(1)
  }
}/>

<BDF func={
  (font, {Font, Glyph, Bitmap, $Font, $Glyph, $Bitmap}) => {
    return font.draw('Hello! άßç й的のةُक!', {linelimit: 300}).glow(1)
  }
}/>

Result

Welcome to the BDF Parser Live Demo & Code Editor. Feel free to edit the code. The result will be shown immediately.

The font parameters of the inner function is a Font instance that's already loaded a BDF font file. The other parameter is an object containing { Font, Glyph, Bitmap }, which refer to the three classes of the BDF Parser library.

The return value of the inner function should be an instantiated Bitmap object you want to render. The result image is an HTML <canvas> element, you can right click on it and select "Save image as...". The shown result image on this webpage is by default bigger (width & height x 2) than the actual image you may download, this can be changed via size prop (see below).

By default, it loads unifont-reduced.bdf file, a reduced version of unifont-13.0.04.bdf (GNU Unifont v13.0.04 released on 2020-11-21). unifont-reduced.bdf includes 5441 glyphs in total.

unifont-reduced.bdf coverage detail

U+0000-U+13FF
U+3040-U+309F (Hiragana), U+30A0-U+30FF (Katakana)
The most commonly used Simplified and Traditional Chinese characters which are 的, 一, 是, 不, 了, 人, 我, 在, 有, 他, 这, 为, 之, 大, 来, 以, 个, 中, 上, 们, 到, 说, 国, 和, 地, 也, 子, 时, 道, 出, 而, 要, 于, 就, 下, 得, 可, 你, 年, 生, 自, 会, 那, 后, 能, 对, 着, 事, 其, 里, 所, 去, 行, 过, 家, 十, 用, 发, 天, 如, 然, 作, 方, 成, 者, 多, 日, 都, 三, 小, 军, 二, 无, 同, 么, 经, 法, 当, 起, 与, 好, 看, 学, 进, 种, 将, 还, 分, 此, 心, 前, 面, 又, 定, 见, 只, 主, 没, 公, 从, 這, 爲, 來, 個, 們, 說, 國, 時, 於, 會, 後, 對, 裏, 過, 發, 軍, 無, 麼, 經, 當, 與, 學, 進, 種, 將, 還, 見, 沒, 從

You can also paste <BDF size={1} func={(font) => font.drawall()}/> into the editor to draw all glyphs of the font.

See also Wikipedia article: Unicode block # List of blocks

By default, glyphs / foreground (1) are black, shadow or glowing effect areas (2) are painted red, background (0) is not painted (transparent).

If you want to customize the font file, the color of pixels, and the size multiplier, you can add fontfile, pixelcolors and size props to the <BDF> React components:

Example with fontfile, pixelcolors and size props set to default values (click to show, then copy and paste it into the editor)

<BDF
fontfile='https://font.tomchen.org/bdfparser_fonts/unifont-reduced.bdf'
pixelcolors={{
  0: null,
  1: 'black',
  2: 'red',
}}
size={2}
func={
  (font, {Font, Glyph, Bitmap, $Font, $Glyph, $Bitmap}) => {
    return font.draw('Hello! άßç й的のةُक!', {linelimit: 300}).glow(1)
  }
}/>