دستاویزات

ڈراپ کیپ

پیراگراف کے پہلے حرف کو بڑے حجم میں رکھیں اور بعد کی سطروں کو اس کے ساتھ بہنے دیں۔ یہ پیراگراف سطح کی فارمیٹنگ ہے، اس لیے یہ منتخب لفظ کے صرف ایک حصے پر لاگو نہیں ہوتی۔

شائع شدہ اور ترمیمی منظر ایک ہی شکل برقرار رکھتے ہیں۔ ترمیم کے دوران پہلا حرف ایک حقیقی عنصر میں لپیٹا جاتا ہے تاکہ کرسر اور حذف کی جگہیں نہ سرکیں؛ یہ عنصر محفوظ شدہ دستاویز کے مواد میں شامل نہیں ہوتا۔

ٹول بار جمائیں موبائل کی بورڈ کی تلافیطے شدہ فونٹاونچائی

HTMLایڈیٹر لوڈ ہو رہا ہے…

JSONnabi-treeایڈیٹر لوڈ ہو رہا ہے…

تنصیب

npm install nabi-note

کوڈ

import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, typefaceWing, alignWing, dropCapWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  typefaceWing,
  alignWing,
  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: 'ur' })

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

CSS طرزیں

شائع شدہ اور ترمیمی منظر پہلے حرف کے لیے مختلف سلیکٹر استعمال کرتے ہیں۔ شائع شدہ منظر [data-nabi-dropcap="1"]::first-letter استعمال کرتا ہے، جبکہ ترمیمی منظر حقیقی عنصر [data-nabi-dropcap-letter] استعمال کرتا ہے۔ رنگ، فونٹ یا حجم جیسی نمایاں اقدار بدلتے وقت دونوں سلیکٹرز ایک ساتھ لکھیں تاکہ ترمیمی اور شائع شدہ نتیجہ ایک جیسا دکھے۔

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

حجم اور لائن کی اونچائی بدلیں تو دونوں سلیکٹرز پر ایک جیسی اقدار لاگو کریں۔

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] کو طرز دیں۔