modern-text
v0.1.21
Published
Measure and render text in a way that describes the DOM.
Downloads
181
Maintainers
Readme
Usage
import { measureText, renderText } from 'modern-text'
const text = {
style: {
width: 100,
height: 200,
fontSize: 22,
textDecoration: 'underline',
},
// content: 'paragraph'
// content: [
// 'paragraph1',
// ['paragraph1', 'paragraph2'],
// { content: 'paragraph2', fontSize: 20 },
// [
// { content: 'fragment1', fontSize: 12 },
// { content: 'fragment2', fontSize: 30 },
// ],
// {
// backgroundColor: 'blue',
// fragments: [
// { content: 'fragment3', color: 'red', fontSize: 12 },
// { content: 'fragment4', color: 'black' },
// ],
// },
// ]
content: [
{
letterSpacing: 3,
fragments: [
{ content: 'He', color: 'red', fontSize: 12 },
{ content: 'llo', color: 'black' },
],
},
{ content: ', ', color: 'grey' },
{ content: 'World!', color: 'black' },
],
}
document.body.append(renderText(text)) // canvas 2d
console.log(measureText(text)) // boundingBox with computed paragraphs