Reader Experience
The scripture reader is GospeLib's primary surface — where users spend 90%+ of their time. Every design decision here optimizes for extended, contemplative reading with easy access to scholarly depth.
The Scripture Page Surface
The page floats on the surrounding chrome, creating a physical paper metaphor:
| Property | Value |
|---|---|
| Background | white-200 (#F5F3EE) — never white |
| Texture | 2% opacity noise grain (uncoated paper feel) |
| Shadow | Three-layer warm shadow (see Elevation) |
| Margins | Phone: 20px, Tablet: 40–60px, Web: 80–100px |
| Max content width | 680px — optimal reading line length |
The page background is never perfectly white. The slight warmth is essential to the paper metaphor. See Elevation & Shape for full shadow details.
Verse Layout Modes
Five progressively scholarly modes — each adding a layer of linguistic depth:
| Mode | What Shows | Audience |
|---|---|---|
| Standard | Scripture text, verse numbers, section headings | General reading |
| Annotated | Standard + footnote superscripts, JST alternate readings | Active study |
| Interlinear | Standard + original language beneath each word | Language students |
| Lens | Standard + tappable word → inline morphological pop-up | Quick reference |
| Witness | Annotated + manuscript witness comparisons | Advanced scholarship |
Mode is selected from the quick-settings tray or study mode toggle. See Original Language Tools for interlinear and lens details.
Chapter Headers
Three decorative styles, user-selectable:
Minimal (Default)
Chapter 1
Corpus icon (small, centered above) + "Chapter N" in small-caps, letter-spaced 0.15em. Subtle horizontal rule below.
Classic
Larger treatment with corpus identity color accent. Book name above chapter number. Decorative flourish rule below.
Decorative
Geometric textile-inspired motif drawn from the corpus. OT uses ancient Near Eastern patterns; BoM uses Mesoamerican.
All header styles are purely decorative — they must never pull attention from the scripture text itself.
Active Verse Highlight
When a verse is tapped or selected:
| Property | Value |
|---|---|
| Background | Current doctrinal or personal highlight color at wash opacity (0.18) |
| Left border | 3px solid at full color |
| Duration | Washes in from tap point, 180ms spring |
| Deselection | Tap elsewhere or swipe — fades over 120ms |
If no highlight color is active, the active verse uses tan-200 as a neutral selection indicator.
Reading Density
Three density modes affect spacing, font size, and information density simultaneously:
| Density | Line Height | Font Delta | Verse Gap | Info Density |
|---|---|---|---|---|
| Spacious | 1.85 | +2px | 1.2em | Minimal chrome, maximum reading flow |
| Comfortable | 1.6 | 0 | 0.8em | Default — balanced |
| Compact | 1.45 | -3px | 0.4em | Dense, more content visible at once |
Density and font size are independent controls. A user can use Compact density with a large font, or Spacious density with a small font. See Typography for type scale interaction.
Gesture Suite
Floating Toolbar
The Floating Toolbar provides contextual actions for text/verse selection. It replaces the former Action Ring component (deleted). Actions include Highlight, Note, Look Up, and Share, adapting to the current selection context.
Word Tap → Lexicon Bubble
Tapping any word in interlinear or lens mode opens an inline lexicon bubble below the word:
- Content appears instantly (≤80ms) — no loading spinner
- Shows: original word, transliteration, Strong's number, brief definition
- "See full entry" link expands to full lexicon panel
- Pushes content below downward via spring animation
Double-Tap → Bookmark
Double-tapping a verse toggles its bookmark state. Bookmark icon materializes at the verse number with a scale-up-and-settle micro animation (260ms).
Verse Swipe → Cross-References
Swiping left on a verse slides in a cross-reference panel from the right edge, showing linked passages with relationship type indicators.
Pull-Down → Witness View
In Annotated or Witness mode, pulling down on a verse reveals manuscript witness comparisons (KJV vs JST variants, textual notes).
Quick Settings Tray
A floating tray accessible via a subtle toggle at the bottom-right of the reader:
| Setting | Control Type | Options |
|---|---|---|
| Font size | Slider | 12px–24px |
| Density | Segmented control | Spacious / Comfortable / Compact |
| Verse layout mode | Segmented control | 5 modes |
| Chapter header style | Picker | Minimal / Classic / Decorative |
| Red-letter toggle | Switch | On / Off |
The tray slides up from the bottom with a decelerate curve (280ms).
Study Mode
Study mode splits the reading surface into a two-pane layout:
| Pane | Content |
|---|---|
| Left (primary) | Scripture text |
| Right (secondary) | Contextual panel: notes, cross-references, commentary, lexicon |
On phone, the secondary pane opens as a bottom sheet. On tablet/web, it's a persistent side panel. See Navigation & Layout for panel system details.
Chrome Behavior
Reader chrome (navigation bar, tool strip, status indicators) follows four behavior modes:
| Mode | Behavior |
|---|---|
| Summon | Chrome hidden during reading. Tap top/bottom safe area to reveal. |
| Auto-hide | Chrome visible initially, hides after 3s of reading. |
| Scroll-reveal | Chrome appears on scroll-up, hides on scroll-down. |
| Study mode | Chrome always visible (tools needed continuously). |
Default behavior per platform: Phone → Auto-hide, Tablet → Scroll-reveal, Web → Always visible.
Related Pages
- Typography — font roles and type scale
- Elevation & Shape — page shadow and surface characters
- Annotations & Footnotes — highlight layers and footnote display
- Original Language Tools — interlinear and lens mode details
- Navigation & Layout — panel system and chrome behavior
- Dark Mode — page surface adaptation across modes