Display phone numbers from left to right in left right language

Question

I have information about user contacts, where the user can alternate the display from left to right and from right to left.

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

I managed to change the display of user contact information, but phone numbers are not displayed from left to right when there is a space in the phone number. Here is a visual representation of the problem that I have:

Below is a screen from left to right in English:

Here are the same details as above, but displayed from right to left in Arabic (phone numbers (in lime shade) have spaces and are not displayed):

Below are the same details displayed from right to left in Arabic, but with numbers removed from phone numbers (phone numbers (in lime shade) are displayed correctly here):

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

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; } 

Answer 1

I just figured it out!

I added unicode-bidi: embed; to the contact_dir_reverse css class, for example:

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

I hope this helps someone.

Answer 2

Room   (<inextricable space) between groups of numbers seems to work here in Firefox 39. Also:

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