如何使用 RTL/LTR 语言支持 HTML dom 元素？

Question

我的系统中有几个页面，其中包含表格（使用 div 构建），其中可能包含一侧的英语内容，以及另一侧的希伯来语或任何其他 RTL 语言。

我的问题是，当这些列包含圆括号（主要是圆括号）时，它们会导致混合，如：

)English (EN
עברית (iw_IL)

到目前为止，我设法使用此 css class 解决了它（当内容语言已知时，并使用标志将此 class 添加到 div):

.RTL:after {
    content: "0E";
}

使用它，括号正确显示，到目前为止一切正常。

现在，我需要一个跨应用程序解决方案，而不需要每个 div、css 解决方案或任何其他技术都使用标志。

我需要一个适用于两种内容（RTL 和 LTR 语言）的解决方案

Answer 1

这是我的尝试：

理论：https://www.w3.org/International/articles/inline-bidi-markup/

<body class="rtl">
    <style>
        .table { display: table; }
        .tr { display: table-row; }
        .td { display: table-cell; }
        .table, .tr, .td { border: 1px solid; border-collapse: collapse; }
        .rtl { direction: rtl; }
        .ltr { direction: ltr; }
    </style>

    <p>עבריתעבריתעבריתעברית</p>
    <p>עבריתעברית</p>

    <div class="table">
        <div class="tr">
            <div class="td ltr">
                <p>English (EN)</p>
                <p>dbdjk dk ddkj ddjh dj dhjd</p>
            </div>
            <div class="td">
                <p><bdi>(iw_IL) עברית</bdi></p>
                <p>עבריתעבריתעבריתעברית</p>
            </div>
        </div>
    </div>
</body>

其他选项：

<p><span dir="auto">(iw_IL) עברית</span></p> <!-- or dir="ltr" -->

如何使用 RTL/LTR 语言支持 HTML dom 元素？

How to support HTML dom elements with RTL / LTR languages?

html

css

dom

right-to-left