Columns flow right-to-left (sentences 1–2 on the right). Tap a line to select, then apply a highlight color. Selection must account for RTL column order.

tsx
1function Verse({ text, selected, highlighted, color, onTap }) {
return (
  <div
    style={{
      position: "relative",
      display: "flex",
      cursor: "pointer",
    }}

Guidance

Keep the reading column as pure body text · surface the reference in the chrome or on selection
Treat tate-chu-yoko digit groups as single selection units
Use background-color + leading border for highlights · not text inversion

Don't

Use the OS text selection API for vertical content · it breaks at column boundaries
Inject verse numbers as inline column elements · they interrupt the vertical reading rhythm
Apply highlight via text-shadow or outline

PreviousTabs Next Popover Menu

1	function Verse({ text, selected, highlighted, color, onTap }) {
2	return (
3	<div
4	style={{
5	position: "relative",
6	display: "flex",
7	cursor: "pointer",
8	}}