竖排

适合谁看：做古籍、诗词、书法风格或传统风格的版面，需要竖排中文的设计师和开发者。

竖排和横排的区别

clreq 列出的主要差异^[1]：

项目	竖排	横排
文字方向	从上到下	从左到右
行的方向	从右到左	从上到下
翻页	书从左往右翻（右侧装订）	书从右往左翻（左侧装订）
大陆标点位置	字框右上角	字框左下角
大陆引号	直角引号「」	弯引号 “ ”
图表说明	放在图表左右	放在图表上下

标点要换字形

竖排时，括号、引号、书名号、破折号、省略号要转 90°；大陆式的逗号、句号要从左下角挪到右上角。这些通常由字体里的竖排字形（OpenType vert、vrt2 功能）自动完成，所以竖排一定要用支持竖排的字体。字体不支持时，标点会躺倒或位置错误。

西文和数字怎么摆

clreq 列出三种：

逐字直立：单个字母、首字母缩写（如 GDP），用和汉字等宽的字形；
整体顺时针转 90°：一般的英文单词、句子、四位以上的数字；
纵中横：两三位数字横着排在一个字的位置里，如「28」。

竖排时也常直接用汉字数字（如「二〇二六年」）。

网页上的竖排

.vertical {
  writing-mode: vertical-rl;   /* 从上到下，行从右到左 */
  text-orientation: mixed;     /* 中文直立，西文旋转 */
}
.vertical .tcy {
  text-combine-upright: all;   /* 纵中横 */
}

据 MDN 兼容性数据：writing-mode 在 Chrome 48、Firefox 41、Safari 10.1 起无前缀支持^[2]^[3]；text-combine-upright 在 Chrome 48、Firefox 48、Safari 15.4 起支持^[4]。

注意：

竖排时 width 和 height 的作用对调，用 inline-size、block-size 这类逻辑属性更省事；
竖排要加 lang="zh-Hans" 或相应的语言标记，浏览器和字体才能选对标点字形。

参考资料（4）