dir="rtl"仅改变文本渲染方向而非字符顺序，真正倒序需用JavaScript的Array.from(str).reverse().join('')，视觉镜像则用CSS transform: scaleX(-1)但存在无障碍和交互问题。
单纯用 dir="rtl" 无法实现文本倒序排列，它只是改变文字渲染方向（如从右向左显示阿拉伯文），不会反转字符顺序。真要倒序，得靠 JavaScript 或 CSS 的 transform: scaleX(-1) 等手段，但后者只是视觉镜像，不改变 DOM 结构和语义。
为什么 dir="rtl" 不等于倒序
HTML 的 dir 属性控制的是 Unicode 双向算法（BIDI）的解析逻辑，影响的是连字、光标移动、数字对齐等排版行为，不是字符串操作。比如：
<p dir="rtl">hello world</p>
实际渲染仍是 “hello world”，只是整体靠右对齐，且若混有阿拉伯数字或 RTL 字符，才触发 BIDI 重排——但英文单词内部字母顺序完全不变。
- 输入
"abc123"，dir="rtl"后仍是a b c 1 2 3从右往左排列，不是"321cba" - 屏幕阅读器仍按原始顺序朗读，无障碍支持被破坏
- 复制粘贴出来的文本仍是原顺序，不是镜像结果
真正倒序：用 JavaScript 的 split() + reverse() + join()
这是最直接、语义正确、可复制可访问的方式：
const original = "hello";
const reversed = original.split('').reverse().join(''); // → "olleh"
注意点：
- 中文、Emoji、组合字符（如带声调的 é）可能被错误拆分，需用
Array.from(str)或str.codePoints()替代split('') - 若处理用户输入，记得先
trim()防空格干扰 - 不要在循环里反复调用，避免性能问题；长文本建议节流或防抖
视觉镜像：CSS transform: scaleX(-1) 的坑
如果只要“看起来像倒过来”，可以用：
<div style="transform: scaleX(-1); direction: rtl;">hello</div>
但必须同步加 direction: rtl，否则英文单词内字母会因 BIDI 规则再次翻转，导致意外结果。常见问题：
- 按钮点击区域反向，交互坐标错位
- 子元素若设了
transform: scaleX(-1)，会叠加翻转，变成正向 - 字体 hinting 和 subpixel 渲染异常，文字发虚
- 打印时部分浏览器忽略
transform，镜像失效
复杂字符倒序要小心 Unicode 分段
像 "??"（程序员 Emoji）是多个码点组成的组合序列，split('') 会把它切成碎片。安全做法是：
function reverseString(str) {
return Array.from(str).reverse().join('');
}
reverseString("a??b"); // → "b??a"，而非乱码
更严谨场景（如国际化文本处理）应考虑使用 Intl.Segmenter，但目前兼容性有限，日常用 Array.from() 已覆盖绝大多数情况。
真正倒序和视觉镜像根本不是一回事，选哪种取决于你要解决的问题：是让程序逻辑处理逆序字符串，还是仅做 UI 展示特效。混淆二者，后期调试和维护成本会很高。
