iOS Safari下Angular@ngx-translate管道翻译波斯语括号显示错误如何解决

问题原因 #

这个异常是因为波斯语属于从右到左（RTL）书写的语言，模板中硬写的半角括号属于弱方向字符，iOS Safari对双向文本（LTR属性的括号 + RTL属性的波斯语文本）拼接的默认渲染规则与Chrome不同，导致括号位置错位。

修复方案 #

方案1：使用CSS强制隔离双向文本渲染（推荐） #

给对应label添加unicode-bidi: isolate属性，让浏览器将该元素内容作为独立的双向单元处理，不会和外部方向字符互相干扰，兼容性覆盖iOS 10+，可满足绝大多数场景：

.code {
  unicode-bidi: isolate;
}

方案2：将括号纳入翻译资源，避免模板拼接 #

从根源消除不同方向文本拼接的问题，不要在模板中硬写括号，直接把带括号的格式写入多语言翻译资源：

• 英文翻译资源示例："User.USD": "(USD)"
• 波斯语翻译资源示例：写入对应带括号的波斯语译文
  模板简化为：

<label class="code">
  {{'User.' + currency | translate}}
</label>

方案3：显式绑定文本方向属性 #

如果站点切换语言时会动态切换全局方向，可以给label动态绑定dir属性：

<label class="code" [dir]="currentLang === 'fa' ? 'rtl' : 'ltr'">
  ({{'User.' + currency | translate}})
</label>

其中currentLang是你在项目中存储的ngx-translate当前激活语言变量。

内容的提问来源于stack exchange，提问作者Hovhannes Gevorgyan