代码之家 › 专栏 › 技术社区 › roeygol

如何用RTL/LTR语言支持HTML DOM元素?

right-to-left dom css html

roeygol · 技术社区 · 6 年前

我的系统中有几个页面,其中包括表(使用DIV构建),其中一个页面可能包含英语内容,另一个页面包含希伯来语或其他RTL语言。

我的问题是,当这些列包含圆括号(主要是圆括号)时,它们会导致如下混合:

)English (EN
×¢××¨××ª (iw_IL)

到目前为止,我使用这个CSS类(当内容语言已知,并使用一个标志将这个类添加到DIV时)解决了这个问题:

.RTL:after {
    content: "\200E";
}

使用它,支架显示正确,目前为止还不错。

现在,我需要一个跨应用程序解决方案,而不使用每个分区的标志,欢迎使用CSS解决方案或任何其他技术。

我需要一个可以同时适用于两种内容(RTL和LTR语言)的解决方案。

1 回复 | 直到 6 年前

john c. j. 6 年前

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" -->

推荐文章

shady · 根据Drupal 7中的语言切换样式

7 年前

Yitzchak · 可能是集合视图、水平滚动、开发语言RightToLeft中的bug

8 年前

user4340666 · 合并C中的RTL Datagridview列标题#

8 年前

javadroid · RecyclerView从右向左增长元素

9 年前

Phil · 我的括号与阿拉伯语文本的关系应该在哪里?

9 年前

hamed · jqGrid-使用RTL时google chrome中的列填充问题

9 年前

Eitan · 带有约束和RTL的UIScrollView的奇怪行为

10 年前

SharjeelNisar · Android:为什么TextView上的字幕适用于英文文本,而不适用于阿拉伯文文本?

10 年前

Jen · IE7 RTL浮动右内侧浮动左

11 年前

James063 · 从右到左括号显示错误

11 年前