翻轉水平CSS，並使用基於RTL的JavaScript反轉它方向

我將改變整個網頁的LTR方向爲RTL方向，最簡單的方法是翻轉水平CSS，然後將類添加到頁面的每個元素部分它作爲RTL方向。這裏是我的CSS代碼：翻轉水平CSS，並使用基於RTL的JavaScript反轉它方向

.rtl { 
-moz-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
transform: scaleX(-1); 
-ms-filter: fliph; /*IE*/ 
filter: fliph; /*IE*/ 
} 

<body class="rtl">

那麼我們就需要RTL類添加到頁面的每一個元素，使其作爲真正的RTL，例如：

<div class="rtl">Text Here</div> => Real RTL Direction

現在這裏是我的問題：

如何將整個body類轉換爲RTL方向並使用javascript翻轉水平方向？

如果有什麼解決方案用JavaScript改變RTL體的方向到RTL，那麼就不需要在網站的每個部分添加水平翻轉類。目前改變方向的唯一方法是，我們將類添加到每個文本部分和圖像部分元素fiv，span，p等

我試過HTML方向RTL和RTL，但不工作，我相信如果我們將能夠強制身體方向RTL和翻轉水平，然後可以解決。

我非常感謝在這個問題上的任何評論和想法。

來源

2016-11-24 Moban Roban

我很困惑，能否請你分享你正在努力實現的圖像？請注意，「方向」和*翻轉水平*是不同的東西...... – kukkuz

很明顯，如果我們使用CSS來翻轉，那麼它就像一面鏡子，但你無法讀取文本，導致翻轉，它不是RTL，你需要根據課程再次翻轉。 –

它在我強制身體顯示dir=rtl或dir=ltr時有效。而對於flip，我使用你的css並把*作爲選擇器也選擇了所有元素。檢查了這一點：

var b = document.getElementsByTagName("body")[0]; 
 
b.setAttribute("dir", "rtl"); 
 
/* b.setAttribute("dir", "ltr"); */ 
 
console.log(b);

<h1> Hello world </h1> 
 
<div> Text Here</div> 
 
<p>lorem ipsum lorem ipsum lorem ipsum</p>

更多關於這一點：Css Tricks on text direction

如果你想翻轉所有元素可以補充一點：

* { 
-moz-transform: scaleX(-1); 
-webkit-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
transform: scaleX(-1); 
-ms-filter: fliph; /*IE*/ 
filter: fliph; /*IE*/ 
}

但是，如果你的意思是：來自你好世界你想讓它出現爲dlro w^2009東海生日賀 你可以試試這個：

var ns = document.body.childNodes; 
 
ns.forEach(function(elm) { 
 
    if (elm.innerText && elm.nodeName !== "SCRIPT") { 
 
    //set array of char then re-arrange char 
 
    var arr = elm.innerText.split(''), 
 
     temp = []; 
 
    for (var i = 0, l = x = arr.length - 1; i <= l; i++, x--) { 
 
     temp[i] = arr[x]; 
 
    } 
 
    elm.innerText = temp.join('') 
 
    } 
 
})

<h1> Hello world </h1> 
 
<div>Text Here</div> 
 
<p>lorem ipsum<span> span </span>lorem ipsum lorem ipsum</p>

來源

2016-11-24 07:26:06 RizkiDPrast

請提供基於上面的css代碼的片段，並基於提到的問題 –

得到了。謝謝 – RizkiDPrast

所以現在你可以看到，它只是翻轉過來，它不是RTL。你無法閱讀你好世界！希望你現在明白什麼是問題！ –

當您使用flipH過濾器。

$(document).on("click","html",function(){ 
 
    $(this).toggleClass("flipX"); 
 
})

body { 
 
    background-image: linear-gradient(to left, rebeccapurple, skyblue); 
 
    color: white; 
 
} 
 

 
.flipX { 
 
    -webkit-transform: scaleX(-1); 
 
      transform: scaleX(-1); 
 
    -ms-filter: "FlipH"; 
 
    -webkit-filter: FlipH; 
 
      filter: FlipH; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>Page Title</h1> 
 
<p>Click to flip...</p>

來源

2016-11-24 09:19:33

翻轉水平CSS，並使用基於RTL的JavaScript反轉它方向

回答

相關問題