`` element, otherwise a ```` is generated.\n\nYou 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.\n\n> **Changed in 0.9.0:** the basmala used to be a *never counted* decoration; a cross-sura ``words``\n> index now lands 4 words later than in 0.8.x.\n>\n> **Changed in 0.9.3:** a ``words`` walk anchored at a sura's aya 1 now counts that sura's own\n> basmala too (0.9.0–0.9.2 only counted *crossed-into* basmalas, so aya-1-anchored word indices\n> landed 4 words early relative to the Tanzil flat indexing).\n>\n> **Changed in 0.9.5:** a ``words`` walk that runs past the end of An-Nas now **wraps around to\n> Al-Fatiha** and keeps counting (previously it stopped, silently truncating the selection);\n> Al-Fatiha's title stays uncounted decoration, and its basmala — being its real aya 1 —\n> renders as normal aya words.\n\n```html\n \n \n \n```\n\nThe ``words`` attribute is ignored when rendering a full ``page``.\n\nTo 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:\n\n```html\n\n```\n\n#### Highlighting and marking words\n\nTwo more range attributes lay a visual mark over a sub-range of whatever is being shown —\n``highlight`` (soft yellow) and ``error`` (soft red) — using the same 1-based, inclusive range\nformat as ``words`` (``start-end``, ``start:end``, or a single index). Unlike ``words``, they\nwork in **every** render mode: alongside a ``words`` selection, on a plain ``sura``/``aya`` verse\n(counted from that aya's first word), and even on a full ``page`` render (counted from the\npage's first aya — a page never starts mid-aya, so this is always well-defined). A range must\nfall entirely within whatever is actually displayed (the ``words`` selection if one is set,\notherwise the whole verse/page); an out-of-range or malformed value is ignored with a console\nwarning rather than breaking the render. When ``highlight`` and ``error`` overlap on the same\nword, ``error`` wins.\n\n```html\n\n \n \n```\n\nColors come from the ``--qmh-highlight``/``--qmh-error`` CSS custom properties on\n``quran-madina-html`` (defaults: soft yellow/soft red) — override them, or the\n``.quran-madina-html-word-highlight``/``.quran-madina-html-word-error`` classes directly, from\nyour own stylesheet.\n\nAnother option exists to render a complete quran page:\n\n```html\n\n```\n\nBy 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:\n\n```html\n \n```\n\n### Attributes Reference\n\n| Attribute | Type | Default | Description |\n|---|---|---|---|\n| `sura` | `number \\| string` | - | Sura number (1–114). Required when using `aya`. |\n| `aya` | `number \\| string` | - | Single aya or verse range (e.g., `255`, `\"8-10\"`). |\n| `page` | `number \\| string` | - | Full Mushaf page number (1–604). Mutually exclusive with `sura`/`aya`. |\n| `words` | `string` | - | 1-based word index or range (e.g., `\"1:2\"`, `\"3-10\"`, or single index `\"5\"`). |\n| `highlight` | `string` | - | 1-based word range to mark soft yellow (same format as `words`). Works with or without `words`, and with `page` too. |\n| `error` | `string` | - | 1-based word range to mark soft red (same format as `words`). Wins over `highlight` on overlap. |\n| `headless` | `boolean \\| string` | `false` | Set to `\"true\"` to remove top sura header chrome and copy/translate icons. |\n| `notitle` | `boolean \\| string` | `false` | Set to `\"true\"` to hide sura name text while retaining title frame decoration. |\n| `data-font` | `string` | `\"Hafs\"` | Font family: `Hafs`, `Uthman`, `Amiri Quran`, `Amiri Quran Colored`, `me_quran`. |\n| `data-name` | `string` | `\"Madina05\"` | Layout database dataset name. |\n| `data-font-size` | `number \\| string` | `16` | Font size in px (6–100; interpolated between 16 and 24). |\n\n## React wrapper\n\nFor React apps (web, or mobile via a Capacitor WebView), use\n[`@tarekeldeeb/quran-madina-react`](https://www.npmjs.com/package/@tarekeldeeb/quran-madina-react),\na thin component wrapping the `` tag — lives in this repo's [`react/`](react)\nfolder and is released in lockstep with this package.\n\n```bash\nnpm install @tarekeldeeb/quran-madina-react react\n```\n\n```jsx\nimport QuranMadinaHtml from \"@tarekeldeeb/quran-madina-react\";\n\n\n```\n\nSee [`react/README.md`](react/README.md) for the full prop reference and the Capacitor\n(iOS/Android) packaging guide.\n\n## Dev Setup\n\nThe project is published on npm ``npm install quran-madina-html``, with sources, assets and distributables.\nAlternatively, you can fork this repo, then clone it.\n\n```bash\napt install python3-distutils nodejs npm chromium-driver\nnpm install // install components and scripts\nnpm run build-db // build all json Db files\nnpm run release // build the dist with dependencies\n\n```\n\n## Demo\n\n\n\nDon't forget to see the page source!\n\n","readmeFilename":"README.md"}