Synchronized verse highlighting
Context
Problem: When reading parallel Gospel columns, it's hard to track which verse in one column corresponds to the same verse in another column, especially when the Gospels have different verse counts.
Solution: Verses are aligned positionally in the grid — the same verse number in each column appears at the same visual row. Jesus' speech highlighting (gold) applies uniformly across all columns for visual consistency.
Not included: Scroll synchronization (that's a separate NEEDS_DESIGN feature) or active hover-highlighting across columns.
Functional
How it works:
- Verses are displayed in the same visual row across columns because they share verse numbers within a pericope
- The CSS Grid layout naturally aligns them
- Jesus' words appear in gold across all columns simultaneously
Edge cases:
- Columns with fewer verses have empty space at the bottom
- Jesus speech highlighting uses
isJesusSpeechflag from thejesus_speechjoin in the query
UX & Design
Alignment: Grid-based positional sync — same verse number = same row.
Jesus speech color: var(--color-jesus-words, rgb(255, 200, 80)) with subtle text-shadow glow, applied uniformly across all columns.
Technical
Implementation: Entirely through CSS Grid layout and data structure — no JavaScript scroll sync needed.
Data: isJesusSpeech flag per verse, from jesus_speech left join in getPericopeVerses().
Files:
apps/web/src/lib/components/bible/ParallelVerseView.svelte
Status
Current: DONE Milestone: v2 Priority: Medium — visual polish for the parallel view
Dependencies:
- Requires: side-by-side columns (DONE), jesus_speech data (DONE)
Screenshots
