CSS – rtl元素中的方向ltr

前端之家收集整理的这篇文章主要介绍了CSS – rtl元素中的方向ltr前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

标记是这样的:

但方向:ltr属性不起作用,有没有办法让它工作?

请注意,我们无法从html标签删除dir =“rtl”,也浮动:左边摧毁一切!

代码更新:它不适用于波斯语http://jsfiddle.net/cC3FX/4/

最佳答案
问题似乎是在从右到左的上下文中,< code> some:code;< / code>显示为; some:代码(即,分号出现在左侧,而不是右侧),即使在代码元素上将方向设置为ltr.

三种替代方案,按优先顺序排列:

1)在HTML中使用dir属性作为代码元素(以及从右到左环境中包含从左到右文本的其他元素):

这使得代码的CSS规则变得多余.

2)在问题中使用CSS代码(尽管那里不需要!important说明符),添加CSS规则

code { unicode-bidi: embed }

3)在代码元素内容的末尾使用U 202A LEFT-TO-RIGHT EMBEDDING和U 202C POP DIRECTIONAL FORMATTINGC,例如

该问题是由Unicode双向性规则引起的.考虑示例< code> some:code;< / code> (字面意思),设定方向:ltr是不够的.在从右到左的整体上下文中,方向中性的“;”字符遵循封闭内容的方向性,因此它位于左侧.从某种意义上说,在LTR和RTL文本之间的交叉点,它被不同的方向,它自己的元素和父元素撕裂,Unicode规则说父母获胜.

解决方案1解决了这个问题,因为HTML dir属性和CSS方向属性之间存在差异,如HTML5 CR第10.3.5 Bidirectional text节所示.该属性导致“双向嵌入”,这意味着元素内容在方向性嵌套的新水平.

解决方案2在CSS中使用unicode-bidi属性执行相同操作.请注意HTML5 CR着重says:“强烈建议作者使用dir属性来指示文本方向,而不是使用CSS,因为即使没有CSS,他们的文档也会继续正确呈现”.

解决方案3是另一种在角色级别做同样事情的方法.在大多数情况下,您也可以使用LEFT-TO-RIGHT MARK字符(在开头和结尾),但这里使用的字符是CSS 2.1建议的与unicode-bidi:embed相对应的字符. HTML 4.01提到了方向性控制字符,但补充说:“标记方法提供了更好的文档结构完整性保证,并在使用简单的文本编辑器编辑双向HTML文本时缓解了一些问题,但某些软件可能更适合使用[UNICODE]字符.如果使用这两种方法,应特别注意确保正确嵌套标记和方向嵌入或覆盖,否则渲染结果是不确定的.

猜你在找的CSS相关文章