Taille de police
Modifiez le texte sélectionné pour qu'il corresponde à une étape de taille. Si une plage est sélectionnée, l'étape s'applique à cette plage ; si seul un curseur (caret) est présent, elle modifie la taille du texte du paragraphe actuel. Les données stockées conservent uniquement les étapes autorisées, et non des valeurs arbitraires telles que px.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, boldWing, italicWing, underlineWing,
strikeWing, typefaceWing, fontSizeWing, clearFormatWing,
mountViewTools,
} from 'nabi-note'
const selected = [
boldWing,
italicWing,
underlineWing,
strikeWing,
typefaceWing,
fontSizeWing,
clearFormatWing,
]
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: 'fr' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'fr' }
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()))const selected = wings().use('fs', {
values: ['sm', 'lg', 'xl'],
}).build()Si values est omis, les étapes xs, sm, lg et xl sont utilisées. Si vous restreignez la liste, les autres étapes déjà présentes dans les documents plus anciens seront supprimées lors du chargement.
Styles CSS
Vous pouvez modifier les tailles via des sélecteurs d'étape stockée tels que .nabi-content [data-nabi-size="xs"]. N'inventez pas d'étapes arbitraires qui ne figurent pas dans le document ; ajustez le CSS uniquement au sein des values enregistrées.
.article-body [data-nabi-size="xs"] { font-size: .78em; }
.article-body [data-nabi-size="sm"] { font-size: .9em; }
.article-body [data-nabi-size="lg"] { font-size: 1.3em; }
.article-body [data-nabi-size="xl"] { font-size: 1.65em; }Conserver une différence de taille constante entre les étapes préserve la signification choisie par l'auteur dans l'éditeur lorsque le document est publié.