俄语阿拉伯语网站排版避坑指南
上周帮客户改版阿拉伯语电商站，调试到凌晨三点发现标题莫名错位，最后发现是某个标点符号没闭合。搞小语种网站的朋友应该都懂这种痛：俄语变音符号飘到西伯利亚，阿拉伯语连字变成乱码方块。今天聊聊实战中那些教科书不会告诉你的排版雷区。
俄语排版：变音符号与断词陷阱
俄语字母上的变音符号（比如 ё, й）看着不起眼，但浏览器渲染时极易出幺蛾子。去年我们接手某能源企业官网，测试时发现 Chrome 下所有带 й 的单词间距崩坏。排查三小时发现是全局设置的 letter-spacing 值放大了符号偏移量。解决方案很简单：给俄文区块单独重置 letter-spacing: normal，再加条 font-variant-position: sub 锁死变音位置。
更头疼的是断词问题。俄语复合词平均长度是英语两倍，比如 "электрометаллургический"（电冶金的）。强行用 CSS 的 word-break: break-all 会切断词根，本地用户直接懵圈。正确做法是：预加载俄语专用断词字典（比如 Hyphenator.js 的 ru 模块），配合 hyphens: auto 属性。实测下来断词准确率从 37% 提到 89%。
阿拉伯语 RTL 实战：从镜像到连字
阿拉伯语从右向左（RTL）排版是基础常识，但新手常栽在这些细节：表单输入框光标起始方向反了，数字排序还倔强地左对齐。关键得在 标签加 dir='rtl' 属性，再用 CSS 的 :lang(ar) 选择器微调数字方向。某支付网关就因日期控件没做 RTL 适配，沙特用户输卡号直接报错。
连字（Ligatures）才是真正的噩梦。阿拉伯字母根据位置变化形态，比如 ي 在词首词中词尾有四种写法。某新闻站标题用默认字体，「الجامعة」（大学）显示成三个分离字母被客户骂不专业。必须用支持 OpenType 特性的字体（如 Adobe Arabic），并在 CSS 激活：font-feature-settings: 'calt' 1, 'liga' 1。附赠个血泪经验：千万别用 Google Fonts 的早期 Noto Sans Arabic，它在 Windows 的连字渲染全是坑。
字体渲染：跨平台兼容生死线
阿拉伯语用户 60% 用安卓机，俄语区 Windows 占八成，字体适配必须分平台。我们在迪拜项目实测发现：思源黑体阿拉伯文版（Noto Naskh Arabic）在 iOS 清晰锐利，但到小米手机上直接糊成一片。最终方案是：Android 端强制加载 Tahoma（系统内置），iOS 和 Win 用 Noto。CSS 要写三层 @font-face 做平台嗅探。
俄语区更麻烦。用户可能装 Helvetica CY 这类本地字体，但字母 Д 在不同字体里宽度差 20%。保险做法是：body 字体栈最后必须加 serif，避免无衬线字体缺失时回退到西文字体撑破布局。
本地化测试：别信模拟器
Chrome 开发者工具的 RTL 调试功能？它连阿拉伯语变体都模拟不全。我们吃过亏：在模拟器显示完美的 波斯语内容（用阿拉伯字母但多四个字符），到真机上排版全乱。后来咬牙买了三台测试机：红米装波斯语言包，三星设阿联酋区域，Yandex 浏览器俄语版。
还有个反常识的坑：俄语引号「」和阿拉伯语《》方向相反。某工具站直接写死 «引用内容»>，阿拉伯用户看到的是反向符号。得用 CSS 的 quotes 属性动态控制： html[lang='ar'] { quotes: '\00AB' '\00BB'; }
工具推荐与最后检查表
上线前用这些工具扫雷：RTL Tester 插件 查方向错误，Language Inspector 抓编码问题。重点检查： 1. 所有表单的 placeholder 是否右对齐 2. 日期选择器组件是否镜像 3. 俄语变音符号在 Safari 是否位移 4. 阿拉伯语搜索框输入时光标是否左移
最后说个真实案例：某旅游站阿拉伯语页面，用户投诉点击图片画廊会闪退。查到最后发现是某个 JS 插件计算宽度时，把 RTL 容器的 scrollLeft 值当成正数处理。搞小语种站点，永远假设你的代码会在意想不到的地方崩溃。
排版调顺了只是第一步。下次聊聊俄语搜索引擎优化怎么避开 Yandex 的沙盒机制，还有阿拉伯语社媒推广如何适配海湾六国不同方言。（检查完记得让本地同事真机测两轮，有些坑只有母语者能发现）
