Projects › BibleWeb › Bible Reading › Jesus' words highlighting
Done

Jesus' words highlighting

Area: Bible Reading Milestone: v1

Context

Problem: Many Bible readers want to focus specifically on what Jesus said. In printed "red letter" Bibles, Jesus' words are printed in red ink. BibleWeb needs a digital equivalent that's even better.

Solution: All direct speech of Jesus in the four Gospels is highlighted in gold (#fbbf24). A dedicated "Jesus Words" mode filters chapters to show only Jesus' speech, with navigation that skips to relevant chapters.

Not included: Disputed speech coloring (that's a separate feature). This is the core highlighting — certain, direct speech only.

Functional

When reading any of the four Gospels (Matthew, Mark, Luke, John), verses where Jesus is speaking directly appear in gold text instead of the normal text color. This works in any translation mode (EN, NL, or Both).

A special "JW" (Jesus Words) mode can be activated via a button in the nav bar or by adding ?jw=1 to the URL. In this mode:

  • A gold "JESUS'S WORDS" badge appears at the top
  • Only verses with Jesus' direct speech are shown
  • Prev/Next navigation skips to the next chapter containing Jesus speech

User flow:

  1. User opens a Gospel chapter (e.g., Matthew 5)
  2. Jesus' direct speech appears in gold (#fbbf24)
  3. Non-Jesus text appears in normal color
  4. User can click "JW" button to enter Jesus Words mode
  5. In JW mode, non-Jesus verses are hidden
  6. Navigation skips to next chapter with Jesus speech

Edge cases:

  • Non-Gospel books (Genesis–Malachi, Acts–Revelation): no highlighting at all
  • Chapters with no Jesus speech in JW mode: skipped entirely
  • "Both" translation mode: both EN and NL text highlighted in gold

UX & Design

Colors:

  • Jesus' words: var(--color-jesus-words) = rgb(255, 200, 80) — warm gold/amber
  • Normal text: var(--color-text) — theme-dependent
  • JW mode badge: gold background with dark text

JW Mode Toggle:

  • Button labeled "JW" in the chapter nav bar
  • Active state: highlighted/filled appearance
  • URL reflects state: ?jw=1

Visual: The gold color is chosen to be warm and distinctive without being harsh — inspired by traditional red-letter Bibles but using gold to match the app's warm aesthetic.

Technical

Data:

  • DB table: jesus_speech with columns: id, verse_id (FK → verses.id), speech_type ('direct'/'indirect'), certainty_level ('certain'/'probable'/'possible'), attested_in, notes
  • Index on verse_id for fast lookups

Queries (apps/web/src/lib/server/queries/jesus-speech.ts):

  • getJesusSpeechForChapter(bookId, chapter): joins jesus_speech + verses, returns verse IDs with Jesus speech
  • getJesusSpeechChapters(): returns all distinct (bookId, chapter) pairs with Jesus speech, filtered to books 40-43 (Gospels only)

Data flow:

  1. Server extracts jesusSpeechVerseIds (array of verse_id integers)
  2. Page converts to Set<number> for O(1) lookup
  3. Passed to VerseList → each VerseText receives isJesusSpeech boolean
  4. VerseText.svelte: when isJesusSpeech, text color becomes var(--color-jesus-words)

Files:

  • apps/web/src/lib/server/queries/jesus-speech.ts — database queries
  • apps/web/src/lib/components/bible/VerseText.svelte — color rendering
  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.svelte — JW mode logic
  • apps/web/src/routes/(app)/read/[[book]]/[[chapter]]/+page.server.ts — server data loading

Status

Current: DONE Milestone: v1 Priority: High — distinctive feature of BibleWeb

History:

  • BibleGame had identical gold highlighting for Jesus' words
  • JW mode was added during the web port as an enhancement over the desktop version
  • Data in jesus_speech table includes certainty levels for future disputed-speech coloring

Dependencies:

  • Requires: chapter reader (DONE), jesus_speech database table (DONE)
  • Enables: disputed Jesus speech coloring (PLANNED), Jesus-words search filter (DONE)

Screenshots

Feature screenshot
← Back to Bible Reading features