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)

Related APIs

• useTextEdit
• useSelectionState