Kapitälchen ​

Platzieren Sie den ersten Buchstaben eines Absatzes in einer größeren Größe und lassen Sie die folgenden Zeilen daran vorbeifließen. Dies ist eine Formatierung auf Absatzebene, daher wird sie nicht nur auf einen Teil eines ausgewählten Wortes angewendet.

Die veröffentlichte Ansicht und die Bearbeitungsansicht behalten dieselbe Form bei. Während der Bearbeitung ist der erste Buchstabe in ein echtes Element eingebettet, sodass Cursor- und Löschpositionen nicht verrutschen; dieses Element ist nicht im gespeicherten Dokumentinhalt enthalten.

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

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

const selected = wings().use('dc').build()

CSS-Stile ​

Die veröffentlichte Ansicht und die Bearbeitungsansicht verwenden unterschiedliche Selektoren für den ersten Buchstaben. Die veröffentlichte Ansicht verwendet [data-nabi-dropcap="1"]::first-letter, während die Bearbeitungsansicht das echte Element [data-nabi-dropcap-letter] verwendet. Wenn Sie sichtbare Werte wie Farbe, Schriftart oder Größe ändern, schreiben Sie beide Selektoren zusammen, damit Bearbeitung und veröffentlichter Output gleich aussehen.

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

Wenn Sie Größe und Zeilenhöhe ändern, wenden Sie dieselben Werte auf beide Selektoren an.

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

Kapitälchen berechnen den Zeilenfluss um den ersten Buchstaben herum, sodass das Ändern nur einer Seite oder das Zuweisen zu großer Werte die WYSIWYG-Form zerstören kann. Vermeiden Sie dennoch, dem Editor eine neue ::first-letter-Regel hinzuzufügen. Stylen Sie im Editor nur das vorhandene [data-nabi-dropcap-letter].