应使用 unicode-bidi: plaintext 而非 bidi-override，配合 direction: rtl 或 ltr 在单元格上显式设置，以确保阿拉伯文与英文混排时按Unicode规则正确渲染，避免顺序错乱、数字倒置及列宽异常。

表格单元格里阿拉伯文和英文混排时文字顺序错乱

直接用 unicode-bidi: bidi-override 会强制重排，反而破坏原有逻辑顺序。真正该用的是 unicode-bidi: plaintext —— 它让浏览器按字符原始Unicode方向性渲染，不主动插入隐式嵌入级别，对混合文本最安全。

• 只在 <td> 或 <th> 上设置，别作用于整个 <table>，否则影响表头对齐和边框渲染
• 配合 direction: rtl 或 direction: ltr 使用才有意义；单独设 unicode-bidi 无效
• 如果单元格含数字+阿拉伯文（如 “٢٠٢٤ تقرير”），plaintext 能保持数字左对齐、文字右对齐的自然行为，而 bidi-override 会让数字也倒过来

用CSS控制单个单元格的双向文本方向

不要依赖HTML属性如 dir="auto"，它在表格中常被忽略。显式CSS更可靠：

<td style="direction: rtl; unicode-bidi: plaintext;">الإيرادات 1500$</td>

• direction: rtl 设定块级基准方向，unicode-bidi: plaintext 告诉浏览器“别插手，照Unicode规则走”
• 避免用 dir="rtl" + unicode-bidi: bidi-override 组合——这会让 “1500$” 显示成 “$0051”，完全不可读
• 若内容来自用户输入或API，且无法预知语言顺序，优先用 direction: ltr; unicode-bidi: plaintext，再靠Unicode本身处理RTL字符

表格列宽被bidi渲染撑开导致布局错位

常见现象：含阿拉伯文的列突然变宽，相邻列被压缩。这不是字体问题，而是浏览器为RTL内容预留额外光标位置和连字空间造成的。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 加 table-layout: fixed 到 <table>，并给每列设明确 width（如 <col width="200">），能锁住宽度
• 慎用 white-space: nowrap——它会阻止阿拉伯文字换行，进一步加剧溢出；改用 overflow: hidden; text-overflow: ellipsis 更稳妥
• Chrome 和 Firefox 对 unicode-bidi: plaintext 的宽度计算略有差异，测试时务必在两者中都检查列对齐

JavaScript动态插入混合文本后bidi失效

用 innerHTML 或 textContent 插入含阿拉伯文的字符串时，若没同步设置CSS方向，浏览器会按父容器默认方向（通常是LTR）解析，导致首字符错位。

立即学习“前端免费学习笔记（深入）”；

• 插入前确保目标单元格已有 style="direction: rtl; unicode-bidi: plaintext;"，而不是等插入后再加样式
• 不要用 element.setAttribute('dir', 'rtl') 代替CSS——HTML dir 属性在表格单元格中兼容性差，尤其在Safari中常被忽略
• 若用框架（如React），在JSX里写 <td style={{ direction: 'rtl', unicodeBidi: 'plaintext' }}>...，注意React自动转驼峰，unicodeBidi 不是 unicode-bidi

实际中最容易被忽略的，是表格整体 direction 和单元格局部 direction 的冲突。比如 <table dir="ltr"> 里某个 <td dir="rtl">，在旧版Edge里可能完全不生效——必须用CSS覆盖，且不能省略 unicode-bidi: plaintext。