SuperAPI AI 工具集

css-i18n

前端与建站

查看项目

更新于 10-15 21:53

技能介绍

用途:把锚定视口的物理方向属性(left、right、margin-left 等)改为跟随文本方向的逻辑属性,使 dir="rtl" 时布局自动翻转,改善阿拉伯语、希伯来语等 RTL 脚本的排版。

主要能力:先识别项目的样式写法(Tailwind、CSS Modules、CSS-in-JS、原生 CSS/SCSS、JSX 内联样式),再逐文件扫描并分类转换。高置信度必转:margin/padding 的 -left/-right 改为 -inline-start/-end;left/right/top/bottom 改为 inset-inline-start/end、inset-block-start/end,全四边可用 inset: 0;text-align 的 left/right 改为 start/end(center 无需改动);float、clear 改为 inline-start/end;border-left/right 系列改为 border-inline-start/end 系列。同值左右内边距可合并为 padding-inline。内联样式按 camelCase 转换,如 marginInlineStart、paddingInlineEnd。低优先级的 width/height 改为 inline-size/block-size,仅在支持竖排书写模式时考虑。

需人工判断:四角圆角映射为 border-start-start-radius 等;translateX、background-position、不对称的四值缩写、scroll-margin/padding 需按语义决定。明确不转:固定方向的返回箭头、动画关键帧、writing-mode、SVG 坐标属性、打印样式。Flexbox 与 grid 本身会自动响应 dir,justify-content、order、grid-template-columns 无需改动,但需注意 flex-direction: row-reverse 的意图与需要翻转的图标。

使用方式:按布局组件、共享组件、页面样式、全局样式的优先顺序处理,每个文件内先查找物理方向属性、分类、转换、再验证。验证时在 DevTools 或语言切换器中设置 <html dir="rtl">,检查文本对齐、内外边距镜像、定位元素落位与图标翻转是否正确,并运行既有测试排除快照回归。

限制与注意:应使用 HTML 的 dir 属性而非 CSS 的 direction 属性;混合 LTR/RTL 内容需 dir="auto" 或显式 dir;overflow-x: auto 的滚动条位置并非所有浏览器都翻转,需实测;第三方 UI 库可能内部使用物理属性,需确认其 RTL 支持。定价、平台与更多资源信息暂未提供。