排列显示阿拉伯语、数字及英文时的处理方法

这段时间参与开发沙特阿拉伯的网站模板，模板使用的语言是阿拉伯语，其显示顺序为从右到左，而中文、数字及英文的显示顺序为从左到右，所以当遇到一行文字内既有阿拉伯语又有数字和英文时会出现语序混乱的问题，如

期待显示的文案为：

按顺序写入，对应的代码如以下，其中currency_pay为变量，值为356SAR

<span>الدفع الفعلي：{{currency_pay}}</span>

显示为

الدفع الفعلي : 356SAR

金额356和货币符号SAR分开了，这样显示是不正确的

试着调整阿语和数字英文的位置，还是不能显示正确，于是就去网上找解决办法，在此记录分享给大家

文字的显示顺序可通过以下方式设置：

第一种方式：

添加属性 dir = “ltr”

dir = "ltr"

例：在阿拉伯网站中html标签包含属性 dir=“rtl” ,表示文字从右向左显示
通过在html中添加dir=“rtl”，使整个文档的文案显示符合阿拉伯人的阅读顺序

语法

在 HTML5 中, dir 属性可用于任何的 HTML 元素 (它会验证任何HTML元素)。

<element dir = " ltr| rtl | auto ">

ltr : 默认。从左向右的文本方向。
rtl：从右向左的文本方向。
auto：让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用

如果我们想要改变文案的显示顺序，只需在标签中加入dir属性即可，如

<span dir="ltr">356SSAR</span>
<span>:الدفع الفعلي</span>

则显示结果得到

第二种方式：

添加css样式：direction: rtl;

例：把文本方向设置为“从右向左”

div{ font-size:12px;direction: rtl;}

语法

ltr : 默认。文本方向从左到右。
rtl：文本方向从右到左。
auto : 规定应该从父元素继承 direction 属性的值。

其他：参考文档

排列显示阿拉伯语、数字及英文时的处理方法相关推荐

0.96寸OLED显示汉字，数字，英文，图片，GIF动画+取模软件使用+代码解析
前言本次我们学习一下STM32F103关于OLED显示汉字,数字,英文,图片,GIF动画,和介绍各种取模软件的使用,主要教会大家使用和修改OLED驱动的代码,对汉字大小,图片分辨率进行代码修改并显示 ...
php 判断字符是否是数字_php判断输入是否是纯数字，英文，汉字的方法
本文实例讲述了php判断输入是否是纯数字,英文,汉字的方法.分享给大家供大家参考.具体分析如下: 这里利用php的mb_strlen和strlen函数就可以轻松得知字符串的构成是全英文.英汉混合.还是 ...
php 判断同时存在英文跟数字,php判断输入是否是纯数字，英文，汉字的方法
本文实例讲述了php判断输入是否是纯数字,英文,汉字的方法.分享给大家供大家参考.具体分析如下: 这里利用php的mb_strlen和strlen函数就可以轻松得知字符串的构成是全英文.英汉混合.还是 ...
php判断是不是纯汉字,php判断输入是否是纯数字，英文，汉字的方法
这篇文章主要介绍了php判断输入是否是纯数字,英文,汉字的方法,涉及php中mb_strlen和strlen等函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了php判断输入是 ...
搜狗拼音输入法输入数字和英文时总是有空格
通常是由于输入法上使用了"全角",将全角改为半角,再输入英文数字,就不会有空格了 shift+space转换
多语言适配之阿拉伯语
多语言配置: 1.获取当前系统语言的方法: Locale locale = getApplicationContext().getResources().getConfiguration().loca ...
如何显示在网页中显示阿拉伯语言
我记得以前在微软面试程序员的时候,面试官问怎么样去显示一个阿拉伯的网页.我们知道阿拉伯的网页的显示方法是从右到左,向右对齐的.由于当时没有接触到这种页面,真的不知道该怎么去实现. 今天,终于知道了(太 ...
input输入框使用正则限制为数字、英文及中文，微软自带输入法输入问题
正则:/[^a-zA-Z0-9\u4E00-\u9FA5]/g,'' 采用该正则表达式后,使用搜狗输入法没有问题,但采用微软自带输入法后,会存在输入数字及英文时为正常,切换为汉字后,会存在吞并当前光标 ...
安卓阿拉伯语显示时文字的适配
当手机设备的蓝牙名改为阿拉伯语或者维吾尔语时,该语言是RTL模式. 当DA侧连接到该设备时,会显示该设备的信息:[%1$s] is set as the priority device 此时默认位置会 ...

排列显示阿拉伯语、数字及英文时的处理方法

文字的显示顺序可通过以下方式设置：

第一种方式：

语法

第二种方式：

语法

排列显示阿拉伯语、数字及英文时的处理方法相关推荐

最新文章

热门文章