حرف استهلالي ​

يكبّر الحرف الأول من الفقرة ويجعل بقية الأسطر تلتف بجانبه. وهو تنسيق على مستوى الفقرة، لذلك لا يُطبّق على جزء من النص المحدد فقط.

داخل الجدول، يُطبّق الحرف الاستهلالي الكبير على الفقرات الداخلية لا على الخلايا نفسها. عند تحديد عدة خلايا، تتغير جميع الفقرات المؤهلة داخلها، وتعكس حالة شريط الأدوات تحديد الفقرات نفسه.

تحافظ شاشة النشر والتحرير على الشكل نفسه. أثناء التحرير يُغلّف الحرف الأول بعنصر فعلي حتى لا يختل موضع المؤشر والحذف، ولا يدخل هذا العنصر في محتوى المستند المحفوظ.

الأجنحة
نوع الخط الافتراضيالارتفاع
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('ar')
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 ​

تختلف شاشة النشر والتحرير في محدد الحرف الأول فقط. تستخدم شاشة النشر [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] الموجود بالفعل.