ComponentsMarker
Conversation

Marker

An inline status, system note, or labeled separator in a conversation or reading thread.

Design question

How do reading progress markers, chapter completions, and system events appear in a vertical reading context without interrupting the column flow?

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

Do
  • 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)?

← PreviousDialogNext →Message