HTML支持英阿双语及EJS邮件模板moment日期对齐问题如何解决

问题根因 #

该排版异常是双向文本（BiDi）算法的默认判断逻辑导致：阿拉伯文属于右到左（RTL）文本，而日期中的数字、英文月份/AM PM标识属于左到右（LTR）文本，仅给父容器加direction: rtl时，浏览器/邮件客户端会自动混合排序两类文本，最终出现顺序错乱、对齐不符合预期的问题。

可行解决方案（按邮件场景兼容性从高到低排序） #

方案1：Unicode控制符兜底（兼容性最高，适配所有邮件客户端） #

直接在文本中插入硬编码的双向控制符，优先级高于CSS样式，不会被邮件客户端过滤：

• ‏：强制后续文本按RTL规则排版
• ‎：强制后续文本按LTR规则排版

修改后的代码如下：

<td class="para1" style="padding-bottom: 20px; direction: rtl; text-align: right;">
&rlm;كرا لاختيارك بيتزا هت! تمت جدولة طلبك في &lrm;<%= moment(order.advanceTime).utcOffset(120).format('D MMM, YYYY [|] h:mm:ss A') %>
</td>

方案2：单独包裹LTR内容指定排版规则 #

如果需要更灵活的样式控制，把日期部分单独用行内标签包裹，指定独立的排版规则：

<td class="para1" style="padding-bottom: 20px; direction: rtl; text-align: right;">
كرا لاختيارك بيتزا هت! تمت جدولة طلبك في 
<span style="direction: ltr; unicode-bidi: embed; display: inline-block; margin: 0 4px;">
<%= moment(order.advanceTime).utcOffset(120).format('D MMM, YYYY [|] h:mm:ss A') %>
</span>
</td>

其中unicode-bidi: embed会告知双向算法，该标签内的内容需独立应用指定的direction规则，不受父容器RTL属性影响。

方案3：本地化日期为阿拉伯文格式（排版最统一） #

如果业务允许，直接将moment输出的日期转换为阿拉伯文格式，消除LTR内容，从根源避免排版冲突：

1. 服务端先引入moment阿拉伯语本地化包：

const moment = require('moment');
require('moment/locale/ar');

2. 格式化时指定阿拉伯语locale：

<td class="para1" style="padding-bottom: 20px; direction: rtl; text-align: right;">
كرا لاختيارك بيتزا هت! تمت جدولة طلبك في <%= moment(order.advanceTime).utcOffset(120).locale('ar').format('D MMM, YYYY [|] h:mm:ss A') %>
</td>

生成的日期会自动适配阿拉伯文的数字、月份、AM/PM标识，完全符合RTL排版规则。

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