`` is generated. You can also restrict the output to a specific word sequence with the ``words`` attribute (1-based, inclusive; ``start-end``, ``start:end`` or a single ``index``). Word indices are counted starting from the given ``sura``/``aya`` and may run past it, so the rendered selection can span multiple ayas — and even cross page and sura boundaries. The **basmala counts as 4 real, individually selectable words** — matching the flat Tanzil word indexing most consumers count against (At-Tawba has none; Al-Fatiha's basmala is its real aya 1). This holds both when the selection crosses into a new sura and when it is **anchored at a sura's aya 1** (word 1 is then بسم and word 5 the aya's first word), while the **sura title** stays uncounted decoration, shown for context only. Display follows the printed Mushaf: when **all 4** basmala words fall inside the selection (or on a full ``page`` render) they show as the traditional **﷽ ligature**; a partial selection (1–3 of the 4) renders the individual words. Either way the basmala occupies 4 word indices. The non-selected words are kept in place so the original Madina line layout is preserved — only the chosen words are shown. Aya-number markers are not counted. > **Changed in 0.9.0:** the basmala used to be a *never counted* decoration; a cross-sura ``words`` > index now lands 4 words later than in 0.8.x. > > **Changed in 0.9.3:** a ``words`` walk anchored at a sura's aya 1 now counts that sura's own > basmala too (0.9.0–0.9.2 only counted *crossed-into* basmalas, so aya-1-anchored word indices > landed 4 words early relative to the Tanzil flat indexing). > > **Changed in 0.9.5:** a ``words`` walk that runs past the end of An-Nas now **wraps around to > Al-Fatiha** and keeps counting (previously it stopped, silently truncating the selection); > Al-Fatiha's title stays uncounted decoration, and its basmala — being its real aya 1 — > renders as normal aya words. ```html

``` The ``words`` attribute is ignored when rendering a full ``page``. To embed a selection inside your own chrome (e.g. a quiz that already labels the sura/aya), the ``notitle`` attribute hides the crossed-into sura's **name text** while keeping its decorated title line (the ornamental frame stays, empty) — and the basmala, being real counted words, still renders: ```html ``` #### Highlighting and marking words Two more range attributes lay a visual mark over a sub-range of whatever is being shown — ``highlight`` (soft yellow) and ``error`` (soft red) — using the same 1-based, inclusive range format as ``words`` (``start-end``, ``start:end``, or a single index). Unlike ``words``, they work in **every** render mode: alongside a ``words`` selection, on a plain ``sura``/``aya`` verse (counted from that aya's first word), and even on a full ``page`` render (counted from the page's first aya — a page never starts mid-aya, so this is always well-defined). A range must fall entirely within whatever is actually displayed (the ``words`` selection if one is set, otherwise the whole verse/page); an out-of-range or malformed value is ignored with a console warning rather than breaking the render. When ``highlight`` and ``error`` overlap on the same word, ``error`` wins. ```html

``` Colors come from the ``--qmh-highlight``/``--qmh-error`` CSS custom properties on ``quran-madina-html`` (defaults: soft yellow/soft red) — override them, or the ``.quran-madina-html-word-highlight``/``.quran-madina-html-word-error`` classes directly, from your own stylesheet. Another option exists to render a complete quran page: ```html ``` By default a multiline render gets a header (sura name + copy/translate icons); clicking any aya (inline or multiline) opens a small copy/translate popup scoped to it. Set ``headless="true"`` to drop the header and render only the Quran text: ```html ``` ### Attributes Reference | Attribute | Type | Default | Description | |---|---|---|---| | `sura` | `number \| string` | - | Sura number (1–114). Required when using `aya`. | | `aya` | `number \| string` | - | Single aya or verse range (e.g., `255`, `"8-10"`). | | `page` | `number \| string` | - | Full Mushaf page number (1–604). Mutually exclusive with `sura`/`aya`. | | `words` | `string` | - | 1-based word index or range (e.g., `"1:2"`, `"3-10"`, or single index `"5"`). | | `highlight` | `string` | - | 1-based word range to mark soft yellow (same format as `words`). Works with or without `words`, and with `page` too. | | `error` | `string` | - | 1-based word range to mark soft red (same format as `words`). Wins over `highlight` on overlap. | | `headless` | `boolean \| string` | `false` | Set to `"true"` to remove top sura header chrome and copy/translate icons. | | `notitle` | `boolean \| string` | `false` | Set to `"true"` to hide sura name text while retaining title frame decoration. | | `data-font` | `string` | `"Hafs"` | Font family: `Hafs`, `Uthman`, `Amiri Quran`, `Amiri Quran Colored`, `me_quran`. | | `data-name` | `string` | `"Madina05"` | Layout database dataset name. | | `data-font-size` | `number \| string` | `16` | Font size in px (6–100; interpolated between 16 and 24). | ## React wrapper For React apps (web, or mobile via a Capacitor WebView), use [`@tarekeldeeb/quran-madina-react`](https://www.npmjs.com/package/@tarekeldeeb/quran-madina-react), a thin component wrapping the `` tag — lives in this repo's [`react/`](react) folder and is released in lockstep with this package. ```bash npm install @tarekeldeeb/quran-madina-react react ``` ```jsx import QuranMadinaHtml from "@tarekeldeeb/quran-madina-react"; ``` See [`react/README.md`](react/README.md) for the full prop reference and the Capacitor (iOS/Android) packaging guide. ## Dev Setup The project is published on npm ``npm install quran-madina-html``, with sources, assets and distributables. Alternatively, you can fork this repo, then clone it. ```bash apt install python3-distutils nodejs npm chromium-driver npm install // install components and scripts npm run build-db // build all json Db files npm run release // build the dist with dependencies ``` ## Demo Don't forget to see the page source!