Registry / web-framework / server-text-width

server-text-width

JSON →
library1.0.2jsnpmunverified

server-text-width is a utility library designed for server-side environments, specifically Node.js, to accurately calculate the pixel width of text. Unlike browser-based solutions that leverage Canvas or DOM elements, this package operates without a browser environment by relying on pre-generated lookup tables. This capability is crucial for server-side rendering (SSR) scenarios where text needs to be trimmed, aligned, or used in layout calculations without client-side dependencies. The current stable version is 1.0.2, indicating a nascent but stable 1.x release series. Its key differentiators include zero runtime dependencies, full Unicode support, compatibility with custom fonts, and a highly compact base64 encoding for character width data. Developers must use an included `mappingTool.html` to generate these character width lookup tables for their specific fonts, sizes, and weights, which are then passed to the library's `init` function. This approach ensures consistent text measurement results across environments and allows for precise control over font metrics.

npm install server-text-width
INSTALL
IMPORT
SIG · SERVER-TEXT-WIDTH
S
server-text-width
web-frameworkjavascriptv1.0.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

init
import { init } from 'server-text-width';
const { init } = require('server-text-width');
The library primarily uses ESM imports; CommonJS `require` is not officially supported and may lead to issues in modern Node.js environments.
getTextWidth
const { getTextWidth } = init(lookupTable);
`getTextWidth` is a function returned by the `init` function after initialization with a lookup table. It is not directly imported from the package.

This quickstart demonstrates how to initialize the `server-text-width` library with a pre-generated lookup table and then use the `getTextWidth` function to calculate the pixel width of various strings with specified font styles. It highlights the manual setup required for the lookup table.

const TEXT_WIDTH_LOOKUP_TABLE = { // This is a highly truncated example. In a real application, this table // would be much larger and generated using the 'mappingTool.html' provided // with the package, covering all necessary fonts, sizes, weights, and Unicode ranges. "Arial|16px|normal|0": "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA", "Times|32px|bold|0": "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" }; import { init } from 'server-text-width'; // Initialize the library with your pre-generated lookup table. // The table keys must match the font strings used when calling getTextWidth. const { getTextWidth } = init(TEXT_WIDTH_LOOKUP_TABLE); // Measure the width of a string using a font configuration present in the lookup table. const textToMeasure = 'Hello, server-side world! Привет, мир!'; const width = getTextWidth(textToMeasure, 'Arial|16px|normal'); console.log(`The width of "${textToMeasure}" (Arial 16px normal) is ${width} pixels.`); // You can also measure text with different font styles if your lookup table includes them. const anotherText = 'Bold text example'; const boldWidth = getTextWidth(anotherText, 'Times|32px|bold'); console.log(`The width of "${anotherText}" (Times 32px bold) is ${boldWidth} pixels.`);
Debug
Known issues
gotchaThe core functionality of `server-text-width` relies on manually generating character width data using a separate `mappingTool.html`. This is an out-of-band step, not handled by `npm install`, and requires user interaction to select fonts, sizes, weights, and Unicode ranges. Incorrectly generated or incomplete tables will lead to inaccurate text measurements.
fix
Ensure you open `mappingTool.html`, configure the desired fonts and character ranges, and copy the generated `TEXT_WIDTH_LOOKUP_TABLE` constant into your application code.
affects: >=1.0.0
gotchaIf the generated lookup table does not include all characters present in the text being measured, those characters will fall back to a default or yield incorrect width values. This is especially critical for multi-lingual applications or those handling diverse character sets.
fix
When using `mappingTool.html`, carefully select all necessary Unicode ranges (e.g., Latin, Cyrillic, CJK) to ensure full character coverage for your application's expected text inputs.
affects: >=1.0.0
gotchaFor applications requiring measurements across multiple fonts, sizes, or weights, the `mappingTool.html` generates only one lookup table at a time. Users must manually run the tool for each required configuration and then merge these individual lookup tables into a single JavaScript object before passing it to the `init` function.
fix
Generate separate lookup tables for each font/size/weight combination using `mappingTool.html` and then manually combine them into a single object in your application code, using unique keys for each configuration.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'length')
This error typically occurs if the `TEXT_WIDTH_LOOKUP_TABLE` passed to `init()` is empty, malformed, or if the `fontString` passed to `getTextWidth()` does not match any key in the lookup table.
fix
Verify that `TEXT_WIDTH_LOOKUP_TABLE` contains valid, non-empty data generated by `mappingTool.html`, and that the `fontString` parameter in `getTextWidth(text, fontString)` exactly matches a key present in your lookup table (e.g., 'Arial|16px|normal').
ReferenceError: init is not defined
This error arises when attempting to use the `server-text-width` package with a CommonJS `require()` statement instead of the intended ESM `import` syntax, particularly in an environment configured for ESM.
fix
Update your import statement from `const { init } = require('server-text-width');` to `import { init } from 'server-text-width';` and ensure your project's `package.json` specifies `"type": "module"` or uses `.mjs` extensions for ESM files.
Inaccurate text width for specific characters or strings
This problem usually indicates that the lookup table used for initialization does not contain width data for all the characters being measured, or the data itself is incorrect/outdated for the specific font being used.
fix
Re-generate your `TEXT_WIDTH_LOOKUP_TABLE` using `mappingTool.html`, making sure to select all relevant Unicode character ranges and exactly match the font name, size, and weight you intend to use in `getTextWidth()`.
Upgrade
Version history
1.0.2latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
8 hits · last 30 days
node
6
OpenAI (training)
1
Resources
server-text-width — npm install server-text-width · libregistry