javascript - Facebook 帖子中的 RTL 文本重新排序单词

Question

我来自突尼斯，目前正在开发一个名为 PHPFOX 的 PHP 脚本。在其中，我想集成一种自动更改 TextBox 文本方向的功能。具体来说，当您转到 Facebook 并想发表评论时，TextBox 的输入方向将根据您选择的键盘方向发生变化。

换句话说，如果您为键盘选择了阿拉伯语，TextBox 会自动设置为RTL 方向。

这是我目前使用的代码:

$('input').keyup(function() {
    $this = $(this);
    if ($this.val().length == 1) {
        var x = new RegExp("[\x00-\x80]+"); // ASCII
        //alert(x.test($this.val()));

        var isAscii = x.test($this.val());
        if(isAscii) {
            $this.css("direction", "ltr");
        } else {
            $this.css("direction", "rtl");
        }
    }
});

输入一切正常。然而，当我在我的站点中输入混合的 LTR 和 RTL 句子，然后将其发布到 Facebook 时，看看会发生什么:

这是我输入的内容:

这是出现在 Facebook 上的内容:

看出区别了吗？我该如何解决这个问题？

Answer 1

首先 - 您采用的方法非常出色，我为您鼓掌。切换<input>的方向通过 CSS 允许自然打字非常有意义。

但是，您的 OUTPUT 出现奇怪的原因是您发送到 Facebook 的生成内容。我的猜测是，由于文本的最后几个字符位于 RTL 中，因此您输入的 CSS 仍设置为 RTL。

考虑这个例子(可以看到结果 here ):

<div>
 <b>LTR:</b> <span dir="ltr">This is some الفبای فارسی text</span>
 <br /><br />
 <b>RTL:</b> <span dir="rtl">This is some الفبای فارسی text</span>
</div>

因为第二个<span>显示为 dir="rtl" ，文本最终会重新排序，每个 LTR 短语都被视为单个 RTL“词”。

在您的示例中，您可能会考虑尝试简单地确保在提交 帖子之前，您将 CSS 方向设置回 LTR ，这将产生我认为您正在寻找的结果。

如果你有兴趣，这里是blog post讨论 LTR 的 HTML 和纯文本样式呈现之间的区别和 RTL文本。它不会为您提供任何答案，但会指出有关问题本身的更多详细信息。