AOS/skills/design/horizontal-craft/reference/directions.md

排版方向 Text Direction：横排 / 直排 / 混排

中文是世界上少数能横竖两套排版系统并行的文字。"用什么方向"是任何中文排版项目的第一个决策，而不是默认横排。本文给出方向决策树、参数对照、CSS 实现、地区风格差异。

一、方向决策树

内容主要属性是什么？
│
├─ 古籍 / 文言 / 诗词 / 书法集 / 题词 / 对联 ────────────→ 直排
├─ 邀请函 / 请柬 / 礼仪文书 / 书信复古 ──────────────→ 直排
├─ 博物馆图录 / 艺术画册中"诗题画跋"页 ────────────→ 直排
├─ 杂志 / 报纸 / 教材 / 学术论文 / 商务文档 ───────→ 横排
├─ 现代小说 / 散文 / 网页 / H5 / App ───────────────→ 横排
└─ 工具书 / 字典 / 辞海 ───────────────────────→ 横排（直排版多见于民国老版本）

需不需要混排？
│
├─ 直排中遇 1 字英文/缩略词 ────→ 正立排（保持横向单字）
├─ 直排中遇 2-3 位阿拉伯数字 ───→ 纵中横排 tate-chu-yoko（保持横向小组）
├─ 直排中遇整段西文/词组 ───────→ 顺时针 90° 旋转
├─ 直排中遇竖排小注 ──────────→ 双行夹注（注文两行平行，字号 1/2）
├─ 横排中遇直排标题/匾额 ──────→ 局部 writing-mode: vertical-rl
└─ 横排中遇直排小段诗词引文 ───→ 局部直排（"插秧式"）

二、横排 vs 直排参数对照

维度	横排	直排
文字方向	左 → 右	上 → 下
行方向	上 → 下	右 → 左
翻页方向	从左向右翻（左侧装订）	从右向左翻（右侧装订）
正面页位置	右页（奇数页）	左页（奇数页）
分栏方向	垂直切分（左中右栏）	水平切分（上中下栏）
图/表标题位置	上方 / 下方	左侧 / 右侧
表头行位置	上方	右侧
表头列位置	左侧	上方
末页多栏行数	各栏尽量对齐，余空在末栏末尾	顺其结束，各栏行数可不齐
行长上限	≤ 48 字	≤ 55 字
行长下限	≥ 10 字	≥ 10 字
CSS writing-mode	horizontal-tb（默认）	vertical-rl

三、标点在横/直排中的差异（大陆 GB/T 15834-2011）

关键差异点。错配会让版面瞬间显业余。

标点	横排（大陆）	直排（大陆）	港台
句号 。	字面左下角	字面右上角	字面正中
逗号 ，	字面左下角	字面右上角	字面正中
顿号 、	字面左下角	字面右上角	字面正中
冒号 ：	字面左下角，直立	直立偏右（不转 90°）	居中直立
分号 ；	字面左下角，直立	直立偏右（不转 90°）	居中直立
问号 ？	字面左下角，直立	直立（不转 90°）	居中直立
叹号 ！	字面左下角，直立	直立（不转 90°）	居中直立
引号（双）	弯引号 " "	直角引号 「」（双）	直角引号
引号（单）	弯引号 ' '	直角引号 『』	直角引号
书名号	《》〈〉	《》（直立）	甲式波浪 ﹏（台湾）/ 乙式《》
破折号	—— 占 2 字水平居中	占 2 字垂直居中	同
省略号	…… 占 2 字，6 点水平居中	占 2 字，6 点垂直居中	同

反例（要避免）：

• 把日文规则套用到中文直排：冒号、分号、问号、叹号在日文直排转 90° 躺倒；中文必须保持直立。某代 macOS 因 Unicode UAX#50 早期不完善曾把中文比照日文，是错误案例。
• 直排正文用弯引号 " "（应改用直角「」）。

四、直排中混排西文的 3 种方法（W3C CLReq §2.1.3）

直排文本中遇到西文/数字时，根据长度选用：

