Menu
the markup is like this:
<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...
but direction:ltr attribute is not work, is there any way to make it work?
note that we can't remove dir="rtl" from html tag, also float:left destroy everything!
code Updated: it's not work with persian language http://jsfiddle.net/cC3FX/4/
493
Shortcuts: Ctrl+Shift+J -- switch to RTL Ctrl+Shift+E -- switch to LTR Note 1: If one or both of the shortcuts don't work, it means that something else is mapped to them.
The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
Internet Explorer: Use CTRL+LEFT SHIFT for LTR and CTRL+RIGHT SHIFT for RTL.
For example, the en-US locale (for US English) specifies left-to-right. Most Western languages, as well as many others around the world, are written LTR. The opposite of LTR, RTL (Right To Left) is used in other common languages, including Arabic ( ar ) and Hebrew ( he ).
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) 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>
This makes the CSS rule for code redundant.
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) 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>
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.
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.
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”.
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.”
123
You can add Formatting Control Characters to fix this bi-directional (Bidi) issue.
Add the ‎ Left-to-Right Mark - like so:
<p>متن فارسی<code>some:code;‎</code>متن فارسی</p> /* added ‎ char here */
FIDDLE
For more infomation check out this microsoft article
35
Your code works fine, look this demo
HTML CODE
<p>some text <code>some:code;</code></p>
some word to reach quality of content, ah rules...
CSS CODE
html,body{direction: rtl;}
p {direction: rtl;}
code{direction: ltr !important;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
