Ułóż od lewej do prawej języki pisane od prawej do lewej html

Question

Na mojej stronie html muszę wprowadzić tekst do akceptacji określonego zestawu liter. Robię to, łapiąc naciśnięte klawisze i sprawdzając, czy wprowadzony znak jest ważny.

Dozwolone postacie pochodzą zarówno z języka angielskiego pisanego od lewej do prawej, jak iz kilku innych języków pisanych od prawej do lewej. Każde słowo wejścia może być mieszanką zarówno angielskich, jak i arabskich, hebrajskich liter.

muszę uczynić pole tekstowe wyświetla tekst napisany od prawej do lewej (samo zachowanie na hebrajski czy arabski zastosowanie do angielska) - na przykład gdy piszę -

B

א

ב

C

D

Y

chcę być przedstawione dokładnie w tej kolejności od prawej do lewej.

Ustawienie "style:dir=rtl" nie rozwiązuje go, po prostu przedstawia tekst, który ma być pisany od prawej do lewej, ale w rzeczywistości nie zmienia kolejności znaków angielskich, które mają być prezentowane tak, jak potrzebuję.

rtl wynik to:

B

א

ב

Y

D

C

Jaki jest najlepszy sposób na zrobienie tego?

Edit:

Wydaje się, że to rozwiązuje mój problem: Right to left Text HTML input choć rozwiązanie to nie zostało wyjaśnione do szczegółów jak bym nadzieję uzyskać.

Answer 1

Ustaw swój styl pole tekstowe do tego:

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

Dlaczego?

Gdy dopiero ustawiasz kierunkowość (używając direction: rtl), nadal masz oddzielne "kierunkowe przebiegi" w obrębie tego długiego tekstu, każdy z własnym sposobem renderowania. Część "AB" to operacja od lewej do prawej i dlatego widzisz ją jako słowo angielskie z literą B po prawej stronie obiektu A. . Mówi przeglądarce, aby zapomniała o tych osobnych przebiegach i po prostu renderuj wszystkie znaki jedna po drugiej z prawej na lewą.

[Dodano celu rozwiązania potencjalnych aplikacji klienckich przy użyciu danych]

Dla aplikacji klienckich, które korzystają z tych danych, można podać ciąg siebie w sposób, który zmusi ich, aby wyświetlić ją prawidłowo, nawet jeśli te klient aplikacje są poza kontrolą.

Zakładając, że aplikacje klienckie uzyskują dostęp do danych przy użyciu jakiegoś interfejsu API lub usługi (co oznacza, że ​​nie pozwalasz im bezpośrednio na dostęp do bazy danych), możesz dodać znak kontrolny Unicode o nazwie Right-to-Left Override (RLO) na początku ciąg, przed wysłaniem go do klienta.

Kod charakter RLO jest \u202E więc po swój przykład powyżej, otrzymany ciąg byś wrócić do swojego klienta byłoby:

\ u202E

B

א

ב

C

D

Y

Większość przeglądarek internetowych i systemów operacyjnych respektować znaki sterujące bidi i zastosować właściwą dwukierunkową renderowania logiki. Tak więc, gdy aplikacja kliencka wyprowadza ten ciąg do interfejsu użytkownika, podstawowy silnik renderujący powinien wyświetlić ciąg znaków zgodnie z zamierzeniem użytkownika.

Uwaga: Dodanie znaku Unicode za pomocą kodu szesnastkowego do ciągu znaków może się różnić w zależności od platformy i języka programowania.

Answer 2

Można to zrobić z 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> 

nadziei, że to pomoże

Answer 3

Cóż, przeglądałem blogi i próbki związane z RTL i wymyśliłem poniżej próbną próbkę.

w tym kodzie opcji przełączania jest tam można spróbować zarówno LTR i RTL na kliknięcie tego przycisk-

JSfiddle: http://jsfiddle.net/vikash2402/ammajhy3/3/

Poniżej znajduje się kod pracy dla niego.

// 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>

nadzieję, że to pomoże :)

Answer 4

można użyć tej funkcji

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

Answer 5

Spróbuj tag <bdo>

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

Rezultat: od lewej do prawej.

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

Wynik: .tfel-ot-thgir