javascript 巧妙地使用文本对齐(如果英语 dir=ltr 如果阿拉伯语 dir=rtl)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11787351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use text-align smartly (if english dir=ltr if arabic dir=rtl)
提问by Drstreet
I have a community web site and I want that users write
我有一个社区网站,我希望用户写
- English posts with direction LTR / text-align: left) and
- Arabic posts with direction RTL / text-align: right.
- 带有方向 LTR / text-align: left) 的英文帖子和
- 带有方向 RTL / text-align: right 的阿拉伯语帖子。
E.g. Google+ and twitter provides such an POST solution.
例如,Google+ 和 twitter 提供了这样的 POST 解决方案。
I want add automatically direction attribute to post when i read it from data base post load in rtl or ltr ! but i don't know how ?!
当我从 rtl 或 ltr 中的数据库 post load 读取时,我想自动添加方向属性到 post !但我不知道如何?!
回答by ThinkingStiff
You'll need to create a function that has all the letters you know are RTL and check when loading. To display RTL you need the CSS attributes, direction
, text-align
, and unicode-bidi
.
您需要创建一个函数,其中包含您知道的所有字母 RTL 并在加载时进行检查。要显示 RTL,您需要 CSS 属性direction
、text-align
、 和unicode-bidi
。
Script
脚本
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
CSS
.rtl {
direction: rtl;
text-align: right;
unicode-bidi: bidi-override;
}
.ltr {
direction: ltr;
text-align: left;
unicode-bidi: bidi-override;
}
HTML
HTML
<div>hello</div>
<div>?</div>
回答by Nasser Sadraee
回答by farzad
it's very easy. You can use dir='auto' Attribiute in Html Element. So if your text is Arabic or Persian Text use RTL and if your text is English automatic text use LTR.
这很容易。您可以在 Html 元素中使用 dir='auto' 属性。因此,如果您的文本是阿拉伯语或波斯语文本,请使用 RTL,如果您的文本是英文自动文本,请使用 LTR。
<p dir='auto'>Hello</p>
<p dir='auto'>????</p>
回答by pcarvalho
you can specify dir="rtl"
in your html tags for the correct presentation with php
您可以dir="rtl"
在 html 标签中使用 php指定正确的演示文稿
in your CMS or if you aren't using one, when storing the context to the DB you can have a option to store a variable with the direction of text the author used.
在您的 CMS 中,或者如果您没有使用,则在将上下文存储到数据库时,您可以选择存储一个变量,该变量带有作者使用的文本方向。
So, when fetching the post, you can also fetch the option the author marked.
因此,在获取帖子时,您还可以获取作者标记的选项。
otherwise, like the fellow programmers have suggested, parse the content and see if its arabic characters or latin characters.
否则,就像其他程序员所建议的那样,解析内容并查看是阿拉伯字符还是拉丁字符。
example
例子
<body dir="<?php se_11787707_get_post_language(); ?>">
without more information on how you are publishing your posts, i can't detail much more. please provide howyou are storing your posts and how you are fetching them.
如果没有关于您如何发布帖子的更多信息,我无法详细说明。请提供您如何存储您的帖子以及您如何获取它们。
I've built a site using this tecnique and i deal with arabic rtl content everyday. it's very simple:
我已经使用这种技术建立了一个网站,我每天都在处理阿拉伯语 rtl 内容。这很简单:
a working example of dir="rtl"
dir="rtl" 的工作示例
reference: w3.org
参考:w3.org
回答by yottanami
Actually the Arabic alphabet letters are these
其实阿拉伯字母是这些
var RTL = ['?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?'];
and Persian (Farsi) alphabet letters are these
和波斯(波斯语)字母是这些
var RTL = ['?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?','?'];
and it can be useful if check the first and second letter because sometimes it can starts by a bullet or something like that.
如果检查第一个和第二个字母会很有用,因为有时它可以以项目符号或类似的东西开头。
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';
};
};