modern-text 2.1.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -18
- package/dist/deformations/index.cjs +1 -1
- package/dist/deformations/index.d.cts +2 -2
- package/dist/deformations/index.d.mts +2 -2
- package/dist/deformations/index.d.ts +2 -2
- package/dist/deformations/index.mjs +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +4 -4
- package/dist/index.d.mts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +8 -7
- package/dist/index.mjs +3 -3
- package/dist/shared/{modern-text.CGZmjNV0.d.ts → modern-text.1LMQ6ZWb.d.ts} +3 -3
- package/dist/shared/{modern-text.BBDyCm63.cjs → modern-text.BAnUZM0U.cjs} +1 -1
- package/dist/shared/{modern-text.DNvXuVjw.mjs → modern-text.BdF52nXP.mjs} +1 -1
- package/dist/shared/{modern-text.K8BlyK2j.mjs → modern-text.CdKp2H-o.mjs} +13 -4
- package/dist/shared/{modern-text.DNXfZmiT.d.mts → modern-text.CjkLMv3V.d.cts} +3 -3
- package/dist/shared/{modern-text.DzBaDwbG.d.cts → modern-text.Cv-GZog_.d.mts} +3 -3
- package/dist/shared/{modern-text.DG27jpKj.d.ts → modern-text.DENkEKJN.d.cts} +38 -38
- package/dist/shared/{modern-text.DG27jpKj.d.cts → modern-text.DENkEKJN.d.mts} +38 -38
- package/dist/shared/{modern-text.DG27jpKj.d.mts → modern-text.DENkEKJN.d.ts} +38 -38
- package/dist/shared/{modern-text.DQWdaYoZ.cjs → modern-text._10DVHum.cjs} +13 -4
- package/dist/web-components/index.cjs +2 -2
- package/dist/web-components/index.d.cts +2 -2
- package/dist/web-components/index.d.mts +2 -2
- package/dist/web-components/index.d.ts +2 -2
- package/dist/web-components/index.mjs +2 -2
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -19,17 +19,16 @@
|
|
|
19
19
|
</p>
|
|
20
20
|
|
|
21
21
|
`modern-text` measures and renders rich text on Canvas with a layout model that
|
|
22
|
-
mirrors the browser's. It has no React/Vue dependency, ships ESM + CJS, and
|
|
23
|
-
|
|
24
|
-
Node
|
|
22
|
+
mirrors the browser's. It has no React/Vue dependency, ships ESM + CJS, and is
|
|
23
|
+
**fully DOM-free** — the same measure → render pipeline runs in the browser,
|
|
24
|
+
Node, SSR or Web Workers.
|
|
25
25
|
|
|
26
26
|
## Features
|
|
27
27
|
|
|
28
28
|
- 📐 **DOM-accurate layout** — paragraphs, line wrapping, baselines, alignment.
|
|
29
|
-
- 🧩 **
|
|
30
|
-
-
|
|
31
|
-
|
|
32
|
-
no `document`, so it works in **Node / SSR / Workers** and is deterministic.
|
|
29
|
+
- 🧩 **Pure-JS, DOM-free layout** — the built-in `Measurer` computes layout from
|
|
30
|
+
`modern-font` glyph metrics + kerning with no `document`, so it works in **Node
|
|
31
|
+
/ SSR / Workers**, is deterministic, and measures the exact font it renders.
|
|
33
32
|
- ↔️ **Horizontal & vertical** writing modes (`horizontal-tb`, `vertical-rl`).
|
|
34
33
|
- 🅰️ **Rich inline styling** — per-fragment font size/family/weight/style, color,
|
|
35
34
|
letter-spacing, line-height, text-indent, text-align, vertical-align,
|
|
@@ -81,23 +80,23 @@ renderText({
|
|
|
81
80
|
})
|
|
82
81
|
```
|
|
83
82
|
|
|
84
|
-
## Layout
|
|
83
|
+
## Layout backend
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
which resolves fonts from the `fonts` you pass or from `modern-font`'s
|
|
88
|
-
registry.
|
|
89
|
-
`TextMeasurer`:
|
|
85
|
+
`modern-text` measures with a single built-in **`Measurer`** — pure-JS and
|
|
86
|
+
DOM-free — which resolves fonts from the `fonts` you pass or from `modern-font`'s
|
|
87
|
+
global registry. It's the default; to plug in your own engine, pass any object
|
|
88
|
+
implementing `TextMeasurer`:
|
|
90
89
|
|
|
91
90
|
```ts
|
|
92
|
-
new Text({ fonts
|
|
93
|
-
new Text({ fonts, measurer: 'dom' }) // browser ground truth
|
|
91
|
+
new Text({ fonts }) // uses the built-in Measurer (default)
|
|
94
92
|
new Text({ measurer: myCustomMeasurer }) // any object implementing TextMeasurer
|
|
95
93
|
```
|
|
96
94
|
|
|
97
95
|
### Node / SSR / Workers
|
|
98
96
|
|
|
99
|
-
`
|
|
100
|
-
outside the browser. Register fonts from a buffer with
|
|
97
|
+
The built-in `Measurer` needs no `document`, so the whole measure → render
|
|
98
|
+
pipeline runs outside the browser. Register fonts from a buffer with
|
|
99
|
+
`modern-font`:
|
|
101
100
|
|
|
102
101
|
```ts
|
|
103
102
|
import { readFileSync } from 'node:fs'
|
|
@@ -232,11 +231,21 @@ renderText({
|
|
|
232
231
|
view,
|
|
233
232
|
fonts,
|
|
234
233
|
content: 'Deformation',
|
|
235
|
-
style: { fontSize:
|
|
236
|
-
deformation: { type: 'arch-curve' },
|
|
234
|
+
style: { fontSize: 64 },
|
|
235
|
+
deformation: { type: 'arch-curve', intensities: [50] },
|
|
237
236
|
})
|
|
238
237
|
```
|
|
239
238
|
|
|
239
|
+
`intensities` is the strength of the effect, `0`–`100` per axis. Most presets
|
|
240
|
+
read a single value (`intensities[0]`); a few are **two-axis** and also read
|
|
241
|
+
`intensities[1]` — e.g. `skew` and `trapezoid` slant/taper independently on the
|
|
242
|
+
x and y axes. A missing axis is treated as `0`.
|
|
243
|
+
|
|
244
|
+
Deformation is **scale-invariant**: the geometry is derived from the text's own
|
|
245
|
+
font size, so the same `intensities` produce the same shape at any `fontSize` —
|
|
246
|
+
you don't pass a reference size. (The legacy `deformation.maxFontSize` field is
|
|
247
|
+
no longer needed and is only used as a fallback when no glyphs are measurable.)
|
|
248
|
+
|
|
240
249
|
<details>
|
|
241
250
|
<summary>Available presets (34)</summary>
|
|
242
251
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const modernPath2d = require('modern-path2d');
|
|
4
|
-
const deformation = require('../shared/modern-text.
|
|
4
|
+
const deformation = require('../shared/modern-text._10DVHum.cjs');
|
|
5
5
|
const curves = require('../shared/modern-text.MC5bIC9E.cjs');
|
|
6
6
|
require('modern-idoc');
|
|
7
7
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { D as DeformationPreset } from '../shared/modern-text.CjkLMv3V.cjs';
|
|
2
2
|
import 'modern-path2d';
|
|
3
|
-
import '../shared/modern-text.
|
|
3
|
+
import '../shared/modern-text.DENkEKJN.cjs';
|
|
4
4
|
import 'modern-idoc';
|
|
5
5
|
import 'modern-font';
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { D as DeformationPreset } from '../shared/modern-text.Cv-GZog_.mjs';
|
|
2
2
|
import 'modern-path2d';
|
|
3
|
-
import '../shared/modern-text.
|
|
3
|
+
import '../shared/modern-text.DENkEKJN.mjs';
|
|
4
4
|
import 'modern-idoc';
|
|
5
5
|
import 'modern-font';
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { D as DeformationPreset } from '../shared/modern-text.1LMQ6ZWb.js';
|
|
2
2
|
import 'modern-path2d';
|
|
3
|
-
import '../shared/modern-text.
|
|
3
|
+
import '../shared/modern-text.DENkEKJN.js';
|
|
4
4
|
import 'modern-idoc';
|
|
5
5
|
import 'modern-font';
|
|
6
6
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Vector2 } from 'modern-path2d';
|
|
2
|
-
import { d as defineDeformation } from '../shared/modern-text.
|
|
2
|
+
import { d as defineDeformation } from '../shared/modern-text.CdKp2H-o.mjs';
|
|
3
3
|
import { H as HeartCurve, R as RectangularCurve, E as EllipseCurve, C as CircleCurve, P as PolygonCurve } from '../shared/modern-text.fT17R5HY.mjs';
|
|
4
4
|
import 'modern-idoc';
|
|
5
5
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const Text = require('./shared/modern-text.
|
|
4
|
-
const deformation = require('./shared/modern-text.
|
|
3
|
+
const Text = require('./shared/modern-text.BAnUZM0U.cjs');
|
|
4
|
+
const deformation = require('./shared/modern-text._10DVHum.cjs');
|
|
5
5
|
const curves = require('./shared/modern-text.MC5bIC9E.cjs');
|
|
6
6
|
require('modern-font');
|
|
7
7
|
require('modern-idoc');
|
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { P as Plugin, T as TextMeasurer, a as Paragraph, M as MeasurerResult, C as Character, O as Options, b as MeasureResult, R as RenderOptions, c as Text } from './shared/modern-text.DENkEKJN.cjs';
|
|
2
|
+
export { d as Canvas2DRenderer, D as DrawShapePathsOptions, F as Fragment, e as TextEvents, t as textDefaultStyle } from './shared/modern-text.DENkEKJN.cjs';
|
|
3
3
|
import { Fonts } from 'modern-font';
|
|
4
4
|
import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
|
|
5
5
|
import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
|
|
6
|
-
import {
|
|
7
|
-
export { B as BendContext, a as BendPreset, C as CurvePreset,
|
|
6
|
+
import { D as DeformationPreset } from './shared/modern-text.CjkLMv3V.cjs';
|
|
7
|
+
export { B as BendContext, a as BendPreset, C as CurvePreset, b as DeformationCharInfo, c as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.CjkLMv3V.cjs';
|
|
8
8
|
|
|
9
9
|
declare function definePlugin(options: Plugin): Plugin;
|
|
10
10
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { P as Plugin, T as TextMeasurer, a as Paragraph, M as MeasurerResult, C as Character, O as Options, b as MeasureResult, R as RenderOptions, c as Text } from './shared/modern-text.DENkEKJN.mjs';
|
|
2
|
+
export { d as Canvas2DRenderer, D as DrawShapePathsOptions, F as Fragment, e as TextEvents, t as textDefaultStyle } from './shared/modern-text.DENkEKJN.mjs';
|
|
3
3
|
import { Fonts } from 'modern-font';
|
|
4
4
|
import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
|
|
5
5
|
import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
|
|
6
|
-
import {
|
|
7
|
-
export { B as BendContext, a as BendPreset, C as CurvePreset,
|
|
6
|
+
import { D as DeformationPreset } from './shared/modern-text.Cv-GZog_.mjs';
|
|
7
|
+
export { B as BendContext, a as BendPreset, C as CurvePreset, b as DeformationCharInfo, c as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.Cv-GZog_.mjs';
|
|
8
8
|
|
|
9
9
|
declare function definePlugin(options: Plugin): Plugin;
|
|
10
10
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { P as Plugin, T as TextMeasurer, a as Paragraph, M as MeasurerResult, C as Character, O as Options, b as MeasureResult, R as RenderOptions, c as Text } from './shared/modern-text.DENkEKJN.js';
|
|
2
|
+
export { d as Canvas2DRenderer, D as DrawShapePathsOptions, F as Fragment, e as TextEvents, t as textDefaultStyle } from './shared/modern-text.DENkEKJN.js';
|
|
3
3
|
import { Fonts } from 'modern-font';
|
|
4
4
|
import { FullStyle, NormalizedStyle, NormalizedHighlight, NormalizedEffect } from 'modern-idoc';
|
|
5
5
|
import { BoundingBox, Vector2, Path2DSet, Transform2D } from 'modern-path2d';
|
|
6
|
-
import {
|
|
7
|
-
export { B as BendContext, a as BendPreset, C as CurvePreset,
|
|
6
|
+
import { D as DeformationPreset } from './shared/modern-text.1LMQ6ZWb.js';
|
|
7
|
+
export { B as BendContext, a as BendPreset, C as CurvePreset, b as DeformationCharInfo, c as DeformationCurve, F as FfdContext, d as FfdPreset, O as OffsetPreset, V as VerbatimContext } from './shared/modern-text.1LMQ6ZWb.js';
|
|
8
8
|
|
|
9
9
|
declare function definePlugin(options: Plugin): Plugin;
|
|
10
10
|
|