方法 1：正立排（Upright）

• 用于：单个字母、首字母缩略词（如 GDP、CPU、A）
• 做法：用与汉字等宽的字体或全角字符，与汉字同方向逐字排
• CSS：text-orientation: upright
• 示例：一个 G D P 增速… （G、D、P 各占一格，与汉字同方向）

方法 2：顺时针 90° 旋转（Rotated）

• 用于：一般单词 / 句子 / 4 位以上数字（如 "JavaScript"、"2024"、"the quick brown fox"）
• 做法：用比例字体，整词整句旋转
• 汉字与西文之间间距 ≤ 1/4 汉字宽；西文位于行首/行尾时不加空白
• CSS：text-orientation: sideways（即默认行为）

方法 3：纵中横排（Tate-chu-yoko 縦中横）

• 用于：2–3 位阿拉伯数字、短缩写（如 "3.0"、"A+"、"2B"、"21"、"AM"、"99"）
• 做法：比例字体，保持正方向横置；宽度与行幅相当或稍出
• 活字时代严格不超过 1 个汉字宽；现今可凸出行间
• CSS：text-combine-upright: all
• 示例：年龄 21 岁、3.0 升发动机、温度 25 ℃

混排间距规则（直排同横排）

• 直排中通常不用弯引号（应改用直角引号）
• 若引用西文且用弯引号，需跟随被引文旋转
• 直排中阿拉伯数字内部不可分行，破折号/省略号不可分行

五、横排中嵌入直排

现代横排文档中嵌入小段直排的场景：

• 标题 / 匾额 / 题字
• 古诗引文（一首七绝直排展示，强化古意）
• 对联（两幅竖排平行展示）
• 印章、闲章、款识
• 杂志专题"穿插式"页面

CSS 实现：

.vertical-quote {
  writing-mode: vertical-rl;       /* 直排：从右向左 */
  text-orientation: mixed;          /* 汉字直立，西文转横 */
  height: 20em;
  margin: 0 1em;
}

注意事项：

• 直排段在横排里要"做容器"——给定明确高度，不要让它自由撑开
• 直排标点要切换到右上角形态；不要直接搬横排标点
• 嵌入位置遵守"文意停顿"——句间嵌入而非词间

六、装订与翻页方向

装订方向直接影响版心位置和阅读体验，不能搞反。

方向	装订侧	翻页方向	第一页（正面）位置	用途
横排左翻	左侧	从左向右	右页（奇数页）	现代中文书、教材、报告、所有英文书
直排右翻	右侧	从右向左	左页（奇数页）	古籍、文言、诗集、传统书法集
直排左翻（错的）	左侧	从左向右	—	中日韩三国都不用

关键检查项：

• 大标题必须出现在正面页（横排右页 / 直排左页），不能开在反面页
• 章节末页留出余白时，留白方向匹配阅读方向（横排留下方、直排留下方）
• 跨页大图：横排左页向右延展、直排右页向左延展

七、CSS writing-mode 完整指南

/* 横排（默认） */
.horizontal {
  writing-mode: horizontal-tb;     /* horizontal, top-to-bottom */
}

/* 直排（中文、日文、传统蒙文） */
.vertical {
  writing-mode: vertical-rl;       /* vertical, right-to-left lines */
  text-orientation: mixed;          /* 汉字立、半角西文转 90° */
}

/* 直排但行从左向右（少见，部分新蒙文） */
.vertical-lr {
  writing-mode: vertical-lr;
}

/* 直排内单字符强制立起来（缩略词、单字母） */
.upright {
  text-orientation: upright;
}

/* 纵中横排（数字小组保持横置） */
.tcy {
  text-combine-upright: all;
}

完整 HTML 示例：

<article style="writing-mode: vertical-rl; height: 30em;">
  <p>
    秦时明月汉时关，万里长征人未还。
    但使<span style="text-combine-upright: all;">21</span>世纪有李广，
    不教胡马度阴山。
  </p>
</article>

八、地区风格三大体系

