CSS - rtl元素中的方向ltr [英] CSS - direction ltr in a rtl element
问题描述
标记如下：
<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 属性不工作，是否有任何方法使它工作？
but direction:ltr attribute is not work, is there any way to make it work?
't remove dir =rtl从html标签，也 float：left 销毁一切！
note that we can't remove dir="rtl" from html tag, also float:left destroy everything!
代码已更新：无法使用波斯语 http://jsfiddle.net/cC3FX/4/
推荐答案
问题似乎是， ;一些：代码显示为 即使元素。方向设置为 ltr ，分号（即分号出现在左侧， code>代码
The problem appears to be that in right-to-left context, <code>some:code;</code> is displayed as ;some:code (i.e., the semicolon appears on the left, not right) even thoughdirection is set to ltr on the code element.
三种备选方案，按优先顺序排列：
Three alternatives, in order of preference:
1）在HTML中使用 dir 属性作为代码右侧到左侧环境中的右侧文本）：
1) Use the dir attribute in HTML for the code elements (and other elements containing left-to-right text in a right-to-left environment):
<code dir=ltr>some:code;</code>
这使得代码的CSS规则冗余。
This makes the CSS rule for code redundant.
2）在问题中使用CSS代码（虽然不需要！important 添加CSS规则
2) Using CSS code as in the question (though the !important specifier is not needed there), add the CSS rule
code { unicode-bidi: embed }
3）在代码结束时使用U + 202A左对齐嵌入和U + 202C POP DIRECTIONAL FORMATTINGC 元素内容，例如
3) Use the U+202A LEFT-TO-RIGHT EMBEDDING at the start and U+202C POP DIRECTIONAL FORMATTINGC at the end of the code element content, e.g.
<code dir=ltr>Êa;some:code;Êc;</code>
问题是由Unicode双向规则引起的。考虑示例< code> some：code;< / code> （逐字地），设置 direction：ltr 是不够的。在从右到左的整体上下文中，;字符是方向中性的，遵循包含内容的方向性，因此它被放置在左边。在某种意义上，在LTR和RTL文本之间的连接点，它被撕裂到不同的方向，由自己的元素和父元素，和Unicode规则说，父亲赢了。
The problem is caused by Unicode bidirectionality rules. Considering the example <code>some:code;</code> (literally), setting direction: ltr is not sufficient. In a right-to-left overall context, the ";" character, being directionally neutral, follows the directionality of enclosing content, so it is placed on the left. In a sense, being at a junction point between LTR and RTL texts, it is torn to different directions, by its own element and by the parent element, and Unicode rules say that the parent wins.
解决方案1解决了这个问题，因为HTML dir 属性和CSS 方向之间有区别属性，如HTML5 CR，第10.3.5节双向文本所示。该属性导致双向嵌入，这意味着元素内容在方向性的嵌套的新层次呈现。
Solution 1 fixes this, since there is a difference between the HTML dir attribute and the CSS direction property, as illustrated in HTML5 CR, clause 10.3.5 Bidirectional text. The attribute causes "bidirectional embedding", which means that the element content is rendered at a new level of nesting in directionality.
解决方案2在CSS中使用 unicode-bidi 属性。请注意，HTML5 CR强调说：强烈建议作者使用目录属性，以指示文本方向而不是使用CSS，因为这样他们的文档将继续正确地渲染，即使没有CSS。
Solution 2 does the same in CSS, using the unicode-bidi property. Note that HTML5 CR emphatically says: "Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS".
解决方案3是另一种方法做同样的事情，在字符级别。在大多数情况下，你也可以使用LEFT-TO-RIGHT MARK字符（在开始和结束处），但这里使用的字符是CSS 2.1建议的 unicode-bidi：embed 。 HTML 4.01提到了方向控制字符，但补充说：标记方法提供了一个更好的保证文档结构完整性，并减轻一些问题，当使用简单的文本编辑器编辑双向HTML文本，但一些软件可能更适合使用[UNICODE]字符。如果使用这两种方法，应该非常小心，以确保正确嵌套的标记和定向嵌入或覆盖，否则，渲染结果是不确定的。
Solution 3 is yet another way to do the same thing, at the character level. You could also LEFT-TO-RIGHT MARK characters (at the start and at the end), in most cases, but the characters used here are what CSS 2.1 suggests as counterparts to unicode-bidi: embed. HTML 4.01 mentions the directionality control characters but adds: "The markup method offers a better guarantee of document structural integrity and alleviates some problems when editing bidirectional HTML text with a simple text editor, but some software may be more apt at using the [UNICODE] characters. If both methods are used, great care should be exercised to insure proper nesting of markup and directional embedding or override, otherwise, rendering results are undefined."
这篇关于CSS - rtl元素中的方向ltr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
