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屬性沒有工作，有沒有什麼辦法，使工作？

注意，我們無法從HTML標籤去除dir="rtl"，也float:left摧毀一切！

代碼更新：它不是用波斯語工作http://jsfiddle.net/cC3FX/4/

來源

2014-01-13 newbie

您的HTML錯誤。什麼是''？你可能需要''。 – Vucko

這只是一個小錯誤，我會修復它，它不是原始的HTML標記，仍然不工作... – newbie

你能解釋什麼是不工作？波斯人角色如何產生影響？我錯過了一些... –

這個問題似乎是在右到左的背景下，<code>some:code;</code>顯示爲;some:code（即分號出現在左側，而不是右），即使direction設定爲ltr的code元件上。

三替代方案，以優先順序：

1）使用dir屬性在HTML爲code元件（以及其它元素含有左到右文本在從右到左的環境）：

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

這使得冗餘的code的CSS規則。

2）使用CSS代碼中的問題（雖然不需要在那裏!important符），添加CSS規則

code { unicode-bidi: embed }

3）使用U + 202A LEFT-TO-RIGHT在嵌入啓動和U + 202C POP DIRECTIONAL FORMATTINGC在code元素含量，例如的端部

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

問題是由Unicode雙向性規則引起的。考慮<code>some:code;</code>（字面）的例子中，設置direction: ltr是不夠的。在從右到左的整體上下文中，方向中性的「;」字符遵循封閉內容的方向性，因此它位於左側。從某種意義上說，處於LTR和RTL文本之間的交匯點，它被自己的元素和父元素撕裂到不同的方向，而Unicode規則則表示父元素獲勝。

解決方案1修復了此問題，因爲HTML dir屬性和CSS direction屬性之間存在差異，如HTML5 CR第10.3.5條Bidirectional text中所述。該屬性導致「雙向嵌入」，這意味着元素內容在方向上呈現在新的嵌套級別。

解決方案2在CSS中使用unicode-bidi屬性也是如此。請注意，HTML5 CR着重於says：「強烈建議作者使用dir屬性來指示文本方向，而不是使用CSS，因爲即使在沒有CSS的情況下，它們的文檔也會繼續正確呈現」。

解決方案3是另一種在角色層次上做同樣事情的方法。在大多數情況下，您也可以使用左對右標記字符（在開始和結束時），但這裏使用的字符是CSS 2.1建議的與unicode-bidi: embed對應的字符。 HTML 4.01提到了方向性控制字符，但補充道：「標記方法爲文檔結構完整性提供了更好的保證，並且在使用簡單的文本編輯器編輯雙向HTML文本時緩解了一些問題，但有些軟件可能更適合使用[UNICODE]字符。如果同時使用這兩種方法，應格外小心，以確保正確嵌套標記和定向嵌入或覆蓋，否則渲染結果不確定。「

來源

2014-01-13 14:55:57

謝謝，是'unicode-bidi：嵌入式'與所有瀏覽器一起工作嗎？ – newbie

是的，實際上（我認爲我們不需要考慮IE 5.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元素

回答

相關問題