NABI NOTE
दस्तावेज़

ड्रॉप कैप ​

अनुच्छेद की पहली अक्षर-इकाई को बड़ा रखता है और बाकी पंक्तियाँ उसके बगल से बहती हैं। यह अनुच्छेद-स्तरीय formatting है, इसलिए अक्षरों के केवल एक हिस्से को चुनकर लागू नहीं होती।

तालिका में बड़ा शुरुआती अक्षर स्वयं कोशिकाओं पर नहीं, अंदर के अनुच्छेदों पर लागू होता है। कई कोशिकाएँ चुनने पर उनके सभी योग्य अनुच्छेद साथ बदलते हैं; टूलबार की स्थिति भी उन्हीं चयनित अनुच्छेदों के आधार पर दिखती है।

प्रकाशित और संपादन दृश्य का रूप समान रहता है। संपादन के समय पहली अक्षर-इकाई को वास्तविक element में लपेटा जाता है ताकि caret और deletion position न बिगड़ें; यह element सहेजे गए दस्तावेज़ में शामिल नहीं होता।

पंख
डिफ़ॉल्ट फ़ॉन्टऊँचाई
HTMLसंपादक लोड हो रहा है…
JSONnabi-treeसंपादक लोड हो रहा है…
इंस्टॉल
npm install nabi-note
कोड
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, typefaceWing, alignWing,
  dropCapWing, mountViewTools,
} from 'nabi-note'

const selected = [
  typefaceWing,
  alignWing,
  dropCapWing,
]
const locale = createLocale('hi')
const { nabi, registry } = createNabiWith(selected, { locale })

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 })

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

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')
ts
const selected = wings().use('dc').build()

CSS शैलियाँ ​

प्रकाशित और संपादन दृश्य में केवल पहली अक्षर-इकाई का selector अलग है। प्रकाशित दृश्य [data-nabi-dropcap="1"]::first-letter और संपादन दृश्य वास्तविक [data-nabi-dropcap-letter] element उपयोग करता है। रंग, font या आकार बदलते समय दोनों selectors साथ लिखें, तभी संपादन और प्रकाशन का रूप समान रहेगा।

css
.article-body:not(.nabi-editing) [data-nabi-dropcap="1"]::first-letter,
.nabi-content.nabi-editing [data-nabi-dropcap-letter] {
  color: var(--nabi-accent);
  font-family: var(--nabi-font-serif);
}

आकार और line height बदलनी हो तो दोनों selectors पर समान मान लगाएँ।

css
.article-body:not(.nabi-editing) [data-nabi-dropcap="1"]::first-letter,
.nabi-content.nabi-editing [data-nabi-dropcap-letter] {
  font-size: 5.5em;
  line-height: .85;
}

ड्रॉप कैप पहली अक्षर-इकाई के आसपास पंक्तियों का बहाव गणना करता है। केवल एक दृश्य बदलने या आकार बहुत बढ़ाने से WYSIWYG टूट सकता है। संपादन दृश्य में नया ::first-letter न जोड़ें; मौजूदा [data-nabi-dropcap-letter] को ही सजाएँ।