怎么用HTML编辑网页实现古文排版中的双行注解样式-html教程-PHP中文网

最稳妥用ruby标签，因其专为东亚注解设计且语义明确——需严格遵循主文注文结构，配合rt { font-size: 0.6em; line-height: 1; }实现紧凑双行效果。

怎么用html编辑网页实现古文排版中的双行注解样式

双行注解在HTML里用什么标签最稳妥古文排版里的双行注解（比如正文一行、小字注释紧贴其下并左右对齐），本质是「一对主文 + 附属注文」的垂直对齐关系。HTML原生没有`ruby`以外的语义化标签能表达这种结构，而`ruby`正是为东亚注音/注解设计的——它支持`rb`（基文）、`rt`（注文）、`rp`（括号fallback）三类子元素，浏览器默认渲染为上下叠排，且能通过CSS控制间距和字体大小。不推荐用`div`+绝对定位或`table`模拟：前者脱离语义、屏幕阅读器无法识别注解归属；后者在响应式场景下容易错位，且`table`语义与注解无关。

关键点：

ruby必须包裹完整的注解单元，不能跨字切分（比如“之”字带注，就得<ruby><rb>之</rb><rt>代词，指代前文</rt></ruby>）
单个ruby块内只能有一个rb和一个rt，多字共用一注时需多个ruby并列（如“孟子见梁惠王”每字独立注，就写6个ruby）
现代浏览器（Chrome 100+、Firefox 95+、Safari 16.4+）对ruby支持良好，但IE全系不支持，需确认目标用户环境

怎么让注文变小、居中、不撑高行距默认`ruby`的`rt`会继承父级字号，且上下留白较大。要贴近传统雕版注文效果，得用CSS压窄：

直接在rt上设样式：

rt {
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0.02em;
}

重点说明：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载