從左到右語言寫成從右到左html

在我的html頁面中，我需要讓我的文本輸入接受一組特定的字母。我通過捕獲按鍵事件並檢查輸入的字符是否有效來做到這一點。從左到右語言寫成從右到左html

那些允許的字符都是從英文寫成，從左到右，以及從右到左書寫的幾個其他語言。輸入的每個單詞都可以是英文和阿拉伯文的希伯來字母組合。

我需要的文本框中顯示從右到左書寫的文本（相同的行爲爲希伯來語或阿拉伯適用於英文） - 例如，如果我寫下來 -

一個

乙

我希望它在從右這個爲了留下準確呈現。

設置"style:dir=rtl"不能解決它，它只是呈現從右向左書寫的文本，但實際上並沒有改變英文字符的順序以呈現我需要的順序。

rtl結果是這樣的：

乙

甲

這樣做的最佳方法是什麼？

編輯：

看起來這解決了我的問題：Right to left Text HTML input 雖然方案並不解釋細節，我希望能得到。

來源

2016-09-25 S. Peter

的可能的複製[右至左文本輸入HTML（http://stackoverflow.com/questions/7524855/right-to-left-text- html-input） – ElChupacabra

你的代碼在哪裏，彼得？ – Ricky

那裏沒有真正的詳細答案，已經看到了這個問題。 @Ricardo我還沒有實現這樣的事情。試圖找出一種方法 –

設置你的文本樣式到這一點：

style="direction:rtl; unicode-bidi:bidi-override;"

爲什麼？

當您剛剛設置方向性（使用direction: rtl）時，您仍然在該長文本中有單獨的「定向運行」，每個都有其自己的渲染行爲。「AB」部分是從左到右運行的，這就是爲什麼你看到它呈現爲英文單詞，B的右側是A. A

添加unicode-bidi: bidi-override告訴瀏覽器忘記那些單獨的運行，只需從右向左依次渲染所有字符。

[增加了使用數據，以解決潛在的客戶端應用程序]

對於使用該數據的客戶端應用程序，可以提供一種方式字符串本身，這將迫使他們正確地顯示出來，即使這些客戶端應用程序無法控制。

假設客戶端應用程序使用某種類型的API或服務訪問數據（意味着您不讓它們直接訪問數據庫），那麼可以將一個名爲Right-to-Left Override（RLO）的Unicode控制字符添加到字符串，然後再發送給客戶端。

的RLO字符代碼\u202E所以按照上面的例子中，你將返回到客戶端生成的字符串是：

\ u202E

一個

乙

和

大多數Web瀏覽器和操作系統尊重BiDi的控制字符和應用正確BiDi的再現邏輯。因此，當客戶端應用程序將該字符串輸出到UI時，底層渲染引擎應該按照您的預期顯示字符串。

注意：將unicode字符的十六進制代碼添加到字符串中可能會因平臺和編程語言而異。

來源

2016-09-28 12:05:48 Atzmon

這對視圖非常有用，但它是否可以保存顯示在後端（以及我們的數據庫）中的文本，而不僅僅是使其正確顯示？ –

文本始終保存爲數據庫中的一串字符。它如何呈現取決於顯示它的客戶端。數據庫只是存儲字節：A然後是B然後是B等。數據庫本身沒有「顯示」。你的數據庫管理UI有一些自己的渲染邏輯，一個Web瀏覽器有自己的，所以你可以找到或建立自己的任何其他客戶端。數據庫本身只有數據。 – Atzmon

我明白你在說什麼，但是這些數據會被髮送到不同的系統，我的團隊不負責開發這些系統，而且文本也需要在系統中像這樣顯示。強迫所有人設置視圖以支持這種顯示，還是以不同的系統開發人員不必以特殊方式處理該文本的方式保存文本會更好嗎？ –

爲此，您可以用JS

<div id="id_of_content"></div> 

<script type="text/javascript"> 
     // if updating the div in realtime then try using keypress listener to call this function 
     function(id_of_content) { 
      var text = $('#'+id_of_content).text(); 
      var words = text.split(' '); 
      var result = ''; 
      for(var j=0;j<words.length;j++) { 
       if(/[^a-zA-Z]/.test(words[j])) { 
        var temp = words[j]; 
        var rev_word = ''; 
        for(var i=0;i<temp.length;i++) { 
         rev_word += temp[temp.length-i-1] 
        } 
       result += rev_word; 
       } 
       else { 
        result += words[j]; 
       } 
      } 
     $('#'+id_of_content).text(result); 
     } 
</script>

希望這有助於

來源

2016-09-25 20:24:48

這沒有工作 –

明白了！我已經更新了這個代碼。 –

這不是代碼翻轉整個文本嗎？爲了達到我的目標，只需要左右角色就可以顛倒過來。意思是，英文字母的組合需要顛倒，當希伯來語或阿拉伯字符應該保持不變 –

好吧，我正在瀏覽一些與RTL相關的博客和示例，並提供了下面的工作示例。

在這段代碼轉換選項是存在的，你可以嘗試兩種LTR和RTL上點擊這個按鈕 -

的jsfiddle：http://jsfiddle.net/vikash2402/ammajhy3/3/

下面是它的工作代碼。

// Jquery, BS3 & Awesome 
 
$('#rtl-button').click(
 

 
function() { 
 
    var src = 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css'; 
 
    if ($(this).attr('data-direction') == 'ltr') { 
 
     $('head').append('<link href=' + src + ' rel="stylesheet" id="bootstrap-rtl" />'); 
 
     $(this).attr('data-direction', 'rtl'); 
 
    } else { // by default we load bootstrap-rtl 
 
     $('head link[href="' + src + '"]').remove(); 
 
     $(this).attr('data-direction', 'ltr'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h3>Testing bootstrap RTL css overwrite</h3> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 
<span class="icon-bar"></span> 
 

 
      </button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a> 
 

 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Welcome</a></li> 
 
       <li><a href="#"><span class="glyphicon glyphicon-phone-alt"></span> Contact us</a></li> 
 
       <li><a href="#">Career</a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li> 
 
        <form class="navbar-form" role="search"> 
 
         <div class="form-group"> 
 
          <input type="text" class="form-control" placeholder="Search" /> 
 
         </div> 
 
         <button type="submit" class="btn btn-default">Submit</button> 
 
        </form> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 
</div> 
 
<a href="#" class="btn btn-default" title="" id="rtl-button" data-direction="ltr"><span class="glyphicon glyphicon-indent-right"></span> RTL</a>

希望這將幫助你:)

來源

2016-10-04 13:41:06

您可以使用此功能

function reverseLTR(text) { 
 
    var ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF' + '\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF'; 
 
    var r = new RegExp("[" + ltrChars + "]?", 'g'); 
 
    var ltrMatches = text.match(r); 
 
    var arr = []; 
 
    var insertPlace=0; 
 
    for (var i = 0; i < text.length; i++) { 
 
     if (!ltrMatches[i].length) {//its rtl character 
 
      arr.splice(i, 0, text[i]); 
 
      insertPlace=i+1; 
 
     } 
 
     else arr.splice(insertPlace, 0, text[i]); 
 
    } 
 
    return arr.join(""); 
 
} 
 
var text="ABאבCDY"; 
 
document.body.innerHTML=text+" converted to : "+reverseLTR(text);

來源

2016-10-04 19:10:10 fingerpich

嘗試<bdo>標籤

<p>left-to-right.</p>

結果：左到右。

<p><bdo dir="rtl">right-to-left.</bdo></p>

結果：.tfel-OT-thgir

來源

2016-10-04 20:25:58 Herbs

從左到右語言寫成從右到左html

回答

相關問題