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

```css
.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}
```

```html
<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/>)

```css
.rtl {
    direction: rtl;
}

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

```html
<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.