HTML中ruby标签在深色模式下的样式适配-html教程-PHP中文网

ruby在深色模式下需显式设置rt的color、font-size及rp的color并移除opacity，html[data-theme]而非body上设主题属性，配合css变量响应切换，混排svg时用inline-flex对齐并固定尺寸。

html中ruby标签在深色模式下的样式适配

ruby标签在深色模式下文字重叠、注音不可读

默认情况下，ruby及其子元素rt、rp在深色背景上极易出现文字糊在一起或完全透明的问题——因为浏览器对rt的默认font-size极小（常为50%），且未设color和background-color，导致浅灰文字落在深灰背景上对比度不足，甚至被opacity: 0.7类规则意外覆盖。

rt必须显式声明color: var(--ruby-text);，不能依赖继承；推荐值如#a0a0a0（非纯灰，保证 WCAG AA 级对比度）
rt要禁用默认缩放：font-size: 1em;，再用line-height和vertical-align微调位置，避免和主文本挤成一团
rp（括号）常被忽略，但它在 Safari 中默认是灰色+半透明，在深色下几乎隐形；需统一设color: var(--ruby-paren);并移除opacity
不要用background-color: rgba(0,0,0,0.1)给rt加底衬——OLED 屏上会发灰，改用backdrop-filter: blur(2px)配合background-color: hsla(0,0%,10%,0.15)

ruby样式无法随data-theme="dark"响应

很多项目把data-theme="dark"挂在body上，结果ruby rt样式完全不切换。这是因为rt是匿名内联元素，其样式继承链断裂，且原生ruby结构不触发伪类重绘，仅靠[data-theme="dark"] ruby rt选择器权重不够。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

必须把data-theme属性写在html标签上：，否则html[data-theme="dark"] ruby rt匹配失败
避免只在@media (prefers-color-scheme: dark)里写ruby样式——它不响应 JS 主动切换，用户点按钮后rt颜色不会变
正确写法是两套变量同时定义：
html[data-theme="light"] { --ruby-text: #555; }
html[data-theme="dark"] { --ruby-text: #a0a0a0; }
然后所有ruby rt都用color: var(--ruby-text);

ruby在深色模式下与SVG/图标混排错位

当ruby包裹的文字旁有svg图标（比如带注音的术语+状态图标），vertical-align: middle在深色模式下容易失效——因为svg若设了fill="currentColor"，颜色变了但基线没同步调整，导致rt上浮或下沉。

ruby外层容器建议加display: inline-flex; align-items: center;替代纯内联流，避免vertical-align不可控
svg需显式设height: 1em; vertical-align: -0.125em;（比默认middle略高），与rt的line-height: 1.2对齐
禁用svg { max-height: 100%; }这类弹性约束——它会让图标在ruby内缩放失真，固定width/height更稳