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

Question

I got a several pages in my system which includes tables (built using div) that may contain English content from one side, and Hebrew or some any other RTL language from the other side.

My problem is, when these columns contains round brackets (mainly round brackets) they causes a mixture like:

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

So far I managed to solved it using this css class (when the content language is known, and using a flag to add this class to the div):

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

Using that, the brackets are shown correctly and so far so good.

Now, I need to have a cross app solution without using a flag per each div, css solution or any other tech is welcome.

I need to have a solution which can be applicable for both contents (RTL and LTR languages)

Here is an example: jsfiddle.net/6o1nbLda. What problem do you have with it? I don't understand. — john c. j.
@johnc.j. you can see now how the English is shown, add/remove RTL class to see the difference — roeygol
I don't understand. It would be best to have the jsFiddle made by you, which will show an error. — john c. j.

john c. j. john c. j. · Accepted Answer · 2018-07-29T14:20:07

Here is my try:

Theory: 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>

Another options:

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

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

1 Answers