Each verse is a discrete unit that must support tapping, long-pressing, highlighting, and annotation · all while maintaining correct RTL column order. Rendered as plain body text so the reading surface stays uncluttered; reference numbers live in the chrome, not the column.

Default

글씨를 세로로 쓰는 것을 세로쓰기라 한다전통적으로 한국어·중국어·일본어가 세로로 쓰였다

우종서의 가장 오래된 기록은 중국에서 발견되었다죽간을 쓰던 때부터 한자 문화권은 세로로 썼다

그에 따라 옛 문헌은 전부 세로쓰기로 되어 있다가로로 쓰면 두루마리를 말고 펴기가 불편했다

하이라이트

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

Accessibility

Each verse is a paragraph with aria-label including reference. Highlight announced via live region.

Open question

How should a multi-verse selection spanning a column break be represented visually? The rectangular selection model doesn't extend across RTL columns.

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	}}