Type Alias BpxFontConfig

BpxFontConfig: {
    ascent: number;
    descent: number;
    glyphs: Map<string, BpxGlyph>;
    lineGap: number;
    mapGrapheme: ((grapheme: string) => string);
}

A font definition.

Type declaration

  • ascent: number

    An amount of pixels from the baseline (included) to the top-most pixel of font's glyphs.

  • descent: number

    An amount of pixels from the baseline (excluded) to the bottom-most pixel of font's glyphs.

  • glyphs: Map<string, BpxGlyph>

    A map which contains the glyphs for specified graphemes (keys of the map). Grapheme is a user-perceived character like a or a multi-character emoji like ❤️. Before retrieving a glyph from this map, a grapheme is normalized with use of mapGrapheme function. Typically, it would be useful when you want to specify same glyphs for both upper-case and lower-case characters, so you are able to define lower-case ones only and then implement mapGrapheme as grapheme.toLowerCase().

  • lineGap: number

    An amount of pixels between the bottom-most pixel of the previous line (excluded) and the top-most pixel of the next line (excluded).

  • mapGrapheme: ((grapheme: string) => string)

    This functions maps the text grapheme (a user-perceived character like a or a multi-character emoji like ❤️) before trying to find its corresponding glyph in a glyphs map. It would be typically used to call grapheme.toLowerCase() in fonts which have glyphs defined for lower-case characters only.

      • (grapheme): string

      • Parameters

        • grapheme: string

        Returns string

Example

$d.setFont($font({
  ascent: 5,
  descent: 0,
  lineGap: 1,

  mapGrapheme(grapheme: string): string {
    return grapheme.toLowerCase();
  },

  glyphs: new Map<string, BpxGlyph>([
    [" ", { type: "whitespace", advance: 4 }],
    ["0", { type: "sprite", ... }],
    // a lot more glyphs defined here
  ]),
});

See

https://github.com/beetrootpaul/beetpx-examples/tree/main/fonts

Settings