阿拉伯语网页必须设 dir="rtl" 并配合 lang="ar"，还需使用支持阿拉伯语的字体栈、CSS 逻辑属性（如 text-align: start/end）、块级容器控制方向，避免内联元素滥用 dir，表单控件需单独适配。
阿拉伯语网页必须设 dir="rtl"，但光加这个远远不够——字体回退、数字对齐、表单控件、CSS 伪类顺序、甚至 textarea 的光标行为都会出问题。
dir="rtl" 必须加在根元素或语义块级容器上
只给 <html dir="rtl"> 加属性是常见起点，但实际中常需更细粒度控制。比如页面主体是阿拉伯语，但某段引文是英文，就得嵌套 dir="ltr"；反之亦然。浏览器不会自动推断语言方向，lang 属性（如 lang="ar"）不触发 RTL 布局，它只影响拼写检查和语音合成。
-
dir是布局方向开关，lang是语言标识，二者要配合用，不能互相替代 - 避免在内联元素（如
<span>）上滥用dir，容易破坏段落流；优先用块级容器（<div>,<section>,<article>）包裹整段 RTL 内容 - React/Vue 等框架中动态渲染多语言内容时，别用 JS 拼接
dir字符串，应绑定为属性：例如 Vue 中写:dir="currentLang === 'ar' ? 'rtl' : 'ltr'"
font-family 要显式声明支持阿拉伯语的字体栈
很多中文字体或默认 system-ui 栈根本不包含阿拉伯字母形变（如连字、词首/词中/词尾形态），导致显示为方块或断开字符。仅靠 dir="rtl" 无法修复字体缺失问题。
- 推荐字体栈示例：
font-family: "Tajawal", "Cairo", "Segoe UI", "Helvetica Neue", sans-serif;—— 其中Tajawal和Cairo是 Google Fonts 上专为阿拉伯语优化的开源字体，支持 OpenType 连字特性 - 避免使用
font-family: "Times New Roman"或"Arial"单独作为主力字体，它们在阿拉伯语下缺乏字形上下文替换（GSUB）支持，词尾ـة或连接符ـ显示异常 - 用
@font-face加载阿拉伯字体时，务必加unicode-range分割，否则会拖慢所有语言用户的字体加载：例如unicode-range: U+0600-06FF, U+0750-077F;
text-align 和 margin/padding 的逻辑方向要改用 start/end
写死 text-align: right 或 margin-right: 1rem 在 RTL 下会翻车：当用户切换语言或系统方向时，这些值不会自动镜像。CSS 逻辑属性才是解法。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 把
text-align: right改成text-align: end，text-align: left改成text-align: start - 把
padding-right/margin-left这类物理方向属性，换成padding-inline-end/margin-inline-start；现代浏览器支持良好（Chrome 87+, Firefox 63+, Safari 15.4+） - 旧项目兼容 IE 或低端安卓 WebView 时，可用 CSS 自定义属性 +
[dir="rtl"]选择器做降级：button { padding-inline-start: 12px; }<br>[dir="rtl"] button { padding-right: 12px; }
表单控件与焦点管理在 RTL 下容易错位
input[type="text"] 和 textarea 默认从右开始输入，但光标位置、占位符（placeholder）对齐、清除按钮（clear）、日期选择器弹出方向等，在不同浏览器中表现不一致。
-
placeholder不会自动按dir对齐，需显式加text-align: start或text-align: end（取决于你希望占位符文字如何贴边） - Chrome 中
input[type="date"]的下拉箭头在 RTL 页面里仍固定右侧，但点击后日历弹窗可能从左上角展开——建议用dir="ltr"包裹该控件并单独样式重置 - 自定义下拉（
<select>）在 iOS Safari 中无法通过 CSS 控制箭头方向，只能接受系统原生行为；若需统一体验，得用 JS 实现无原生控件的下拉菜单
RTL 不是加个 dir 就完事的方向开关，它是贯穿 HTML 结构、字体加载、CSS 属性选择、表单交互的一整套约束。最容易被忽略的是字体回退链和逻辑属性迁移——这两处一旦漏掉，阿拉伯语用户看到的不是“略丑”，而是“根本没法读”。
