ユーザーの連絡先の詳細が表示され、ユーザーは左から右へのテキストと右から左へのテキストの表示を切り替えることができます。
アラビア語では、テキストは右から左に表示されて読み取られますが、電話番号、Web アドレス、および電子メール アドレスは、アラビア語やその他の右から左に表示される言語では、左から右に表示されて読み取られます。
ユーザーの連絡先の詳細を交互に表示できましたが、電話番号にスペースがあると電話番号が左から右に表示されません。これは、私が抱えている問題の視覚的な表示です。
以下は、英語での左から右への表示です。
以下は上記と同じ詳細ですが、アラビア語で右から左に表示されています (電話番号 (ライム色) にはスペースがあり、正しく表示されていません)。
これも同じ詳細で、アラビア語で右から左に表示されていますが、電話番号からスペースが削除されています (電話番号 (ライム色) はここで正しく表示されています)。
右から左の言語で、スペースを含む電話番号を左から右に表示する方法を知っている人はいますか?
ここに私のHTMLコードがあります:
<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>
ここに私のCSSコードがあります:
.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;
}