Options
All
  • Public
  • Public/Protected
  • All
Menu

Class FontFace

Font related data for glyph based text rendering. The glyph-based font face is described by, e.g., font-size, line spacing, a glyph catalogue, as well as kerning information. The glyph catalogue is based on a set of glyphs referring to a texture atlas (@see {@link Glyph}). All measures are provided in float even though most glyph-textures and associated font data is encoded via integer values. A font face explicitly relies on floating values to reduce the need of casting as well as to simplify the use for dpi aware text rendering. The font face interface is designed to access most basic font settings ascent, descent, and line gap (leading). Additional font settings are provided via interface but are derived from or mapped to the above mentioned three settings, e.g., font size is the sum of descent and ascent. This is to provide as much convenience measures for type setting/font rendering as possible. Note: This class does not provide dpi awareness, which has to be handled outside of this class, e.g., during layouting and rendering.

A font can be loaded as follows:

let fontFace: FontFace | undefined;
FontFace.fromFile(context, './data/opensansr144.fnt').then((value) => fontFace = value);

Hierarchy

  • FontFace

Index

Constructors

constructor

  • Constructs an unconfigured, empty font face specification. The appropriate setters should be used for configuring the font face. Alternatively, the font importer (@see {@link FontImporter}) provides the import of bitmap-font base configuration file (http://www.angelcode.com/products/bmfont/).

    Parameters

    • context: Context

      Valid context to create the object for.

    • Optional identifier: string

      Meaningful name for identification of this instances VAO and VBOs.

    Returns FontFace

Properties

Protected _ascent

_ascent: number = 0.0
see

ascent

Protected _base

_base: number
see

base

Protected _context

_context: Context

Protected _descent

_descent: number = 0.0
see

descent

Protected _glyphTexture

_glyphTexture: Texture2D

Protected _glyphTextureExtent

_glyphTextureExtent: GLfloat2 = ...

Protected _glyphTexturePadding

_glyphTexturePadding: GLfloat4 = ...

Protected _glyphs

_glyphs: Map<number, Glyph> = ...

Map associating a glyph index to a glyph (sub image of a texture).

see

glyph, @see hasGlyph, @see addGlyph

Protected _lineGap

_lineGap: number = 0.0
see

lineGap

Protected _size

_size: number
see

size

Accessors

ascent

  • get ascent(): number
  • set ascent(ascent: number): void
  • Set the font's ascent in texture space (px). The ascent is the distance from the baseline to the tops of the tallest glyphs (ascender) in pixel.

    The distance from the baseline to the topmost ascender in pixel.

    Returns number

  • Set the font's ascent in texture space (px). The ascent is the distance from the baseline to the tops of the tallest glyphs (ascender) in pixel.

    Parameters

    • ascent: number

      The distance from the baseline to the topmost ascender in pixel.

    Returns void

base

  • get base(): number
  • set base(base: number): void
  • Set the font's base in texture space (px). The base is the distance from the baseline to the top in pixel.

    The distance from the baseline to the top of the line in pixel.

    Returns number

  • Set the font's base in texture space (px). The base is the distance from the baseline to the top in pixel.

    Parameters

    • base: number

      The distance from the baseline to the top of the line in pixel.

    Returns void

descent

  • get descent(): number
  • set descent(descent: number): void
  • Set the font's descent in texture space (px). The descent is the distance from the baseline to the lowest descender in pixel. Please note that this value is usually negative (if the fonts lowest descender is below the baseline).

    The distance from the baseline to the lowest descender in pixel.

    Returns number

  • Set the font's descent in texture space (px). The descent is the distance from the baseline to the lowest descender in pixel. Please note that this value is usually negative (if the fonts lowest descender is below the baseline).

    Parameters

    • descent: number

      The distance from the baseline to the lowest descender in pixel.

    Returns void

glyphTexture

  • The font face's associated glyph atlas. All glyph data is associated to this texture atlas.

    Returns Texture2D

  • The font face's associated glyph atlas. All glyph data is associated to this texture atlas.

    Parameters

    • texture: Texture2D

      The new texture atlas for all glyphs

    Returns void

glyphTextureExtent

  • get glyphTextureExtent(): GLsizei2
  • set glyphTextureExtent(extent: GLsizei2): void

glyphTexturePadding

  • get glyphTexturePadding(): GLfloat4
  • set glyphTexturePadding(padding: GLfloat4): void
  • The padding applied to every glyph in px. This can only be set via setGlyphTexture.

    Returns GLfloat4

  • The padding applied to every glyph in px. This can only be set via setGlyphTexture.

    Parameters

    • padding: GLfloat4

      CSS style (top, right, bottom, left) padding applied to every glyph within the texture in px.

    Returns void

lineGap

  • get lineGap(): number
  • set lineGap(lineGap: number): void
  • Set the font's leading/linegap in texture space (px). The leading is the distance from the lowest descender to the topmost ascender of a subsequent text line in pixel.

    The gap between two subsequent lines of text in pixel.

    Returns number

  • Set the font's leading/linegap in texture space (px). The leading is the distance from the lowest descender to the topmost ascender of a subsequent text line in pixel.

    Parameters

    • lineGap: number

      The gap between two subsequent lines of text in pixel.

    Returns void

lineHeight

  • get lineHeight(): number
  • set lineHeight(lineHeight: number): void
  • Set the baseline-to-baseline distance in texture space (px). Negative values will result in negative linegap. The line height is derived as follows: line_height = size + line_gap, or alternatively: line_height = size * line_space

    The line height (baseline-to-baseline distance) in pixel.

    Returns number

  • Set the baseline-to-baseline distance in texture space (px). Negative values will result in negative linegap. The line height is derived as follows: line_height = size + line_gap, or alternatively: line_height = size * line_space

    Parameters

    • lineHeight: number

      The line height (baseline-to-baseline distance) in pixel.

    Returns void

lineSpace

  • get lineSpace(): number
  • set lineSpace(lineSpace: number): void
  • The relative baseline-to-baseline distance w.r.t. the font's size. The relative line space is derived as follows: line_space = size / line_height; Note that the descent is usually a negative value.

    Returns number

    • The relative baseline-to-baseline distance w.r.t. the font's size.
  • Set the relative baseline-to-baseline distance w.r.t. the font's size. The line space is mapped to line gap as follows: line_gap = size * (line_space - 1). A space < 1.0 will result in a negative line gap.

    Parameters

    • lineSpace: number

      The relative baseline-to-baseline distance w.r.t. the font's size.

    Returns void

size

  • get size(): number
  • set size(size: number): void
  • The size of the font in texture space (px).

    Returns number

    • The font size in texture space (px).
  • The size of the font in texture space (px).

    Parameters

    • size: number

    Returns void

    • The font size in texture space (px).

Methods

addGlyph

  • addGlyph(glyph: Glyph): void
  • Add a glyph to the font face's set of glyphs. If the glyph already exists, the existing glyph remains.

    Parameters

    • glyph: Glyph

      The glyph to add to the set of glyphs.

    Returns void

arrayOfGlyphIndices

  • arrayOfGlyphIndices(): number[]
  • Generates aan array of all comprised glyph indices.

    Returns number[]

    • An array of all glyph indices available to this font face.

depictable

  • depictable(index: number): boolean
  • Check if a glyph is depictable/renderable. If the glyph's sub-texture vertical or horizontal extent is zero the glyph does not need to be depicted/rendered. E.g., spaces, line feeds, other control sequences as well as unknown glyphs do not need to be processed for rendering.

    Parameters

    • index: number

      Index of the glyph to access.

    Returns boolean

    • Returns true if the glyph needs to be depicted/rendered.

glyph

  • glyph(index: number): Glyph
  • Direct access to an indexed glyph. If the glyph does not exist, an empty glyph is returned without adding it to glyphs. The glyph atlas might be loaded asynchronously, thus, new glyphs are expected to be added via addGlyph.

    Parameters

    • index: number

      Index of the glyph to access.

    Returns Glyph

    • Glyph with the matching index or an empty glyph, if index has not match

hasGlyph

  • hasGlyph(index: number): boolean
  • Check if a glyph of a specific index is available.

    Parameters

    • index: number

      Index of the glyph to access.

    Returns boolean

    • True if a glyph for the provided index was added.

kerning

  • kerning(index: number, subsequentIndex: number): number
  • Kerning for a glyph and a subsequent glyph in texture space (px). If the glyph or the subsequent glyph are unknown to this font face (assertion), 0.f will be returned. For more details on kerning, refer to the Glyph class.

    Parameters

    • index: number

      The current glyph index (e.g., of the current pen-position).

    • subsequentIndex: number

      The glyph index of the subsequent/next glyph.

    Returns number

    • The kerning (usually negative) between the two glyphs in px. If either on of the glyphs is unknown to this font face or no specific kerning for the glyph pair is available a zero kerning is returned.

setKerning

  • setKerning(index: number, subsequentIndex: number, kerning: number): void
  • Set the kerning for a glyph w.r.t. to a subsequent glyph in texture space (px). If the glyph is known to this font face, the values are forwarded to the glyphs kerning setter (see Glyph for more information).

    Parameters

    • index: number

      The target glyph index.

    • subsequentIndex: number

      The glyph index of the respective subsequent/next glyph.

    • kerning: number

      Kerning of the two glyphs in pixel.

    Returns void

Static fromFile

  • fromFile(url: string, context: Context, headless?: boolean, identifier?: string): Promise<FontFace>
  • Fetches a font face file, and, if successful, processes it and fetches referenced pages.

    Resolving the promise:

    let fontFace: FontFace | undefined;
    FontFace.fromFile(context, './data/opensansr144.fnt').then((value) => fontFace = value);
    

    Parameters

    • url: string

      Uniform resource locator string referencing the fnt-file that should be loaded.

    • context: Context

      Valid context to create the object for.

    • headless: boolean = false

      Whether or not to enable headless mode. If enabled, pages are not loaded.

    • Optional identifier: string

      Meaningful name/prefix for identification of fetched pages (glyph atlases).

    Returns Promise<FontFace>

Static fromFiles

  • fromFiles(fontFileUrl: string, pageFileUrlsByPageID: Map<number, string>, context: Context, headless?: boolean, identifier?: string): Promise<FontFace>
  • Parameters

    • fontFileUrl: string
    • pageFileUrlsByPageID: Map<number, string>
    • context: Context
    • headless: boolean = false
    • Optional identifier: string

    Returns Promise<FontFace>