标记如下:
<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>Êa;some:code;Êc;</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)问题。
添加‎
从左到右标记,如:
<p>متن فارسی<code>some:code;‎</code>متن فارسی</p> /* added ‎ 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;}