CODEWITHSUNDEEP
htmlcss
user2137179
user2137179

Reputation:

English with Arabic in rtl direction

I have a problem whenever the user tries to write English words after Arabic words i.e. C++ لغة برمجة

The browser display it like this ++C لغة برمجة.

Is it possible to solve this problem using CSS?

Edited

I solve it in this way. http://jsfiddle.net/PfjdE/

HTML

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

CSS

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

I'll let the question open in case someone find the best solution.

Upvotes: 9

Views: 16647

Answers (2)

ameya
ameya

Reputation: 194

There is an alternate way to do it too, by using a "bdi" tag along with text-align- right property. so you'll have to write-

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

Remember to apply text-align: right; property to the parent element. (I still prefer the direction-rtl method but this is just another way to do it)

Upvotes: 8

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201836

If this is about page content as opposite to direct user input (the question formulation suggests the latter, while your jsfiddle the former) and the purpose is to achieve proper direction in the special case given, then a cleaner solution than your jsfiddle (which appends a Latin letter and tries to make it invisible) would be this:

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

By appending U+200E LEFT-TO-RIGHT MARK, you make “C++” displayed left to right.

But things like that aren’t really for CSS to solve, as you need to get into parts of the text, which are not accessibly in CSS unless made elements. So you should use markup like

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

with the CSS code

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

Cf. to Direction ltr in a rtl HTML page (actually, the current question might be duplicate for it).

Upvotes: 6

Related Questions