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

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

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

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

A

B

א

ב

C

D

Y

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

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

rtl результат такой:

B

A

א

ב

Y

D

C

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

Edit:

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

5 ответов


установите стиль текстового поля следующим образом:

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

почему?

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

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

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

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

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

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

\u202E

A

B

א

ב

C

D

Y

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

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


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

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


Ну, я просматривал некоторые блоги и примеры, связанные с RTL, и придумал ниже рабочий образец.

в этой опции переключения кода Вы можете попробовать как LTR, так и RTL при нажатии этой кнопки- enter image description here

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>

надеюсь, это поможет вам :)


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

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

попробовать <bdo> tag

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

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

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

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