ComponentsMessage
Conversation

Message

A chat message with avatar, content, timestamp, and alignment. The open question in a vertical interface is whether bubbles should adapt to the reading axis.

Design question

Should chat message bubbles remain horizontal (familiar) or adapt to vertical text orientation (consistent with reading direction)?

Horizontal vs Vertical

세로쓰기의 유래가 흥미로웠어요
오전 9:14
어떤 부분이요?
오전 9:15
죽간에서 세로쓰기가 시작됐대요
오전 9:16
그 부분 저도 좋아해요
오전 9:16
메시지 입력…

Vertical adaptation — each message is a column flowing right-to-left, matching the reading axis. Latest message on the left.

tsx
1// Horizontal message — conventional
2function HorizontalMessage({ from, text, time, avatar }) {
3 const me = from === "me"
4 return (
5 <div style={{
6 display: "flex",
7 gap: 10,
8 flexDirection: me ? "row-reverse" : "row",

Guidance

Do
  • Keep horizontal bubbles for mixed-language interfaces — vertical layout works best for pure CJK content
  • In vertical mode, arrange columns RTL: latest message on the left
  • Avatars should sit at the top of each message column, matching reading start
Don't
  • Force vertical bubbles without user control — this is an open UX question, not a resolved decision
  • Rotate horizontal bubble text 90° — reflow it properly with writing-mode
  • Use vertical messages for long multi-paragraph messages — truncate or expand differently

Accessibility

Each message has aria-label including sender and timestamp. Messages list uses role='log'. New messages announced via aria-live='polite'.

Open Question

This is one of the most contested open questions in vertical UI. Horizontal bubbles are familiar to all users; vertical columns are consistent with reading direction. Which wins? The answer may depend on the content type.

← PreviousMarkerNext →Toast