दस्तऐवज

अक्षरकुल

निवडलेल्या text ला typeface family लागू करा. range निवडल्यास फक्त ती range बदलते; फक्त caret असल्यास ते सध्याच्या paragraph मधील text ला लागू होते. प्रत्यक्ष font files आणि font-family values service CSS मध्ये ठरतात.

sans, serif, mono आणि cursive या default families आहेत. विशेषतः Korean किंवा इतर बहुभाषिक content असलेल्या services मध्ये प्रत्येक family ने कोणते fonts वापरावेत हे स्पष्टपणे ठरवणे चांगले आहे.

चिकट साधनपट्टी मोबाइल कळफलकाची जागामूलभूत अक्षररूपअंतर

HTMLसंपादक लोड होत आहे…

JSONnabi-treeसंपादक लोड होत आहे…

स्थापित करा

npm install nabi-note

कोड

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: 'mr' })

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

values वगळल्यास सर्व default families वापरल्या जातात. documents मध्ये values मधील valuesनाच परवानगी असते.

CSS शैली

document फक्त family name साठवते आणि CSS font files निवडते. editor आणि प्रकाशित दृश्य दोन्हींसाठी त्याच container वर variables बदला.

css

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

web fonts वापरत असल्यास प्रथम त्या font files लोड करा. अनेक भाषांसाठी cursive मध्ये पुरेसे coverage नसते, म्हणून service कोणता प्रत्यक्ष font वापरेल ते निवडल्यानंतरच ते देणे योग्य आहे.