rtl元素中的CSS方向ltr

  • 本文关键字:方向 ltr CSS 元素 rtl css
  • 更新时间 :
  • 英文 :


标记如下:

<html dir="rtl">
<head>
<style>
p {direction: rtl;}
code{direction: ltr !important;}
</style>
</head>
<body>
<p>متن به زبان فارسی<code>some:code;</code>متن به زبان فارسی</p>
</body>
</html>
some word to reach quality of content, ah rules...

但是direction:ltr属性不起作用,有什么方法可以让它起作用吗?

注意,我们不能从html标签中删除dir="rtl",也不能从float:left中删除所有内容!

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

问题似乎是,在从右到左的上下文中,即使code元素上的direction设置为ltr<code>some:code;</code>也显示为;some:code(即分号显示在左侧,而不是右侧)。

三种选择,按偏好排序:

1) 将HTML中的dir属性用于code元素(以及在从右到左的环境中包含从左到右文本的其他元素):

<code dir=ltr>some:code;</code>

这使得code的CSS规则变得多余。

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

code { unicode-bidi: embed }

3) 在code元素内容的开头使用U+202A LEFT-TO-RIGHT EMBEDING,在末尾使用U+202C POP DIRECTIONAL FORMATINGC,例如

<code dir=ltr>&#202a;some:code;&#202c;</code>

这个问题是由Unicode双向性规则引起的。考虑到示例<code>some:code;</code>(字面上),设置direction: ltr是不够的。在从右到左的整体上下文中,";"字符是方向中立的,遵循封闭内容的方向性,因此它被放置在左侧。从某种意义上说,处于LTR和RTL文本之间的连接点,它被自己的元素和父元素撕裂到不同的方向,Unicode规则说父元素获胜。

解决方案1修复了这一问题,因为HTMLdir属性和CSSdirection属性之间存在差异,如HTML5 CR第10.3.5条双向文本所示。该属性导致"双向嵌入",这意味着元素内容在方向性嵌套的新级别上呈现。

解决方案2在CSS中使用unicode-bidi属性执行同样的操作。请注意,HTML5CR强调:"强烈鼓励作者使用dir属性来指示文本方向,而不是使用CSS,因为这样即使在没有CSS的情况下,他们的文档也会继续正确呈现"。

解决方案3是在角色级别上做同样事情的另一种方法。在大多数情况下,您也可以LEFT-TO-RIGHT标记字符(在开始和结束处),但这里使用的字符是CSS 2.1建议的unicode-bidi: embed的对应字符。HTML 4.01提到了方向性控制字符,但补充道:"标记方法更好地保证了文档结构的完整性,并缓解了使用简单文本编辑器编辑双向HTML文本时的一些问题,但一些软件可能更适合使用[UNCODE]字符。如果同时使用这两种方法,则应非常小心地确保标记和定向嵌入或覆盖的正确嵌套,否则,呈现结果将是未定义的。">

您可以添加格式化控制字符来修复此双向(Bidi)问题。

添加&lrm;从左到右标记,如:

<p>متن فارسی<code>some:code;&lrm;</code>متن فارسی</p> /* added &lrm; char here */

FIDDLE

欲了解更多信息,请查看这篇微软文章

您的代码运行良好,看看这个演示

HTML代码

<p>some text <code>some:code;</code></p>
some word to reach quality of content, ah rules...

CSS代码

html,body{direction: rtl;}
p {direction: rtl;}
code{direction: ltr !important;}

最新更新