title: Display phone numbers as left-to-right in right-to-left language
body: <p>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.</p>
  
  <p><em>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.</em></p>
  
  <p>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:</p>
  
  <p>The following is the left-to-right display in the English language:
  <a href="https://i.stack.imgur.com/0Cko1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0Cko1.png" alt="enter image description here"></a></p>
  
  <p>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 <strong>not</strong> displayed correctly):</p>
  
  <p><a href="https://i.stack.imgur.com/FV2o9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FV2o9.png" alt="enter image description here"></a></p>
  
  <p>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):</p>
  
  <p><a href="https://i.stack.imgur.com/kbWOK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kbWOK.png" alt="enter image description here"></a></p>
  
  <p><strong>Does anyone know how to display the phone numbers with spaces in them as left-to-right when in a right-to-left language?</strong></p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;div class="row contact_reverse"&gt;
      {{ #if contact_details_phone }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-phone icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;&lt;span class="contact_dir_reverse"&gt;{{ contact_details_phone }}&lt;/span&gt;
          &lt;/div&gt;
      {{ /if }}
  
      {{ #if contact_details_mobile_phone }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-tablet icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;&lt;span class="contact_dir_reverse"&gt;{{ contact_details_mobile_phone }}&lt;/span&gt;
          &lt;/div&gt;
      {{ /if }}
  
      {{ #if contact_details_email_address }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-envelope icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;{{ contact_details_email_address }}
          &lt;/div&gt;
      {{ /if }}
  
      {{ #if contact_details_linkedin_address }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-linkedin icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;&lt;span class="btu-link"&gt;{{ contact_details_linkedin_address }}&lt;/span&gt;
          &lt;/div&gt;
      {{ /if }}
  
      {{ #if contact_details_facebook_address }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-facebook icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;&lt;span class="btu-link"&gt;{{ contact_details_facebook_address }}&lt;/span&gt;
          &lt;/div&gt;
      {{ /if }}
  
      {{ #if contact_details_twitter_address }}
          &lt;div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;"&gt;
              &lt;i class="fa fa-twitter icon_size20 icon_padding_rtl"&gt;&lt;/i&gt;&lt;span class="btu-link"&gt;{{ contact_details_twitter_address }}&lt;/span&gt;
          &lt;/div&gt;
      {{ /if }}
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS code:</p>
  
  <pre><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;
  }
  </code></pre>