Chữ cái đầu đoạn
Đặt chữ cái đầu của đoạn lớn để các dòng còn lại chảy bên cạnh nó. Đây là định dạng ở cấp đoạn, nên không áp dụng bằng cách chỉ chọn một phần chữ.
Trong bảng, chữ cái đầu lớn áp dụng cho các đoạn bên trong, không phải chính ô. Khi chọn nhiều ô, các đoạn phù hợp trong đó được đổi cùng nhau; trạng thái thanh công cụ cũng dựa trên cùng vùng chọn đoạn.
Trang xuất bản và màn hình chỉnh sửa giữ cùng diện mạo. Khi chỉnh sửa, chữ cái đầu được bọc trong phần tử thực để vị trí con trỏ và xóa không bị lệch; phần tử này không thuộc nội dung tài liệu được lưu.
npm install nabi-noteimport {
createLocale, createNabiWith, mountSurface, mountToolbar,
mountContextToolbar, mountHints, watchSettle, typefaceWing, alignWing,
dropCapWing, mountViewTools,
} from 'nabi-note'
const selected = [
typefaceWing,
alignWing,
dropCapWing,
]
const locale = createLocale('vi')
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')const selected = wings().use('dc').build()Kiểu CSS
Trang xuất bản và màn hình chỉnh sửa chỉ khác bộ chọn trỏ đến chữ cái đầu. Trang xuất bản dùng [data-nabi-dropcap="1"]::first-letter, còn màn hình chỉnh sửa dùng phần tử thực [data-nabi-dropcap-letter]. Khi thay đổi giá trị hiển thị như màu, phông và cỡ, phải luôn viết cả hai bộ chọn để diện mạo khi chỉnh sửa và xuất bản giống nhau.
.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);
}Nếu cần thay đổi cỡ và chiều cao dòng, hãy áp dụng cùng giá trị cho cả hai bộ chọn.
.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;
}Chữ cái đầu đoạn tính luồng dòng quanh ký tự đầu, nên thay đổi chỉ một bên hoặc tăng giá trị quá nhiều có thể làm hỏng diện mạo WYSIWYG. Vẫn nên tránh thêm mới ::first-letter vào màn hình chỉnh sửa. Trong trình soạn thảo, chỉ tạo kiểu cho [data-nabi-dropcap-letter] đã có.