Projects › BibleWeb › Bible Reading › Verse numbers
Done

Verse numbers

Area: Bible Reading Milestone: v1

Context

Problem: When reading continuous Bible text, users need a way to identify and reference specific verses — whether for personal study, sharing a reference with someone, or navigating to a specific location.

Solution: Small superscript numbers before each verse, styled to be visible but unobtrusive. They don't interfere with reading flow but are always available for reference.

Not included: Clickable verse numbers that link somewhere, or verse-level bookmarking (those are separate features).

Functional

Each verse in the reader has a small number before its text, showing which verse it is within the chapter. The numbers are superscript (raised and smaller than the main text), following the convention used in printed Bibles.

User flow:

  1. User opens any chapter in the reader
  2. Each verse displays its number as a small raised number before the text
  3. Numbers are not selectable (you can't accidentally copy them when selecting text)
  4. Screen readers skip the verse numbers (they're decorative/navigational)

Edge cases:

  • Verse 1 always appears (no skipping)
  • Very long verse numbers (e.g., Psalm 119 with 176 verses) still display correctly
  • When copying text, verse numbers are excluded from the selection

UX & Design

Typography:

  • Element: <sup> (HTML superscript)
  • Font size: 0.65em relative to the verse text
  • Color: var(--color-verse-number) — a muted tone that doesn't compete with the text
  • Spacing: margin-right: 0.125rem (2px) between number and text

Behavior:

  • user-select: none — cannot be selected by mouse/touch
  • aria-hidden="true" — hidden from screen readers

Responsive: Same on all screen sizes — the superscript scales with the reader font size.

Technical

Rendering: Part of VerseText.svelte — each verse renders its number inline:

<sup class="mr-0.5 text-[0.65em] font-normal select-none"
     style="color: var(--color-verse-number)"
     aria-hidden="true">{verse.verse}</sup>

Data: The verse number comes from verses.verse column in the database.

Files:

  • apps/web/src/lib/components/bible/VerseText.svelte — verse number rendering

Status

Current: DONE Milestone: v1 Priority: Core — fundamental to Bible reading

History:

  • Standard feature in all Bible apps — implemented from the start
  • BibleGame had the same superscript style

Dependencies:

  • Requires: chapter reader (DONE)
  • Used by: all features that display verse text

Screenshots

Feature screenshot
← Back to Bible Reading features