Firefox中unicode-bidi: plaintext属性失效问题求助

问题描述 #

我在开发一个处理用户提交文本的渲染库，需要支持混合RTL（从右到左）和LTR（从左到右）的文本，要求每行按对应方向和对齐方式渲染。原本在<p>元素上使用unicode-bidi: plaintext属性实现需求，但在Firefox中遇到异常：纯RTL文本换行后，第二行被强制渲染为LTR方向（左对齐）。切换<p>的unicode-bidi属性值，或打开开发者控制台可临时修复问题，但现象不稳定。

示例RTL文本：

זוהי פסקה של טקסט. הנה קישור ראשון, זהו טקסט מילוי. הנה קישור שני, זהו טקסט מילוי. והנה קישור שלישי, זהו טקסט מילוי.

测试场景：无论在<section>和<p>上设置unicode-bidi: normal、<p>子元素设plaintext，还是直接给<p>设plaintext，问题均存在。

可行修复方案 #

1. 显式设置方向配合unicode-bidi #

给包含RTL文本的容器同时设置direction: rtl和unicode-bidi: plaintext，Firefox对显式方向的识别更稳定，能确保换行后的文本保持RTL方向与右对齐：

.rtl-text-container {
  direction: rtl;
  unicode-bidi: plaintext;
}

2. 用unicode-bidi: isolate替代plaintext（按需适配） #

若无需依赖首字符自动判断方向，可尝试unicode-bidi: isolate配合显式direction，它的渲染规则更稳定，能规避Firefox的渲染异常：

.mixed-text-container {
  unicode-bidi: isolate;
  direction: rtl; /* 可根据文本实际动态设置为ltr */
}

3. 强制触发浏览器重绘 #

由于切换属性或打开控制台能临时修复，说明这是Firefox的渲染缓存问题。可在文本加载完成后通过JS强制触发元素重绘：

const textContainer = document.querySelector('.your-text-container');
textContainer.style.display = 'none';
textContainer.offsetHeight; // 触发重绘
textContainer.style.display = '';

原理说明 #

Firefox对unicode-bidi: plaintext的自动方向检测存在渲染bug，文本换行时第二行未正确继承首行的RTL方向属性。显式设置direction能让浏览器明确文本方向，避免自动检测的不确定性；强制重绘则可绕过浏览器的缓存渲染逻辑，确保样式正确应用。

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