Markers in horizontal chat are centered text separators. In a vertical reading interface, markers must orient vertically to match the reading axis · or appear at column boundaries to separate sections.

Reading progress & conversation

글씨를 세로로 쓰는 것을 세로쓰기라 한다

전통적으로 한국어와 중국어가 세로로 쓰였다

✓1장 완료

죽간을 쓰던 때부터 세로로 써 왔고

옛 문헌은 세로쓰기로 되어 있다

Chapter completion markers appear between vertical columns · in vertical writing direction to match the reading axis.

tsx
1// Chapter completion marker between vertical columns
2function ChapterMarker({ label }) {
3  return (
4    <div style={{
5      writingMode: "vertical-rl",
6      display: "flex",
7      alignItems: "center",
8      gap: 6,

Guidance

Orient chapter/section markers vertically to match the reading axis
Use system markers (completions, breaks) at natural column boundaries
Keep marker text to 4 characters or fewer when displayed vertically

Don't

Place horizontal separators across the middle of a vertical column
Use markers as navigation elements · they are informational only
Override the vertical reading flow with a horizontal marker that requires head rotation

Accessibility

aria-label on the marker element. Role='separator' for visual dividers. Status markers use role='status'.

Open question

In a vertical reader, should progress markers appear at the top of the next column (before) or bottom of the completed column (after)?

PreviousDialog Next Message

1	// Chapter completion marker between vertical columns
2	function ChapterMarker({ label }) {
3	return (
4	<div style={{
5	writingMode: "vertical-rl",
6	display: "flex",
7	alignItems: "center",
8	gap: 6,