npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kineviz/layout-bmfont-text

v1.4.11

Published

word-wraps and lays out text glyphs

Downloads

57

Readme

layout-bmfont-text

unstable

screenshot

(click for canvas demo)

Provides layout and word-wrapping for left-to-right Latin text, primarily aimed at bitmap font rendering in Canvas/WebGL. The input font should be in the format of BMFont json, see here.

You can use bmfont-lato for testing, or load-bmfont for Node/Browser loading.

var createLayout = require('@kineviz/layout-bmfont-text')
var loadFont = require('load-bmfont')

loadFont('fonts/Arial.fnt', function(err, font) {
  var layout = createLayout({
    font: font,
    text: 'Lorem ipsum dolor\nsit amet',
    width: 300,
    letterSpacing: 2,
    align: 'center'
  })

  //for rendering
  console.log(layout.glyphs)

  //metrics
  console.log(layout.width, layout.height)
  console.log(layout.descender, layout.ascender)
})

Features:

  • uses word-wrapper for layout
    • supports "pre" and "nowrap" modes (like CSS)
    • breaks on explicit newline characters "\n"
  • handles "left", "center" and "right" alignments
  • handles kerning, letter spacing, line height
  • handles space and tab widths
  • provides computed bounds of resulting text box
  • provides metrics for ascender, descender, x-height, etc

Comments/suggestions/PRs welcome.

Usage

NPM

layout = createLayout(opt)

Creates a new layout with the given options.

  • font (required) the BMFont definition which holds chars, kernings, etc
  • text (string) the text to layout. Newline characters (\n) will cause line breaks
  • width (number, optional) the desired width of the text box, causes word-wrapping and clipping in "pre" mode. Leave as undefined to remove word-wrapping (default behaviour)
  • mode (string) a mode for word-wrapper; can be 'pre' (maintain spacing), or 'nowrap' (collapse whitespace but only break on newline characters), otherwise assumes normal word-wrap behaviour (collapse whitespace, break at width or newlines)
  • align (string) can be "left", "center" or "right" (default: left)
  • letterSpacing (number) the letter spacing in pixels (default: 0)
  • lineHeight (number) the line height in pixels (default to font.common.lineHeight)
  • tabSize (number) the number of spaces to use in a single tab (default 4)
  • start (number) the starting index into the text to layout (default 0)
  • end (number) the ending index (exclusive) into the text to layout (default text.length)

layout.update(opt)

Updates the layout, all options are the same as in constructor.

layout.glyphs

An array of laid out glyphs that can be used for rendering. Each glyph looks like this:

{
    index: Number,    //the index of this glyph into the string
    data: {...},      //the BMFont "char" object for this glyph
    position: [x, y], //the baseline position to render this glyph
    line: Number      //the line index this glyph appears in
}

All positions are relative to the bottom-left baseline of the text box (i.e. the last line).

layout.width

The width of the text box, or the width provided in constructor.

layout.height

The height of the text box; from baseline to the top of the ascender.

metrics

layout.baseline

The baseline metric: measures top of text layout to the baseline of the first line.

layout.xHeight

The x-height metric; the height of a lowercase character. Uses the first available height of the common lowercase Latin "x-chars", such as 'x', 'u', 'v', 'w', 'z'.

layout.descender

The metric from baseline to the bottom of the descenders (like the bottom of a lowercase "g").

layout.ascender

The metric for ascenders; typically from the top of x-height to the top of the glyph height.

layout.capHeight

The cap height metric; the height of a flat uppercase letter like 'H' or 'I'. Uses the frist available height of common uppercase Latin flat capitals, such as 'H', 'I', 'E', 'T', 'K'.

layout.lineHeight

The line height; the height from one baseline to the next. This is what was passed as opt.lineHeight, or defaults to the font.common.lineHeight.

License

MIT, see LICENSE.md for details.