![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
typesettable
Advanced tools
Typesettable is a library for measuring, wrapping, and writing text on Canvas and SVG. Canvas supports some rudimentary wrapping, but SVG does not support any. Furthermore, developers often want wrapped text to auto-hyphenate and truncate with ellipses when overflowing the bounding box. Typesettable aims to make this entire process easier.
Typesettable works with native browser APIs and has no external dependencies.
npm install --save typesettable
import { Typesetter } from "typesettable";
const typesetter = Typesetter.svg(document.querySelector("svg"));
typesetter.write("Hello World!", 200, 200);
Use typesetters with both SVG and Canvas elements:
import { Typesetter } from "typesettable";
// A typesetter for SVG elements
const svgTypesetter = Typesetter.svg(document.querySelector("svg"));
// A typesetter for Canvas elements
const canvasTypesetter = Typesetter.canvas(document.querySelector("canvas").getContext("2d"));
// The dimensions into which the text will be wrapped and truncated
const width = 300;
const height = 50;
// Options for alignment, etc.
const writeOptions = {
xAlign: "left",
yAlign: "top",
textRotation: 0,
textShear: 0,
};
// Write the text to the elements
svgTypesetter.write("Hello SVG!", width, height, writeOptions);
canvasTypesetter.write("Hello Canvas!", width, height, writeOptions);
If you are typesetting multiple strings of text with the same font style, maintain a cache of Measurer results to improve performance.
Your HTML might look like:
<svg>
<g class="section-one"></g>
<g class="section-two" transform="translate(120 0)"></g>
</svg>
To share text measurements between writer, you can use the simple Typesetter
interface, which already uses a shared CacheMeasurer
. Or, you can compose the
components manually like so:
import { CacheMeasurer, SvgContext, Wrapper, Writer } from "typesettable";
const svg = document.querySelector("svg");
const context = new SvgContext(svg);
const measurer = new CacheMeasurer(context);
const wrapper = new Wrapper();
const writer = new Writer(measurer, context, wrapper);
const writeOptions = { xAlign: "center" };
writer.write(
"This text is in the first section",
100, 400, writeOptions,
svg.querySelector("g.section-one")
);
writer.write(
"This text is in the second section",
100, 200, writeOptions,
svg.querySelector("g.section-two")
);
See the docs for more detailed examples.
FAQs
A typesetting library for SVG and Canvas
The npm package typesettable receives a total of 2,860 weekly downloads. As such, typesettable popularity was classified as popular.
We found that typesettable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.