Projects › BibleWeb › Cross-References › Shared-word highlighting in sidebar
Planned

Shared-word highlighting in sidebar

Area: Cross-References Milestone: v2

Context

Problem: When viewing cross-references, it's not immediately obvious WHY two verses are connected. Users have to read both verses and figure out the thematic or textual link themselves.

Solution: Automatically highlight words that appear in both the focal verse and each cross-reference. This makes the textual connection instantly visible.

Not included: Semantic similarity or thematic connections — just literal word matches (excluding common stop words).

Functional

Expected user flow:

  1. User opens cross-ref sidebar for a verse
  2. Each cross-reference card shows the verse text
  3. Words that also appear in the focal verse are highlighted (e.g., cyan background)
  4. Common words (the, and, is, etc.) are excluded via a stop word list

UX & Design

Highlight color: Cyan (#2dd4bf) or similar — distinct from Jesus words gold.

Reference: BibleGame used cyan highlight in CrossRefSidebar.cs. Stop word list was defined there.

Technical

Implementation:

  • Compute intersection of significant words between focal verse and each cross-ref
  • Filter out stop words (the, and, is, of, to, in, etc.)
  • Wrap matching words in <mark> or <span> with highlight class
  • Apply to both the focal verse display and each ref card

Files:

  • apps/web/src/lib/components/bible/CrossRefSidebar.svelte (modify)

Status

Current: PLANNED Milestone: v2 Priority: Medium — significantly improves cross-reference comprehension

Dependencies:

  • Requires: cross-ref sidebar (DONE)
← Back to Cross-References features