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

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

PreviousMarker Next Streaming Text

1	// Horizontal message · conventional
2	function 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",