English with Arabic in rtl direction

Question

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.

@NullPointer Damn I can't even select the text properly and how about this? http://jsfiddle.net/aX7xV/ — Mr. Alien, Apr 26 '13 at 06:38
possible duplicate of [use text-align smartly (if english dir=ltr if arabic dir=rtl)](http://stackoverflow.com/questions/11787351/use-text-align-smartly-if-english-dir-ltr-if-arabic-dir-rtl) — NullPoiиteя, Apr 26 '13 at 06:40
Possible duplicate of [html direction by language? (if english dir=ltr if arabic dir=rtl)](http://stackoverflow.com/questions/11787351/use-text-align-smartly-if-english-dir-ltr-if-arabic-dir-rtl) — NullPoiиteя, Apr 26 '13 at 06:42
@Mr.Alien Actually I tried to write the example text in a particular way to make you understand what the user wants to write, but actually the user will write it like this `لغة برمجة C++` and don't forget that the direction is **rtl** — , Apr 26 '13 at 06:45
@Dazents Am aware of that, I just provided you a peachy example, look out for the duplicates shared by pointer — Mr. Alien, Apr 26 '13 at 06:45
@NullPointer Those questions are talking about choosing one direction rely on what the user start writes. This is not what I want. — , Apr 26 '13 at 06:47
@Mr.Alien Thank you. I understand, but I've already seen those questions before I tried to make this question and they weren't helpful. — , Apr 26 '13 at 06:49

score 7 · Answer 1 · edited Mar 12 '18 at 04:41

7

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)

edited Mar 12 '18 at 04:41

NightOwl888

55,572
24
139
212

answered Mar 12 '18 at 04:32

ameya

184
1
7

1

Wonderful... It helped me a lot :-) – shahsani May 09 '20 at 09:19

score 6 · Answer 2 · edited May 23 '17 at 12:25

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).

English with Arabic in rtl direction

2 Answers2