13

我有一个社区网站，我希望用户写

  • 带有方向 LTR / text-align: left) 的英文帖子和
  • 带有方向 RTL / text-align: right 的阿拉伯语帖子。

例如，Google+ 和 twitter 提供了这样的 POST 解决方案。

当我从 rtl 或 ltr 中的数据库后加载读取它时，我想自动添加方向属性到 post ！但我不知道怎么做？！

4

5 回答 5

21

您需要创建一个函数，其中包含您知道的所有字母 RTL 并在加载时检查。要显示 RTL，您需要 CSS 属性direction、、、text-align和unicode-bidi。

演示： jsFiddle

脚本

function checkRtl( character ) {
    var RTL = ['ا','ب','پ','ت','س','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];
    return RTL.indexOf( character ) > -1;
};

var divs = document.getElementsByTagName( 'div' );

for ( var index = 0; index < divs.length; index++ ) {
    if( checkRtl( divs[index].textContent[0] ) ) {
        divs[index].className = 'rtl';
    } else {
        divs[index].className = 'ltr';
    };
};

CSS

.rtl {
    direction: rtl; 
    text-align: right;
    unicode-bidi: bidi-override;
}

.ltr {
    direction: ltr; 
    text-align: left;
    unicode-bidi: bidi-override;
}

HTML

<div>hello</div>
<div>ظ</div>
于 2012-08-03T00:41:43.080 回答
14

有一个纯 CSS 的解决方案：

div {
    text-align: start;
    unicode-bidi: plaintext;
}

jsFiddle

不幸的是，此解决方案不适用于 Microsoft Edge。

于 2018-07-15T18:00:55.953 回答
7

这很容易。您可以在 Html 元素中使用 dir='auto' 属性。因此，如果您的文本是阿拉伯语或波斯语文本，请使用 RTL，如果您的文本是英文自动文本，请使用 LTR。

<p dir='auto'>Hello</p>
<p dir='auto'>سلام</p>
于 2017-06-07T20:14:59.857 回答
3

您可以dir="rtl"在 html 标签中指定正确的 php 演示文稿

在您的 CMS 中，或者如果您不使用 CMS，则在将上下文存储到数据库时，您可以选择使用作者使用的文本方向存储变量。

因此，在获取帖子时，您还可以获取作者标记的选项。

否则，就像其他程序员建议的那样，解析内容并查看其是阿拉伯字符还是拉丁字符。

例子

<body dir="<?php se_11787707_get_post_language(); ?>">

如果没有有关您如何发布帖子的更多信息，我无法详细说明。请提供您如何存储帖子以及如何获取它们。

我已经使用这种技术建立了一个站点，并且我每天都在处理阿拉伯语的 rtl 内容。这很简单：

dir="rtl" 的工作示例

jsfiddle.net

参考：w3.org

于 2012-08-03T00:30:11.503 回答
1

实际上阿拉伯字母是这些

var RTL = ['ا','ء','ب','ت','ث','ج','ح','خ','د','ذ','ر','ز','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','ل','م','ن','و','ه','ی'];

和波斯（波斯）字母是这些

var RTL = ['ا','ب','پ','ت','ث','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];

如果检查第一个和第二个字母会很有用，因为有时它可以以项目符号或类似的东西开头。

for ( var index = 0; index < divs.length; index++ ) {
    if( checkRtl( divs[index].textContent[0] ) || checkRtl( divs[index].textContent[1] ) ) {
        divs[index].className = 'rtl';
    } else {
        divs[index].className = 'ltr';
    };
};
于 2017-03-09T12:50:14.480 回答