0bf74a418f
- Add case, justification, vertical alignment, truncation, max-lines, and OpenType controls - Apply visual text case and measured vertical offsets in CanvasKit rendering - Preserve nullable preview values, shared text styles, font demand, and .fig metadata - Add panel, engine, and canvas visual coverage
1.4 KiB
1.4 KiB
| title | description |
|---|---|
| useTypography | Read and update font, alignment, case, truncation, and OpenType features for text nodes. |
useTypography
useTypography() is the text-property control composable for text editing panels.
It exposes:
- font family
- font weight
- font size
- formatting state
- missing-font status
- horizontal and vertical alignment, including justification
- text case and direction
- ending truncation and maximum lines
- OpenType feature toggles
- helpers for changing family, weight, alignment, and decorations
Usage
import { useTypography } from '@open-pencil/vue'
const typography = useTypography()
Basic example
const {
fontFamily,
fontWeight,
fontSize,
activeFormatting,
setFamily,
setWeight,
setAlign,
setVerticalAlign,
setTextCase,
setTruncation,
setFontFeature,
} = useTypography()
Practical examples
Load and switch a font family
const typography = useTypography({
fontLoader: {
load: async (family, style) => {
await myFontLoader(family, style)
},
},
})
Toggle formatting
typography.toggleBold()
typography.toggleItalic()
typography.toggleDecoration('UNDERLINE')
typography.setTextCase('UPPER')
typography.setVerticalAlign('CENTER')
typography.setTruncation('ENDING')
typography.setFontFeature('LIGA', false)