RTL CSS 变体生成

要解决的问题

当你的界面要支持阿拉伯语、希伯来语、波斯语这类从右到左（RTL）书写的语言时，麻烦就来了：你现有的样式表是按从左到右（LTR）的布局写的。margin-left 在 RTL 语境下会指向错误的一侧，float: left 的元素会跑到文字流的右边，text-align、padding、边框位置全部要翻转。

手动修复意味着逐条审查样式表里的方向性属性。项目越大，漏改的风险越高——一处没改的 margin-left 就足以让 RTL 页面出现莫名其妙的错位，而这类问题往往到视觉走查阶段才被发现。

技能如何工作

这个技能基于 RTLCSS，把已有的 LTR 样式表转换成一份独立的 RTL 配套样式表，核心流程：

• 扫描样式表中的方向性声明：margin-left、padding-right、float、text-align、边框位置等。
• 按 RTLCSS 规则逐条翻转：margin-left 变为 margin-right，float: left 变为 float: right。
• 不涉及方向的属性（颜色、背景、字体等）保持原样，不会被误改。
• 产出的是一份新的 RTL 样式文件，与原 LTR 样式表并存，而不是改写原文件。

这样本地化工作就不必再编辑每一处边距和对齐规则，只需为 RTL 页面加载对应的样式变体。

适用边界与注意点

• 这个技能只解决 CSS 层面的方向性问题。HTML 里的 dir 属性、文档结构和内容顺序仍需要你自行处理。
• 运行环境需要 Node.js。
• 原始资料提示：在敏感工作流中使用前，建议先审查上游项目源码。
• 它不处理 JavaScript 中的方向逻辑，也不解决 SVG 图标内部坐标系的翻转问题。