JavaScript-js如何实现css 中的direction: rtl效果

JavaScript-js如何实现css 中的direction: rtl效果

夜无邪 发布于 2017-06-24 字数 247 浏览 1313 回复 2

direction: rtl 效果是文本书写方向从右到左,在html里只要设置标签的样式为direction: rtl就可以实现。但是当有js提示内容的时候就做不到了,目前再开发一个阿拉伯语网站,阿拉伯语都是文字从右向左的。如果简单实现把js提示内容,比如alert内容从右向左呢?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

晚风撩人 2017-10-14 2 楼

如果我没有理解错的,就是一个字符串翻转的操作吧,可以参考这个函数:

function strrev (string) {
// Reverse a string
//
// version: 1109.2015
// discuss at: http://phpjs.org/functions/strrev
// + original by: Kevin van Zonneveld ( http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// + reimplemented by: Brett Zamir ( http://brett-zamir.me)
// * example 1: strrev('Kevin van Zonneveld');
// * returns 1: 'dlevennoZ nav niveK'
// * example 2: strrev('au0301haB') === 'Bahau0301'; // combining
// * returns 2: true
// * example 3: strrev('AuD87EuDC04Z') === 'ZuD87EuDC04A'; // surrogates
// * returns 2: true
string = string + '';

// Performance will be enhanced with the next two lines of code commented
// out if you don't care about combining characters
// Keep Unicode combining characters together with the character preceding
// them and which they are modifying (as in PHP 6)
// See http://unicode.org/reports/tr44/#Property_Table (Me+Mn)
// We also add the low surrogate range at the beginning here so it will be
// maintained with its preceding high surrogate
var grapheme_extend = /(.)([uDC00-uDFFFu0300-u036Fu0483-u0489u0591-u05BDu05BFu05C1u05C2u05C4u05C5u05C7u0610-u061Au064B-u065Eu0670u06D6-u06DCu06DE-u06E4u06E7u06E8u06EA-u06EDu0711u0730-u074Au07A6-u07B0u07EB-u07F3u0901-u0903u093Cu093E-u094Du0951-u0954u0962u0963u0981-u0983u09BCu09BE-u09C4u09C7u09C8u09CB-u09CDu09D7u09E2u09E3u0A01-u0A03u0A3Cu0A3E-u0A42u0A47u0A48u0A4B-u0A4Du0A51u0A70u0A71u0A75u0A81-u0A83u0ABCu0ABE-u0AC5u0AC7-u0AC9u0ACB-u0ACDu0AE2u0AE3u0B01-u0B03u0B3Cu0B3E-u0B44u0B47u0B48u0B4B-u0B4Du0B56u0B57u0B62u0B63u0B82u0BBE-u0BC2u0BC6-u0BC8u0BCA-u0BCDu0BD7u0C01-u0C03u0C3E-u0C44u0C46-u0C48u0C4A-u0C4Du0C55u0C56u0C62u0C63u0C82u0C83u0CBCu0CBE-u0CC4u0CC6-u0CC8u0CCA-u0CCDu0CD5u0CD6u0CE2u0CE3u0D02u0D03u0D3E-u0D44u0D46-u0D48u0D4A-u0D4Du0D57u0D62u0D63u0D82u0D83u0DCAu0DCF-u0DD4u0DD6u0DD8-u0DDFu0DF2u0DF3u0E31u0E34-u0E3Au0E47-u0E4Eu0EB1u0EB4-u0EB9u0EBBu0EBCu0EC8-u0ECDu0F18u0F19u0F35u0F37u0F39u0F3Eu0F3Fu0F71-u0F84u0F86u0F87u0F90-u0F97u0F99-u0FBCu0FC6u102B-u103Eu1056-u1059u105E-u1060u1062-u1064u1067-u106Du1071-u1074u1082-u108Du108Fu135Fu1712-u1714u1732-u1734u1752u1753u1772u1773u17B6-u17D3u17DDu180B-u180Du18A9u1920-u192Bu1930-u193Bu19B0-u19C0u19C8u19C9u1A17-u1A1Bu1B00-u1B04u1B34-u1B44u1B6B-u1B73u1B80-u1B82u1BA1-u1BAAu1C24-u1C37u1DC0-u1DE6u1DFEu1DFFu20D0-u20F0u2DE0-u2DFFu302A-u302Fu3099u309AuA66F-uA672uA67CuA67DuA802uA806uA80BuA823-uA827uA880uA881uA8B4-uA8C4uA926-uA92DuA947-uA953uAA29-uAA36uAA43uAA4CuAA4DuFB1EuFE00-uFE0FuFE20-uFE26]+)/g;
string = string.replace(grapheme_extend, '$2$1'); // Temporarily reverse
return string.split('').reverse().join('');
}

测试通过

泛泛之交 2017-07-12 1 楼

其实不用弄啊,翻译出来的语句自然就是从右向左读的,比如“عودة إلى الصفحة الرئيسية”这句话阿拉伯人自然就是从右读向左,具体语法我不太懂,但不能以中文的习惯以为他们是由字组成词再组成句子的。

另外有的地方你一定要实现类似效果,可以用自定义的提示框来代替,能实现对话框的js组件非常多,比如jQuery UI 的dialog,这些就可以定义样式