Сделать слева направо языки должны быть написаны справа налево html

На моей странице html мне нужно, чтобы мой ввод текста принимал определенный набор букв. Я делаю это, перехватывая событие с клавиатуры и проверяя, что введенный символ действителен.

Эти допустимые символы берутся с английского, написанного слева направо, и с нескольких других языков, написанных справа налево. Каждое слово ввода может быть сочетанием как английских, так и арабских, ивритских букв.

Мне нужно, чтобы в текстовом поле отображался текст, написанный справа налево (такое же поведение для иврита или арабского языка применимо к английскому) - например, если я записываю -

Я хочу, чтобы он был представлен точно в этом порядке справа налево.

Установка "style:dir=rtl" не решает его, просто представляет текст, который будет написан справа налево, но фактически не изменяет порядок отображения английских символов, как мне нужно.

Результат

rtl таков:

Каков наилучший способ сделать это?

Edit:

Похоже, что это касается моей проблемы: Справа налево Текстовый ввод HTML хотя решение не объясняется деталями, как я надеюсь получить.

Ответ 1

Задайте для этого стиля текстового поля:

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

Почему?

Когда вы просто устанавливаете направленность (используя direction: rtl), у вас все еще есть отдельные "направленные движения" внутри этого длинного текста, каждый со своим собственным режимом рендеринга. Часть "AB" - это пробел слева направо, и поэтому вы видите, что оно отображается как английское слово с буквой B справа от A.

Добавление unicode-bidi: bidi-override указывает браузеру забыть об этих отдельных запусках и просто отображать все символы один за другим справа налево.

[Добавлен адрес потенциальных клиентских приложений с использованием данных]

Для клиентских приложений, которые используют эти данные, вы можете предоставить строку непосредственно таким образом, чтобы заставить их отображать ее правильно, даже если эти клиентские приложения не поддаются контролю.

Предполагая, что клиентские приложения получают доступ к данным с помощью API или службы какого-либо типа (что означает, что вы не позволяете им напрямую обращаться к вашей базе данных), вы можете добавить управляющий символ Unicode с именем Right-to-Left Override (RLO) в начало перед отправкой его клиенту.

Код символа RLO \u202E, поэтому, следуя приведенному выше примеру, результирующая строка, которую вы вернете клиенту, будет выглядеть следующим образом:

\ u202E

Большинство веб-браузеров и операционных систем уважают управляющие символы BiDi и применяют правильную логику визуализации BiDi. Поэтому, когда клиентское приложение выводит эту строку в пользовательский интерфейс, базовый движок рендеринга должен отображать строку по вашему желанию.

Примечание. Добавление символа Unicode шестнадцатеричным кодом в строку может варьироваться в зависимости от вашей платформы и языка программирования.

Ответ 2

Вы можете сделать это с помощью 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>

надеюсь, что это поможет

Ответ 3

Хорошо, я просматривал некоторые блоги и образцы, связанные с 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>

Ответ 4

эту функцию можно использовать

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

Ответ 5

Попробуйте тег <bdo>

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

Результат: слева направо.

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

Результат:.tfel-ot-thgir