倒CSS屬性改變爲RTL

要改變網頁CSS是從LTR RTL我必須設置或反轉下面的CSS屬性：倒CSS屬性改變爲RTL

體{方向：RTL}

任何浮點數：左應該是浮動：正確，反之亦然關於所留下

任何填充或保證金或權利應得到扭轉

另外任何圖像應水平反轉。

我的問題是：是否還有更多的CSS屬性應該改變？

來源

2012-09-05 SaidbakR

爲什麼你認爲圖像應該倒置？ *某些圖像可能會以某種方式假定從左到右的方向性，但這是一個特例。 –

文本對齊，背景位置，邊框位置，左右位置，基本上任何東西都有水平屬性。如果你想親手做，你可以通過一系列的css屬性，如this one，但我個人認爲使用其中一種在線工具可以開始。 CSSJanus通常都很不錯，不過我相信如果你google的話還有更多。

祝你好運。

來源

2012-09-05 15:27:38 Tsubashi

儘管CSSJanus很好，但如果您打算將它用於以下目的，它並不好：您有一個帶有原始LTR佈局的CSS文件，並且您嘗試創建一個帶有RTL佈局的新CSS文件，該文件應包含在原始文件CSS當用戶的lang是RTL時。 CSSJanus不會用'margin-left：auto'覆蓋'margin-left：10px'; margin-right：10px'，但是隻需添加'margin-right'屬性，並且最終同時使用'margin-left'和'margin-right'等於10px。 –

你只是想使用從右到左書寫，還是你想鏡像的網頁？

body { 
    transform: scaleX(-1); 
    -ms-transform: scaleX(-1); 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
}

這將產生網頁的鏡像，但一切仍然有效，因爲它應該（鏈接在新的位置點擊，例如）

來源

2012-09-05 15:27:47

你可以試試;

body { 
    -ms-transform: scaleX(-1); 
    -moz-transform: scaleX(-1); /* Gecko */ 
    -o-transform: scaleX(-1); /* Operah */ 
    -webkit-transform: scaleX(-1); /* webkit */ 
    transform: scaleX(-1); /* standard */ 
    filter: FlipH; /* IE 6/7/8 */ 
}

這會產生鏡面效果。 Here是一個現場演示。

如果您想從右向左流動字母，並且如果想要將項目浮動到右側，可以使用text-align: right，您可以嘗試rtl。

如果您希望文本從右側開始，您可以嘗試;

body{ 
    unicode-bidi:bidi-override; 
    direction:rtl; 
    float: right; 
}

Here是現場演示;

來源

2012-09-05 15:54:55

另一些屬性...

箱陰影和文字陰影

/*由-1 */

`box-shadow: 5px -5px 5px 5px #abc;`

乘以第一值（水平偏移的陰影）成爲

box-shadow: -5px -5px 5px 5px #abc;

and

text-shadow: 2px 2px #FF0000;

成爲

text-shadow: -2px 2px #FF0000;

2：邊界半徑

你必須要小心這一個作爲改變值達到RTL原理不同位置

border-radius:25px 0px 0 25px; 


becomes 

border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)

此外，這裏有一些提示：

水平位置爲百分比

如果你有這樣一個風格：

.style 
{ 
position: absolute; 
top: 22%; 
left: 32%; 
... 
}

左屬性將成爲100-32=68%

2.背景位置：表示平價值像素 - 例如：

background-position: -34px -85px;

在這種情況下，您將不得不手動解決這個問題。（見this文章）

作爲參考：

這裏有一個great article約有關轉換一個網站，以RTL

實際上，整個網站http://rtl-this.com涉及RTL問題，所以可以找到很多有用的東西有

來源

2012-09-05 17:08:50 Danield

倒CSS屬性改變爲RTL

回答

相關問題