/*! * rtl.css —— 阿拉伯语（RTL）版式镜像 * 广州中棠会计师事务所 · 2026-09-25 * * 用法：仅在 的页面挂载（由 translate_site.py 自动注入）， * 挂在 en.css 之后，靠层叠顺序覆盖方向性规则。 * * 设计原则： * 1. 只翻转"方向"，不动配色、不动间距尺寸、不动品牌识别 * 2. 优先用 CSS 逻辑属性（inline-start / inline-end），浏览器原生跟随 dir * 3. 拉丁文/数字/品牌名在 RTL 里要单独保持 LTR，否则 "Zhongtang CPAs"、 * "44010251"、邮箱、URL 会被拆散 —— 这是最容易翻车的地方 * 4. 不改动任何英文/其他语种页面（选择器全部限定在 [dir="rtl"] 内） */ /* ============================================================ 一、全局方向 ============================================================ */ [dir="rtl"] { direction: rtl; text-align: right; /* 默认右对齐 */ } /* ============================================================ 一之二、★ 阿拉伯语字体栈与行高（2026-09-25 走查后新增） ------------------------------------------------------------ 问题：rtl.css 原来完全没有 font-family 声明，阿语页继承了 en.css 的 `Inter, -apple-system, Segoe UI, Roboto, Noto Sans`。 这套栈里没有一个是为阿拉伯字形设计的，回退到的字体（Windows 上 通常是 Segoe UI 的阿拉伯子集）字形单薄、字距生硬，观感像 "英文系统里凑合显示的阿语"。 为什么不用 webfont（如 Noto Naskh Arabic）： en.css 顶部明确写了 "No webfonts on purpose: zero extra requests keeps overseas load fast" —— 中东访客的网络到中国主机本来就远， 再加一个 100KB+ 的阿语字体（阿拉伯字形集很大）会明显拖慢首屏。 因此这里走系统字体优先：中东主流设备是 Windows / Android / iOS， 三者都自带质量不错的阿语字体。 行高：阿语有大量上下标注（تشكيل）与升降部，1.65 太紧， 正文提到 1.9、标题提到 1.45，读起来才不挤。 ============================================================ */ [dir="rtl"] { font-family: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Arabic Typesetting", "Traditional Arabic", "Geeza Pro", Tahoma, "Microsoft YaHei", Arial, sans-serif; } [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] blockquote { line-height: 1.9; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; } [dir="rtl"] h4, [dir="rtl"] h5 { line-height: 1.55; } /* 长阿语词不撑破容器 */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] li { overflow-wrap: break-word; word-break: normal; } /* 阿语正文略放大一档：同等字号下阿语视觉上比拉丁文小 */ [dir="rtl"] .en-lead { font-size: 18px; line-height: 1.85; } [dir="rtl"] .en-hero h1 { line-height: 1.4; } /* 标题、正文段落跟随右对齐；居中的保持居中 */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] dd, [dir="rtl"] dt, [dir="rtl"] label, [dir="rtl"] th { text-align: right; } [dir="rtl"] .en-center, [dir="rtl"] .sec-head, [dir="rtl"] .sec-head.left, [dir="rtl"] .lead, [dir="rtl"] .en-cta-actions-center { text-align: center; } /* ============================================================ 二、列表缩进：padding-left -> padding-inline-start ============================================================ */ [dir="rtl"] .en-aside li { padding-left: 0; padding-right: 20px; } [dir="rtl"] .en-book-note ul { padding-left: 0; padding-right: 18px; } [dir="rtl"] .en-article ul, [dir="rtl"] .en-article ol { padding-left: 0; padding-right: 22px; } /* ============================================================ 三、间距翻转 ============================================================ */ /* 导航：原来 margin-left:auto 把导航推到右侧，RTL 下要推到左侧 */ [dir="rtl"] .en-nav { margin-left: 0; margin-right: auto; } [dir="rtl"] .en-chips .ch-key { margin-right: 0; margin-left: 4px; } [dir="rtl"] .en-slot input { margin-right: 0; margin-left: 8px; } /* 居中块的 auto 外边距两侧都要保留 */ [dir="rtl"] .en-center .en-head, [dir="rtl"] .en-cta-band .wrap.en-center .en-measure { margin-left: auto; margin-right: auto; } /* ============================================================ 四、表格：数字列右对齐 -> 左对齐（RTL 里"末尾"在左边） ============================================================ */ [dir="rtl"] .en-table th, [dir="rtl"] .en-table td { text-align: right; } [dir="rtl"] .zt-hnte-table td:last-child, [dir="rtl"] .zt-band-table th:last-child, [dir="rtl"] .zt-band-table td:last-child { text-align: left; } /* ============================================================ 五、箭头与图标：→ 要变成 ← ============================================================ */ [dir="rtl"] .en-ic-more::after { content: " \2190"; } /* ← */ [dir="rtl"] .en-svc-card:hover .en-ic-more::after { margin-left: 0; margin-right: 5px; } /* ============================================================ 六、★ 关键：拉丁文 / 数字 / 品牌名保持 LTR ------------------------------------------------------------ 阿拉伯语段落里混排的英文品牌、证书编号、邮箱、URL、电话， 在 RTL 环境里会出现"数字被挪到左边、加号跑到右边"的错乱。 用 bdi + direction:ltr + unicode-bidi:isolate 隔离它们。 ============================================================ */ [dir="rtl"] bdi, [dir="rtl"] .ltr, [dir="rtl"] .en-logo-txt, [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp { direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: left; } /* 证书编号、邮箱、电话、URL 一律按 LTR 呈现 */ [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="http"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* 纯数字串（金额、年份、编号）保持 LTR 连排 */ [dir="rtl"] .num, [dir="rtl"] .zt-calc-val, [dir="rtl"] .en-cred, [dir="rtl"] .stat b { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ============================================================ 七、表单：输入框与占位符右对齐，但数字/邮箱输入保持 LTR ============================================================ */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: left; } /* 下拉箭头位置翻转 */ [dir="rtl"] select { background-position: left 12px center; padding-right: 12px; padding-left: 34px; } /* ============================================================ 八、flex 容器：row 方向由 direction:rtl 自动镜像， 但显式写了 justify-content 的要以视觉为准复核 ============================================================ */ [dir="rtl"] .en-btn, [dir="rtl"] .en-cta-actions, [dir="rtl"] .en-contact-inline { flex-direction: row; /* rtl 下自动从右往左排 */ } /* 按钮里图标在文字后 -> RTL 下应在文字前（视觉上是"前"） */ [dir="rtl"] .en-btn > svg, [dir="rtl"] .en-btn > .ico { order: -1; } /* ============================================================ 九、常见问题 FAQ 的展开箭头翻转 ============================================================ */ [dir="rtl"] .faq-q { text-align: right; } [dir="rtl"] .faq-q .ico, [dir="rtl"] .faq-q svg { transform: scaleX(-1); } /* ============================================================ 十、移动端 ============================================================ */ @media (max-width: 640px) { [dir="rtl"] .en-nav { margin-right: 0; } [dir="rtl"] .en-article ul, [dir="rtl"] .en-article ol { padding-right: 18px; } } /* ============================================================ 十一、打印 ============================================================ */ @media print { [dir="rtl"] { direction: rtl; } }