CSS ::first-line伪类配置字号时阿语混排数字渲染为LTR问题求解

这是浏览器内核处理双向文本（BiDi）与::first-line伪元素样式的已知兼容性问题：当::first-line设置了font-size这类会修改文本排版盒尺寸的属性时，会打断双向文本算法对根节点RTL方向的继承，若首行内存在数字这类中性双向字符，就会触发首行排版方向错误回退为LTR。

方案1：为::first-line强制指定RTL上下文 #

直接在::first-line的样式规则中添加方向控制属性，强制首行保持RTL排版，改动最小：

li::first-line {
  font-size: 130%;
  color: RGB(68, 114, 196);
  /* 新增以下两行 */
  direction: rtl;
  unicode-bidi: embed;
}

该方案对原有代码侵入性最低，兼容Chrome、Firefox、Safari全系列主流浏览器。

方案2：为li元素添加双向上下文隔离 #

如果需要统一处理列表下所有元素的双向排版，可给li元素本身添加双向隔离属性，避免伪元素样式打断全局方向设置：

li {
  unicode-bidi: isolate;
}
li::first-line {
  font-size: 130%;
  color: RGB(68, 114, 196);
}

方案3：用实体标签替代::first-line伪元素（兼容性最佳） #

如果需要兼容极端老旧的浏览器版本，可直接将首行内容用<span class="first-line">标签包裹，手动设置样式，完全规避伪元素的双向排版冲突：

li .first-line {
  font-size: 130%;
  color: RGB(68, 114, 196);
}

<li>
  <span class="first-line">هو آلة إلكترونية لها قابلية استقبال البيانات ومعالجتها إلى 10 معلومات ذات قيمة.</span> كما يخزنها في وسائط تخزين مختلفة، وفي الغالب يكون قادراً على تبادل هذه النَتَائِج والمعلومات مع أجهزة أخرى متوافقة ومتطورة. تستطيع أسرع الحواسيب اليوم القيام بمئات مليارات العمليات الحسابية والمنطقية في ثوانٍ قليلة.
</li>

如果测试时发现部分浏览器仍然生效异常，可同时叠加方案1和方案2的配置，基本可以覆盖所有场景。

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