方向（RTL）

平台渲染你的生成器时，文档的 dir 跟随用户语言，而受支持的语言里有若干种从右向左书写。镜像不是可选项，也没有第二套样式表：布局要自己翻转。

按现代写法这几乎是免费的。凡是单侧取值的地方一律用逻辑属性——margin-inline-start、padding-inline-end、inset-inline-start、text-align: start；对称的简写不用管；flex 与 grid 自己会镜像，给 RTL 加 flex-row-reverse 是把已经翻过的布局再翻回去。

画布内容永不镜像。把画板所在的层锁在 direction: ltr，里面的逻辑属性永远解析成左，画板朝向和导出文件的方向就与外面的界面无关。锁到画板为止：画布上的覆层是界面，不是产物，所以它们随一切镜像——RTL 下缩放簇和加工 Tips 胶囊属于镜像后的那一边。把整个画布区域锁死，会把从右向左阅读者的控件搁在错误的边上。

逐项要改的地方

• 滑块的 webkit 填充用 linear-gradient(to right …)，RTL 要改成 to left。
• 拖拽改值的方向要反转：向起始端拖是增大。
• 由 JS 定位的下拉浮层要对齐触发器的末端边，而不是照抄 left。
• 不要用 inset-inline-start: 50% 加 translateX(-50%) 居中浮层；用 inset-inline: 0; margin-inline: auto。
• 进度条的 transform-origin 要换边。
• 开关圆钮从 inset-inline-start 出发，却用 translateX(16px) 位移；transform 是物理方向，RTL 需要 -16px。
• 数字和它的单位读作一个整体。在 RTL 的段落方向里「6 mm」会被重排成「mm 6」。数值字段没事——它的单位是独立元素、钉在末端——但把两者拼起来的读数（比如滑块旁那个）要加 unicode-bidi: plaintext。任何表示「向前」的 transform 都要自己决定方向。

提交前设 dir="rtl" 把整个流程走一遍。