ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

html+css实现文本从右向左

2022-07-27 16:32:58  阅读:180  来源: 互联网

标签:direction 文本 rtl html bidi override 从右 css 属性


一、css实现

eg:

<html lang="zh-ch">
 
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
    .test {
        width: 100px;
        height: 100px;
    }
 
    .lr-tb {
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    </style>
</head>
 
<body>
    <div class="test lr-tb">
        本段文字将按照<span>水平从右到左</span>的书写方向进行流动。
    </div>
</body>
 

不同的语言书写习惯和排版习惯都不一样,通常情况下,我们阅读文章都是从左往右看,但是阿拉伯语,波斯语,希伯来文,维语等,书写和阅读习惯都是从右向左,因此文字排版也要求是从右向左。解决方法:

在CSS中添加下面这个样式即可。
html{direction:rtl;unicode-bidi:bidi-override;}

 关于此样式的详细解释:

1. direction:

语法:   direction : ltr | rtl | inherit
 ltr   默认值。文本从左到右流入
 rtl   文本从右到左流入
inherit 文本流入方向由继承获得

 说明:

用于设置文本流入的方向。

此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。但是此属性会作用于拉丁文的标点符号。

假如想应用此属性于内联文本,必须设定 unicode-bidi 属性为 embed 或 bidi-override 。

 

2、 unicode-bidi:

语法:   unicode-bidi : normal | bidi-override | embed
normal  默认值。对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作
bidi-override 严格按照 direction 属性的值重排序。忽略隐式双向运算规则
embed 对象打开附加的嵌入层, direction 属性的值指定嵌入层,在对象内部进行隐式重排序

 说明:

用于同一个页面里存在从不同方向读进的文本显示。与 direction 属性一起使用。

假如想应用 direction 属性于内联文本,必须设定此属性值为 embed 或 bidi-override 。

 

总结:

Unicode 双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。

例如,英文文档的默认书写方向是左-右,假如其中包含的部分其他语种的字符其书写方向是右-左,双向运算法则就可以用来代理用户正确的反转其流动方向。

这的确是个很特别的一种语言,但阿拉伯语网站设计的时候就要用到, 当然在实际使用过程中还有一些小问题要自己注意!

 

具体的举例分析可看:

阿拉伯语网站的CSS要点总结

国际化 - 通用 LTR/RTL 布局解决方案

二、html标签实现

<html>
<body>
<p>
    如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
</p>
<bdo dir="rtl">
    Here is some Hebrew text
</bdo>
</body>
</html>

所有浏览器都支持 <bdo> 标签。

属性描述
dir

ltr

rtl

定义文字的方向

详细描述:

HTML <bdo> 标签

 

本文参考:

https://www.onepound.cn/yc/?p=10120

https://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site

http://www.w3.org/International/questions/qa-html-dir#blockelements

 

 

 

标签:direction,文本,rtl,html,bidi,override,从右,css,属性
来源: https://www.cnblogs.com/redFeather/p/16524132.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有