用途
该技能用于在代码审查中验证浏览器最终呈现的标记是否正确设置了文本方向,适用于审查模板、服务端渲染 HTML 以及输出相关标记的共享组件。其目标是确保阿拉伯语、希伯来语、波斯语、乌尔都语等从右到左(RTL)语言以及混合方向内容能够被浏览器和屏幕阅读器正确显示与朗读。
主要能力
- 检查 HTML 文档是否使用适当的 dir 属性来指示文本方向,覆盖 RTL 语言及混合内容。
- 检查用户生成的内联文本是否使用 dir="auto" 或双向隔离(bidi isolation),例如姓名、账号名或片段中混用书写方向的情况。
- 在代码审查中标记渲染 HTML 违反该规则的具体元素、属性和路由。
- 不仅检查页面级语言包装,还检查用户生成的内联内容。
使用方式
技能提供快速参考、检查、修复、解释和代码审查几个部分。
快速参考要点:
- 对阿拉伯语、希伯来语、波斯语、乌尔都语在相应元素上设置 dir="rtl"。
- 对用户生成内容使用 dir="auto"。
- 与 CSS 逻辑属性(inline-start、inline-end)结合使用。
- 测试导航、图标和布局的 UI 镜像效果。
- 对行内混合方向的用户内容使用 <bdi> 等双向隔离方式。
检查:验证 HTML 文档是否使用适当的 dir 属性指示 RTL 语言或混合内容的文本方向;检查用户生成的内联文本是否在姓名、账号名或片段混用书写方向时使用 dir="auto" 或双向隔离。
修复:在 html 元素或特定元素上添加 dir 属性,取值为 'ltr'(从左到右)、'rtl'(从右到左)或 'auto'(自动检测);对混合方向的行内内容使用 <bdi> 或等效的双向隔离。
解释:说明 dir 属性如何帮助浏览器和屏幕阅读器正确显示和导航不同书写方向的文本。
代码审查:审查模板、服务端渲染 HTML 和共享组件中与设置 RTL 语言文本方向相关的输出标记,标记渲染 HTML 违反规则的具体元素、属性和路由,并检查用户生成的内联内容,而不仅是页面级语言包装。
完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/html/direction-attribute
适用场景
- 前端代码审查流程中检查多语言与 RTL 支持。
- 审查模板、服务端渲染 HTML、共享组件输出的标记。
- 检查包含用户生成内容(姓名、账号名、混合方向片段)的界面。
限制
资料未提供该技能的具体安装命令、运行环境要求、支持的框架清单、收费或价格信息,这些内容暂未提供。