/* ============================================================================ TASHKIL (Arabic diacritics) show/hide The "hide" is purely visual: a blank web font covering ONLY the tashkil code points (each mapped to an empty zero-advance glyph). Because its @font-face unicode-range is limited to the marks, the browser uses it just for those code points and falls through to the real font for base letters. The text bytes are never modified, so match byte-anchors, deep links, and the reader's click→byte mapping are all unaffected. ============================================================================ */ @font-face { font-family: 'AlnaqlNoTashkil'; src: url('/fonts/alnaql-no-tashkil.ttf') format('truetype'); font-display: swap; unicode-range: U+0610-061A, U+064B-065F, U+0670, U+06D6-06DC, U+06DF-06E4, U+06E7-06E8, U+06EA-06ED, U+08D3-08E1, U+08E3-08FF; } /* Global toggle: the class is set on (persisted in localStorage). It prepends the blank font to every Arabic type stack, so diacritic glyphs render empty while base letters keep their real font. Untoggled, nothing changes. If the font ever fails to load, the marks simply stay visible. */ html.hide-tashkil { --font-display: 'AlnaqlNoTashkil', 'Aref Ruqaa', 'Amiri', serif; --font-heading: 'AlnaqlNoTashkil', 'Noto Naskh Arabic', 'Amiri', serif; --font-primary: 'AlnaqlNoTashkil', 'Amiri', 'Traditional Arabic', serif; --font-poetry: 'AlnaqlNoTashkil', 'Scheherazade New', 'Amiri', serif; --font-ui: 'AlnaqlNoTashkil', 'Noto Sans Arabic', 'Segoe UI', sans-serif; } /* The checkbox control, reused in the reader / match-viewer / search-pane chrome. */ .tashkil-toggle { display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; font-family: var(--font-ui); font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-secondary, inherit); white-space: nowrap; user-select: none; } .tashkil-toggle-check { cursor: pointer; margin: 0; accent-color: var(--color-primary, #8B4513); } .tashkil-toggle:hover { color: var(--color-text-primary, inherit); }