CSS - RTL要素 - 優秀な図書館

マークアップでLTRの方向は、このようなものです：CSS - RTL要素

<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属性が動作していない、それを動作させるための方法はありますか？

dir="rtl"をhtmlタグから削除することはできません。また、float:leftすべてを破棄してください。更新

コード：http://jsfiddle.net/cC3FX/4/

出典

2014-01-13 newbie

HTMLが間違っています。「」とは何ですか？あなたはおそらく ' '。 – Vucko

それはちょっと間違いですが、それを修正します。オリジナルのHTMLマークアップではなく、まだ動作していません。 – newbie

何が動作していないのか説明できますか？ペルシア語の文字はどのように違いますか？私は何かが欠けている... –

をチェックアウトINFOMATION <code>some:code;</code>は;some:codeと表示されます（つまり、セミコロンは右に表示されます）。directionはcode要素のltrに設定されています。好みの順で

3つの選択肢、：

1）dircode要素のためのHTML内の属性（と右から左への環境で左から右へのテキストを含む他の要素）を使用します。

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

これにより、codeのCSSルールが冗長化されます。

2）

code { unicode-bidi: embed }

3 CSSルールを追加し、（!important指定子がそこに必要とされていませんが）問題のようにCSSコードを使用する）は、U + 202A左から右への埋め込みを使用します要素の内容の末尾に、U + 202C POP DIRECTIONAL FORMATTINGCを開始します。

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

この問題は、Unicode双方向性ルールによって発生します。例<code>some:code;</code>（文字通り）を考えると、direction: ltrを設定するだけでは不十分です。右から左への全体的な文脈では、方向的に中立的な ";"文字は、囲むコンテンツの方向性に従うので、左に置かれます。ある意味では、LTRテキストとRTLテキストの接続点にあり、それはそれ自身の要素と親要素によって異なる方向に引き裂かれ、Unicode規則は親が勝つと言います。

解決方法1は、HTML5 CR、10.3.5 Bidirectional textに示すように、HTML dir属性とCSS directionプロパティの間に違いがあるため、これを修正します。この属性は "双方向埋め込み"を引き起こします。これは、要素コンテンツが方向性の入れ子の新しいレベルでレンダリングされることを意味します。

解決方法2は、CSSでunicode-bidiプロパティを使用して同じです。 HTML5 CRは強調してsaysであることに注意してください。「著者は、CSSを使用するのではなくテキスト方向を示すためにdir属性を使用することを強く推奨します。

解決策3は、文字レベルで同じことを行うもう1つの方法です。ほとんどの場合、最初から最後までLEFT-TO-RIGHT MARK文字を使用することもできますが、ここで使用されている文字は、CSS 2.1がunicode-bidi: embedに対応するものです。「マークアップメソッドは、文書構造の整合性をより確実に保証し、単純なテキストエディタで双方向HTMLテキストを編集する際のいくつかの問題を緩和しますが、[UNICODE]文字。両方の方法を使用する場合は、マークアップと方向の埋め込みまたはオーバーライドのネストを確実に行うために十分注意してください。そうでなければレンダリング結果は未定義です」

出典

2014-01-13 14:55:57

ありがとうございます、 'unicode-bidi：embed'はすべてのブラウザで動作しますか？ – newbie

はい、実際には（IE5.5より古いブラウザは考慮しなくても構いません）。 https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidiを参照してください。 –

あなたのコードは正常に動作ペルシャ語では動作していない、このdemo

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;}

出典

2014-01-13 12:16:20 Fox

フォーマット制御文字を追加して、この双方向（双方向）問題を修正することができます。

&lrm;左から右のマークを追加 - そうのように：

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

FIDDLE

のためのより多くの問題は、右のそれをあるように思われるthis microsoft article

出典

2014-01-13 12:19:59 Danield

@newbie - ペルシャ語の回答を更新しました – Danield

ペルシャ語のスクリプトはどのように問題を引き起こしていますか？ –

@MarcAudet - 実際、私はペルシア人のために何も変えなかった。私の解決策は変わりませんでした。私は彼のペルシア語のマークアップで答えを更新しました。 – Danield

CSS - RTL要素

答えて

関連する問題