bdo+dir="rtl"不能真正镜像翻转文本，因为它仅强制字符级视觉顺序重排（如"hello"显示为"olleh"），不改变字形朝向或触发css transform；其本质是绕过unicode双向算法覆盖渲染顺序，而非水平镜像。
为什么 bdo + dir="rtl" 不能真正镜像翻转文本？
直接用 <bdo dir="rtl">hello</bdo> 只会把文字顺序倒过来变成 olleh，不是水平镜像——它改的是书写方向和字符排列逻辑，不是 CSS 视觉层面的翻转。浏览器仍按 Unicode 语义渲染每个字符，dir="rtl" 不触发 transform 或 glyph 翻转。
bdo 的实际作用：强制覆盖双向算法，不是视觉翻转
bdo（bidirectional override）专用于干预 Unicode 双向文本排版，比如在阿拉伯语段落中强制插入一段英文按从右到左顺序显示。它不改变字形朝向，也不影响标点、数字、拉丁字母的视觉形态。
- 对纯 ASCII 文本（如
abc123），<bdo dir="rtl">abc123</bdo>渲染为321cba（字符逆序），但每个字母仍是正的 - 对含标点的文本（如
hello, world!），逗号和感叹号位置会随字符顺序调整，但本身不会左右翻转 - 对中文、日文等非双向脚本，
dir="rtl"几乎无可见效果，因为这些文字默认不参与双向重排
真正实现水平镜像的可行方案：CSS transform: scaleX(-1)
要让文字看起来像照镜子一样左右翻转，必须用视觉变换。现代浏览器支持 transform: scaleX(-1)，这是最直接、兼容性好（IE10+）、且不影响文本可访问性的方法。
<div style="transform: scaleX(-1); direction: ltr;">hello</div>
注意两点：
-
direction: ltr必须显式设置，否则某些浏览器（如旧版 Safari）在scaleX(-1)下可能意外触发双向重排，导致字符再次乱序 - 若容器有内边距或边框，需额外处理，因为
scaleX(-1)会把整个盒模型一起翻转，可能导致布局错位 - 翻转后光标位置、选区行为正常，但屏幕阅读器仍按原始 DOM 顺序朗读，无障碍友好
遇到字体不对称字符时的坑：括号、引号、连字符会“露馅”
纯视觉翻转会让某些字符暴露非对称设计，比如：( 变成类似 ) 的形状但不是真右括号，" 翻转后两端开口方向异常，–（en dash）和 —（em dash）可能显得粗细不均。
这不是 bug，而是字体本身的 glyph 没有做镜像配对。如果业务场景要求精确镜像（如 UI 预览、教学演示），得手动替换字符或使用 SVG 字形控制。
例如：<span style="transform: scaleX(-1)">“</span>（左双引号）翻转后视觉像右双引号，但语义仍是左引号——复制粘贴出来还是 “，不是 ”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
