NABI NOTE
Docs

Typeface ​

Apply a typeface family to selected text. If a range is selected, only that range changes; if there is only a caret, it applies to the text in the current paragraph. The actual font files and font-family values are defined by the service CSS.

The default families are sans, serif, mono, and cursive. Especially in services that include Korean or other multilingual content, it is better to decide explicitly which fonts each family should use.

Wings
Base typefaceOffset
HTMLLoading the editor…
JSONnabi-treeLoading the editor…
Install
npm install nabi-note
Code
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, typefaceWing, fontSizeWing, dropCapWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  typefaceWing,
  fontSizeWing,
  dropCapWing,
]
const { nabi, registry } = createNabiWith(selected)

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'en' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'en' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))
ts
const selected = wings().use('tf', {
  values: ['sans', 'serif', 'mono'],
}).build()

If values is omitted, all default families are used. Only values included in values are allowed in documents.

CSS Styles ​

The document stores only the family name, and CSS chooses the font files. Change the variables on the same container for both the editor and published view.

css
.nabi-content {
  --nabi-font-serif: "Noto Serif", "Noto Serif KR", serif;
  --nabi-font-mono: "JetBrains Mono", monospace;
}

If you use web fonts, load those font files first. cursive often lacks good coverage for many languages, so it is better to provide it only after choosing the actual font your service will use.