How to work with right-to-left languages for inline elements

Question

I am trying to get a span with a url inside of it to behave as it would in left-to-right. This span has a surrounding container that has direction rtl on it, but I want to force this element to behave as left-to-right. For example: http://jsfiddle.net/p6gab1zy/

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>

In this fiddle, you can see that instead of displaying as http://www.google.com/ it displays as /http://www.google.com because of the way that browsers put any symbols at the "end" of the text in right to left (being the left). If I put this span as display: inline-block; (http://jsfiddle.net/p6gab1zy/1/)

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
    display:inline-block;
}

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>

this will fix the issue, but unfortunately for my project this isn't an ideal solution. Does anyone have any other fixes that I can do that will work without having the possibility of shifting around the position of this element on the screen? By this I mean changing the display could move it up or down if padding/margin are on the element, so this isn't a viable solution for my needs.

Answer 1

The CSS feature you are looking for is unicode-bidi: bidi-override. This creates a directional override on an inline-level element, so the language direction of the parent element will no longer stay in effect, so the end result will be what you're looking for.

If you apply this override to your ltr element, you can see that the text in that element will show up left-to-right normally. More information on unicode-bidi and overriding at the MDN article here.

Live Demo:

.rtl {
    direction: rtl;
}

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

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>