Text
Highlight
Color-coded annotation applied to selected vertical text.
Design question
How should selection and highlight states work across RTL column order in a vertical layout?
Default
Pick a color, tap a column to highlight (tap again to clear). Highlights use a translucent fill + a full-opacity border on the right edge — the reading-start side of a vertical column. Stored by verse reference, never character offset.
Guidance
Do
- ✓Store highlights by verse reference, not by character offset
- ✓Use distinct visual channels (color + border) for different highlight categories
- ✓Persist highlights to local storage and sync across sessions
Don't
- ✗Store character offsets for vertical text — column reflow breaks them
- ✗Use more than 4–5 highlight colors — they become indistinguishable
- ✗Remove highlights on theme change — store color as a semantic label, not a hex value
Accessibility
Announce highlight application via live region. Provide keyboard mechanism to highlight selected text. Ensure color + non-color cues.
Open Question
Should highlight removal require a deliberate action (tap the highlight, choose 'remove') or a tap toggle? The latter risks accidental removal.