NABI NOTE
Dokumentasi

Jenis huruf ​

Terapkan keluarga jenis huruf ke teks yang dipilih. Jika suatu rentang dipilih, hanya rentang itu yang berubah; jika hanya ada kursor, perubahan diterapkan pada teks di paragraf saat ini. Berkas font sebenarnya dan nilai font-family ditentukan oleh CSS layanan.

Keluarga bawaan adalah sans, serif, mono, dan cursive. Terutama pada layanan yang memuat bahasa Korea atau konten multibahasa lain, sebaiknya tentukan secara eksplisit font yang digunakan setiap keluarga.

Sayap
Jenis huruf bawaanJarak
HTMLMemuat editor…
JSONnabi-treeMemuat editor…
Pasang
npm install nabi-note
Kode
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: 'id' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'id' }
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()

Jika values dihilangkan, semua keluarga bawaan digunakan. Hanya nilai dalam values yang diizinkan pada dokumen.

Gaya CSS ​

Dokumen hanya menyimpan nama keluarga, dan CSS memilih berkas font. Ubah variabel pada kontainer yang sama untuk editor dan tampilan terbit.

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

Jika memakai font web, muat berkas font tersebut lebih dahulu. cursive sering tidak memiliki cakupan yang baik untuk banyak bahasa, jadi sebaiknya sediakan setelah memilih font sebenarnya yang akan dipakai layanan Anda.