Message
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.
Should chat message bubbles remain horizontal (familiar) or adapt to vertical text orientation (consistent with reading direction)?
DecisionHorizontal bubbles are familiar · vertical message columns match the reading axis but stay unfamiliar. No convention has settled it.
Horizontal vs Vertical
Vertical adaptation · each message is a column flowing right-to-left, matching the reading axis. Latest message on the left.
Guidance
- 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
- 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'.
Horizontal bubbles are familiar; vertical columns match reading direction. Which one wins likely turns on content type · mixed-language chat versus pure CJK.