Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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: enter image description here

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

enter image description here

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

enter image description 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;
}
like image 377
user1261774 Avatar asked Aug 09 '15 23:08

user1261774


2 Answers

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.

like image 166
user1261774 Avatar answered Sep 28 '22 19:09

user1261774


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

1234&nbsp;5678
// and 
1234&nbsp;567&nbsp;890
// etc.
like image 42
Decent Dabbler Avatar answered Sep 28 '22 20:09

Decent Dabbler