Drop cap ​

Tempatkan huruf pertama paragraf pada ukuran lebih besar dan biarkan baris berikutnya mengalir di sisinya. Ini adalah pemformatan tingkat paragraf, sehingga tidak diterapkan hanya pada sebagian kata terpilih.

Tampilan terbit dan tampilan edit mempertahankan bentuk yang sama. Saat mengedit, huruf pertama dibungkus dalam elemen nyata agar posisi kursor dan hapus tidak bergeser; elemen itu tidak termasuk dalam isi dokumen tersimpan.

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

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

Gaya CSS ​

Tampilan terbit dan tampilan edit memakai pemilih berbeda untuk huruf pertama. Tampilan terbit memakai [data-nabi-dropcap="1"]::first-letter, sedangkan tampilan edit memakai elemen nyata [data-nabi-dropcap-letter]. Ketika mengubah nilai tampak seperti warna, font, atau ukuran, tulis kedua pemilih bersama-sama agar hasil edit dan terbit terlihat sama.

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

Jika mengubah ukuran dan tinggi baris, terapkan nilai yang sama pada kedua pemilih.

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

Drop cap menghitung aliran baris di sekitar huruf pertama, sehingga mengubah hanya satu sisi atau membuat nilainya terlalu besar dapat merusak bentuk WYSIWYG. Tetap hindari menambahkan aturan ::first-letter baru ke editor. Di editor, atur gaya hanya pada [data-nabi-dropcap-letter] yang sudah ada.