Semantic Elements (T7) 测试

本页展示 plans/typo-css-typography.md 中 T7 各语义元素的渲染效果。每组先给源码，下面是渲染结果。

T7a. <q> 直角引号

他说：<q>今天天气真不错</q>。

他说：今天天气真不错。

嵌套引语自动升层（外「」内『』）：

他说：<q>她回了句 <q>真的吗</q>，就走了</q>。

他说：她回了句 真的吗，就走了。

引号由浏览器按 quotes 属性自动插入，全角字形与 chws 标点挤压正常配合。

T7b. <abbr> 缩写

<abbr title="Cascading Style Sheets">CSS</abbr> 与
<abbr title="世界贸易组织">WTO</abbr>

CSS 与 WTO

虚线下划线，悬停显示 title 提示；视觉上不会与链接混淆。

T7c. sub / sup 基线

H<sub>2</sub>O、E = mc<sup>2</sup>、x<sub>i</sub><sup>2</sup>

H₂O、E = mc²、x_i²

上下标不再撑开行高（line-height: 0 + 相对定位），正文的行间节奏保持不变。带脚注的句子1脚注定义区的编号同样验证过：sup.note-ref 与 .footnote-definition sup 的既有样式不受影响。¹里的编号 sup 走同一套基线。

T7d. <mark> 高亮

这句话里的<mark>重点片段</mark>被标出。

这句话里的重点片段被标出。

颜色是 colors.css 的令牌（--bg-mark / --border-mark），暗色模式有单独配色；高亮紧贴文字，不留侧边距，避免破坏中文网格。

T7e. 专名号 <u>

<u>鲁迅</u>生于<u>绍兴</u>，后移居<u>上海</u>。

鲁迅生于绍兴，后移居上海。

下划线沉到基线以下（text-underline-position: under）、粗细取自字形（from-font），与链接、<abbr> 的下划线都不同。class 版：鲁迅。

综合

各种元素混排于一段：

他说：鲁迅的《狂人日记》是新文化运动的代表作，如同 H₂O 之于 x² 般基本。