方向（RTL）
平台会把你的生成器渲染在一个 dir 跟随用户语言的文档里。镜像不是可选项，也没有第二份样式表——布局必须自己翻。
用下面示例上方的 LTR / RTL 开关就地对照。按现代写法写，这几乎是免费的：每一个单侧取值都用逻辑属性——margin-inline-start、padding-inline-end、inset-inline-start、text-align: start。左右对称的简写完全不用管，flex 和 grid 会自己镜像；为 RTL 加 flex-row-reverse 是把一个已经翻好的布局再翻一次。
画板
mm
mm
重新生成
050100150200250300350400450500550600650700750
200 mm
点开关，注意哪些翻了、哪些没翻。翻的：轨换边、标签与数值互换、滑块从另一端填充、开关拇指移到另一侧——全部由逻辑属性和 flex 自己完成，没有一处 flex-row-reverse。没翻的：标尺零点、刻度方向、画板位置。第一行的阿拉伯语标签（عرض اللوح，画板宽度）是文字自己从右往左：LTR 下 عرض 在左、اللوح 在右，RTL 下两个词调个头。下面那行中文只是整块靠右，字仍然从左往右——200 永远是 200 不会变成 002。方向属性改的是排列，不是文字内部的书写方向。画板、标尺和产物永不镜像——把画板那一层锁 direction: ltr，它内部的逻辑属性就永远解析成左，产物朝向与围绕它的界面无关。但画布上的浮层是界面、不是产物，它们跟着翻：RTL 下「重新生成」落在镜像后的那一侧。
这套系统实测踩过的坑
| 现象 | 原因与修法 |
|---|---|
| 滑块手柄往反方向走 | webkit 填充用 linear-gradient(to right …)，RTL 下要换成 to left |
| 拖拽改值方向相反 | 取 direction 后把 delta 符号取反 |
| 下拉浮层错位 | JS 定位时 RTL 下要和触发器右边缘对齐，不能照搬 left |
| 居中的浮起提示偏一半 | 别用 inset-inline-start:50% + translateX(-50%)，用 inset-inline:0; margin-inline:auto |
| 进度条从错误的一端长出 | transform-origin 要跟着换边 |
| 开关拇指滑出轨道外 | 拇指起点用 inset-inline-start 却用 translateX(16px) 走位移——transform 是物理方向，RTL 下要 -16px。任何用 transform 表达「往前走」的位移都要自己判一次方向 |
| 标签与输入框相撞 | 单侧内边距没翻。全用逻辑属性 |