html - 英语和阿拉伯语在 rtl 方向

Question

每当用户尝试在阿拉伯语单词之后写英文单词时，我都会遇到问题，即C++ لغة برمجة

浏览器显示它是这样的++C لغة برمجة。

是否可以使用 CSS 解决这个问题？

已编辑

HTML

<div id="text">لغة برمجة C++</div>

CSS

#text {
    direction: rtl;
}
#text:after {
    content: 'a';
    color: transparent;
}

如果有人找到最佳解决方案，我会让问题开放。

score 6 · Accepted Answer

如果这是关于与直接用户输入相反的页面内容（问题表述建议后者，而您的 jsfiddle 前者）并且目的是在给定的特殊情况下实现正确的方向，那么比您的 jsfiddle 更清洁的解决方案（附加一个拉丁字母并试图使其不可见）将是：

#text {
    direction: rtl;
}
#text:after {
    content: '\200e';
}

通过附加 U+200E LEFT-TO-RIGHT MARK，可以使“C++”从左到右显示。

但是这样的事情并不是 CSS 可以真正解决的，因为您需要进入文本的某些部分，这些部分在 CSS 中是不可访问的，除非制作元素。所以你应该使用像这样的标记

<div id="text">لغة برمجة <span class="ltr">C++</span></div>

使用 CSS 代码

.ltr { unicode-bidi: embed; direction: ltr; }

参照。到rtl HTML 页面中的 Direction ltr（实际上，当前问题可能是重复的）。

score 6 · Accepted Answer

还有另一种方法可以做到这一点，即使用“bdi”标签和 text-align-right 属性。所以你必须写-

    <div style="text-align:right"> <bdi>  لغة برمجة C++ </bdi> </div>

记得应用 text-align: right; 属性到父元素。（我仍然更喜欢direction-rtl 方法，但这只是另一种方法）

2 回答 2