Display phone numbers as left-to-right in right-to-left language

Question

I have a display of a users contact details where the user can alternate the display between left-to-right and right-to-left text.

In the Arabic language, the text is displayed and read from right-to-left, but phone numbers, web addresses and email addresses are displayed and read left-to-right in Arabic and other right-to-left languages.

I have been able to alternate the display of the users contact details, but the phone numbers do not display left-to-right when there is a space in the phone number. Here is a visual display of the issue I have:

The following is the left-to-right display in the English language:

Here is the same details as above but displayed right-to-left in the Arabic language (the phone numbers (in the lime colour) have spaces and are not displayed correctly):

Here is the same details again, displayed right-to-left in the Arabic language, but with spaces eliminated from the phone numbers (the phone numbers (in the lime colour) are displayed correctly here):

Does anyone know how to display the phone numbers with spaces in them as left-to-right when in a right-to-left language?

Here is my HTML code:

<div class="row contact_reverse">
    {{ #if contact_details_phone }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-phone icon_size20 icon_padding_rtl"></i><span class="contact_dir_reverse">{{ contact_details_phone }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_mobile_phone }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-tablet icon_size20 icon_padding_rtl"></i><span class="contact_dir_reverse">{{ contact_details_mobile_phone }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_email_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-envelope icon_size20 icon_padding_rtl"></i>{{ contact_details_email_address }}
        </div>
    {{ /if }}

    {{ #if contact_details_linkedin_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-linkedin icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_linkedin_address }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_facebook_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-facebook icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_facebook_address }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_twitter_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-twitter icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_twitter_address }}</span>
        </div>
    {{ /if }}
</div>

Here is my CSS code:

.contact_reverse {
    background-color: red;

    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon_size20 {
    font-size: 20px !important;
}

.icon_padding_rtl {
    padding-left: 6px !important;
    background-color: peru;
}

.contact_dir_reverse {
    background-color: lime;
    direction: ltr;
}

Caldarium

Answer 1

I just figured this out!

I added the unicode-bidi: embed; to the contact_dir_reverse css class, like so:

.contact_dir_reverse {
    background-color: lime;
    direction: ltr;
    unicode-bidi: embed;
}

I hope that this will help someone.

Caldarium

unicode-bidi is exactly what I needed here - thanks! – Pandemonium

Answer 2

Putting a   (a non-breaking space) between the number groups seems to work here in Firefox 39. Like so:

1234 5678
// and 
1234 567 890
// etc.

Doit

Decent Dabbler, thanks but the phone number is entered by the user, so replacing the white space with nbsp; would be difficult. I have just placed the answer. – Caldarium

@Caldarium Scrap my last comment. I didn't make any sense. Your solution is the way to go, period. – Doit

Decent Dabbler, no probs bro - we have all been there. – Caldarium

Answer 3

For any text that you know must always be displayed left-to-right (phone number, URL), add the dir="ltr" to the encapsulating HTML element. See W3C and MDN

<span dir="ltr">{{ contact_details_mobile_phone }}</span>

Ninurta