html-ppt-to-pdf

将使用 `

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

下载

title等属性在纯文本容器中大多无效或需严苛条件：title需可聚焦才显示，contenteditable必须配tabindex="0"才符合wcag，spellcheck/autocapitalize/autocorrect仅对可编辑元素生效。

title、contenteditable、spellcheck、autocapitalize、autocorrect 这五个属性在 <p></p>、<span></span>、<div> 等纯文本容器中，要么无效，要么需满足严苛条件才能起作用——别指望加了就“有提示”或“能编辑”。 <h3>为什么 <code>title 在 <p></p> 上经常不显示

它不是“不支持”，而是触发条件被悄悄卡住：

• <p title="说明文字"></p> 在桌面 Chrome/Firefox 中可能显示，但 Safari（尤其旧版）要求该 <p></p> 必须可聚焦，否则悬停无反应
• 若父容器设了 overflow: hidden 或覆盖了伪元素（如 ::before 占满区域），实际悬停对象已不是 <p></p> 本身
• iOS Safari 完全不支持 title 的 hover 触发，长按也不会弹出——这不是 bug，是规范明确不实现
• 屏幕阅读器会读出 title，但仅当元素获得焦点时；而 <p></p> 默认不可聚焦，得手动加 tabindex="0"

contenteditable 要生效，必须配 tabindex

只写 <p contenteditable="true">文本</p> 是半残状态：鼠标点可以编辑，但键盘 Tab 进不去，WCAG 2.1 直接判失败。

• 必须显式加 tabindex="0"，否则无法通过键盘导航进入该区域
• 值只能是 "true"、"false" 或空字符串；contenteditable="plaintext-only" 是无效写法，所有浏览器都忽略
• 若内部含 user-select: none 的子元素（比如图标 <span></span>），光标可能卡在边界无法定位
• 建议顺手关拼写检查：spellcheck="false"，避免下划线干扰排版

autocapitalize 和 autocorrect 对非表单元素无效

这两个属性设计目标就是虚拟键盘行为，只对可编辑、可输入的上下文起作用。

• <p autocapitalize="sentences"></p> —— 完全没效果，浏览器静默忽略
• 只有加在 <input>、<textarea></textarea> 或 contenteditable 元素上才可能触发
• autocorrect="off" 在 type="password"、type="email" 上也无效，这些类型浏览器强制禁用自动更正
• 注意继承规则：如果 <form autocorrect="off"></form>，其内部 <input> 会继承该设置

真正安全可用的全局属性就那几个

在 <p></p>、<span></span> 这类文本载体上，别折腾“让提示弹出来”或“让段落自己大写首字母”——那些是表单域的活。

• id 和 class：稳定可用，JS/CSS 都认，但注意 id 重复时 document.getElementById() 只返回第一个
• data-*：比如 data-source="wiki"，JS 里用 el.dataset.source 读取，安全且无副作用
• lang 和 dir：影响字体回退、换行断字、标点方向，对多语言文本真实有用
• hidden：布尔属性，存在即隐藏，hidden="false" 依然隐藏——别写值，写了也白写

复杂点在于：同一个属性（比如 title）在不同元素上表现不一致，不是浏览器问题，而是语义和交互模型根本不同。加之前先问一句——这个元素用户会不会真的去悬停？会不会用键盘聚焦？会不会在里面打字？答案否，那就别硬加。