地区差异的索引表——一个项目锁定一个地区，按下面维度逐项对齐。具体执行细节看对应文件：标点详见 punctuation.md、字体详见 fonts.md、避头尾详见 punctuation.md § 四。

维度	大陆简体	港台繁体	日文
标点位置	横排左下、直排右上	居中（横直排都一样）	横排左下、直排右上（同大陆）
避头尾严格度	GB 级 / strict 级	多不严格（标点居中无突兀）	严格
标点风格	开明式（句末全宽、句内半宽）多	居中式 + 多不调宽度	开明式 + 严格挤压
直排冒号分号	直立偏右	居中直立	转 90° 躺倒
引号	弯引号 ""''（横）/ 直角「」（直）	直角「」『』（先单后双）	直角「」
书名号	《》〈〉	甲式波浪 ﹏（书底）+ 乙式《》	二重括号 『』
间隔号 ·	占半字宽	占全字宽	占全字宽
公文字体	仿宋	楷体	明朝体

核心心法：项目开始就锁定地区风格，不要"中港台日"混用。

九、什么时候直排？什么时候横排？

必须直排

• 古籍影印 / 古籍今译保留原貌
• 文言文学校教材（部分台湾教材）
• 中医典籍、佛经、道经
• 书法作品集、字帖
• 传统戏曲剧本（旧版）
• 朱批奏折、家书复刻

强烈推荐直排

• 当代古典诗词集
• 茶艺 / 香道 / 国画相关书籍
• 高端艺术画册"诗题画跋"页
• 邀请函 / 请柬 / 谢卡（小段）
• 博物馆图录的部分内页（混合）
• 题字 / 题词 / 闲章

可以选直排（增加古意 / 仪式感）

• 散文集封面
• 招贴海报标题
• 茶包装、白酒包装文案
• 婚礼喜帖
• 复古风咖啡店菜单

不要直排

• 现代长文（用户已习惯横向扫视）
• 表格密集的文档（直排表格难做）
• 大量中英混排的技术 / 学术内容
• 网页正文（写读不便、生态差）
• App / H5（小屏直排压力大）

十、混排（横直交叉）的进阶玩法

不要把"混排"理解为"破格"——这是中文排版的基础语法。常见 5 种：

1. 横排正文 + 直排引文

正文横排，引用的古诗、对联、题词单段直排，与正文形成节奏对比。

<article class="horizontal-body">
  <p>李白《静夜思》写道：</p>
  <blockquote class="vertical-quote">
    床前明月光，疑是地上霜。<br>
    举头望明月，低头思故乡。
  </blockquote>
  <p>这首诗体现了…</p>
</article>

2. 直排正文 + 横排数据

古籍今译类，正文直排，但年表、数据表、地图说明等横排。靠纸张/底色区分。

3. 跨页"半横半直"

左页直排（古文原文）、右页横排（今译），翻页对照。常见于古籍今译。

4. 标题直排、正文横排

封面 / 章首页用直排大字标题，营造仪式感；内页正文回到横排实用。

5. 双行夹注（小注）

直排正文中插入双行夹注：两行小注同高，字号为正文 1/2，平行排列。古籍标配。

正┃ 双行夹注：
文┃ 上行注┃下行注
正┃ 上行注┃下行注
文┃

十一、检查清单（方向相关）

排印完成前必过：

• 排版方向（横 / 直 / 混）是否与内容气质匹配？
• 装订方向是否与排版方向对应？（横左翻 / 直右翻）
• 大标题是否在正面页（横右页 / 直左页）？
• 直排中数字是否用了纵中横排？
• 直排中单字英文是否用了正立排？
• 直排标点是否切换到右上角形态？
• 直排冒号分号是否保持直立（没躺成日式）？
• 直排引号是否改用了直角「」？
• 地区风格是否一致？（没把港台居中标点 + 大陆 GB 避头尾混用）
• 横排嵌直排的段落是否给了明确高度？
• 图表标题方向是否匹配主排版方向？
• CSS writing-mode 和 text-orientation 是否成对设置？