问答

关于HTML dir属性的疑惑

作者:admin 2021-04-22 我要评论

dir 属性用于定义文本方向,但在使用的过程中,有一些奇怪的问题,比如: p dir="rtl"qq./p 上面这个代码,浏览器会输出 .qq ,小数点会被挪到前面; 但如果在小...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

dir属性用于定义文本方向,但在使用的过程中,有一些奇怪的问题,比如:

<p dir="rtl">qq.</p>

上面这个代码,浏览器会输出.qq,小数点会被挪到前面;

但如果在小数点后面加上一些内容,比如:

<p dir="rtl">qq.123</p>

浏览器则会原样输出qq.123,小数点没有被挪到最前面了,为什么会这样呢

###

这个可能跟浏览器对语系的解释有关,非右向左的语系不会更改文本方向:

<p dir="rtl">阿拉伯语?? ????qq.aa</p>
<p dir="rtl">中文qq.aa</p>

screen
而为什么小数点会被放置在前可能跟分词有关,因为标点符号这东西比较难认定是哪个语系,所以如果标点作为文本结尾的话会将其独立看待然后应用dir,你可以在.之后继续添加其他标点符号就也会放到前面,但如果是中文或英文或者其他非右向语言的文字都不会。
以上是个人猜测

###

image.png
通过控制台发现一个css属性:unicode-bidi: isolate
image.png
image.png
MDN 上面的说明文档比较复杂,而且有些难懂,通过修改unicode-bidi的值来自行解释相关属性的意义发现,在文本的dir='rtl'时代表是文本从右向左开始书写,文本默认的unicode-bidi: isolate将内容分成多个U+FFFC Object Replacement Character,这个时候的双向算法是将其看成图片qq.两部分,而qq.123则又看成了一个图片,所以仅从p标签的rtl来看,是只进行从右向左排列,内部双向算法看成整体。
image.png
通过修改unicode:bidi: bidi-override,则发现qb.123又根据U+FFFC Object Replacement Character拆分成多个图片看待,为证明这一想法,把qq.123改成了qb.123

理解尚浅,可能偏颇,具体你可以再参考下MDN手册里相关的语法解释https://developer.mozilla.org...

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 求助!Mysql workbench connections出

    求助!Mysql workbench connections出

  • c++ 的dll 转golang可以调用

    c++ 的dll 转golang可以调用

  • c++的 new int{10}  和 new int(10) 有

    c++的 new int{10} 和 new int(10) 有

  • Grafana MySQL为数据源时, 折线图无法

    Grafana MySQL为数据源时, 折线图无法

腾讯云代理商
海外云服务器