前端国际化

需要注意的点

1 .最基本的要求:文字替换.label,placeholder,字段校验提示信息,超链接
2 .页面文案样式处理,不同语言的文字,会有不同的表现,他这个文字都是相同的页签包起来的,这样不是可以在里面根据语言文字来设置样式吗/就不需要玩家自己操心了
3 .日期,数字格式
4 .LTR,RTL,中东国家的语言习惯都是RTL,需要direction,tranfform来解决
5 .图片的国际化
6

基本思路

image.png

1 .提取文案
2 .翻译团队翻译
3 .拿到各国语言版本
4 .每种语言对应一个资源文件
5 .开发人员替换

青铜时代

1 .需要一个工具,能够扫描指定的文件,识别出其中的字符串,然后根据字符串的含义生成变量名,并用变量表达式替换掉原来的字符串,最后能将提取出来的变量自动追加到资源文件中


image.png

黄金时器

1 .前端开发-提取的文案直接上传到"文案配置平台",翻译团队直接在"文案配置平台"上进行文案翻译,前端直接从文案配置平台获取翻译后的最新文案
2 .需求

面向前端开发人员:文案录入、输出
面向翻译团队:文案翻译、发布
其他:文案版本控制

语言切换方式

直接通过脚本进行切换,还是通过url跳转到另一个语言的站点?
重新渲染问题
自动根据浏览器判断语言(html[lang] navigator.language || navigator.browserLanguage)

日期/货币/数字分隔符

902 300 (法国),或 902.300 (德国),又或者 902,300 (美国)
locale 的前半部分表示语言,通常由 2 或 3 位小写字母组成,符合 ISO 639
locale 的后半部分表示地区,由符合 ISO 3166标准的 2 或 3 位大写字母,或符合 UN M.49 标准的 3 位数字组成。
用浏览器内置的Intl接口,不需要自己去写一大堆格式化逻辑

CSS 中也可以做国际化

属性选择器[lang=zh]
:lang(zh) 伪类
writing-mode: horizontal-tb(横), vertical-lr(竖从左到右), vertical-rl(竖从右到左)
sideways-lr 和 sideways-rl 侧转
text-orientation: text-combine-upright 合并字符为一个字符
text-emphasis: dot 着重号
font-variant-east-asian 字体变化等等

由于谷歌翻译插件会在替换文本时修改标签(DOM结构)会导致vue、react这种基于virtual dom的框架产生问题

1 .https://www.tangshuang.net/8099.html

翻译网站

1 .https://crowdin.com/

语言相关样式

1 .lang .浏览器根据这个来决定是否要翻译网页,谷歌浏览器
2 .<html lang="zh">
3 .<p>The fourth animal in the Chinese Zodiac is Rabbit (<span lang="zh">兔子</span>).</p>
4 .这种思路是一次全部渲染,然后根据lang动态切换,但是这种感觉有点浪费
5 .writing mode

1 .writing-mode:vertical-lr:垂直,从左到右 蒙古文字
2 .writing-mode:vertical-rl:垂直,从右到左.日文,韩文
3 .text-orientaion:改变字符的方向,竖着排列插入横向排列的文字,需要这样转一下
4 .text-combine-upright:将字母压缩到一个字符空间,一个NBA,可以压成在一个字符的空间显示

日期

1 .比如在中文中通常是年月日格式:2019-05-13,英语中日期格式是日月年 13-05-2019

2 .超长语言的处理
3 ..将每个语言打包成一个页面(index-en_US.html,index-fr_FR.html.通常使用在对于性能和白屏时间有要求的网站首页,采用后端渲染根据对应的语言去加载
或者每个语言的差异比较大,不能通过模版语法简单的key-value对应上
4 .同一个页面,根据_locale参数或cookie加载不同的语言包(en_US.json,fr_FR.json)

样式

1 .不同语言长度造成的样式错乱

1 .超出内容宽度之后省略号表示
2 .tips在别的地方显示. 加一个title属性,鼠标hover上去可以看到.
3 .根据字的数量进行缩小

2 .样式错乱解决办法

1 .包裹容器尽量不要写死宽高
2 .溢出隐藏:overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
3 .自适应布局
4 .自动缩小,每一种语言单独定制class,实际渲染的时候使用对应的class

3 .图片替换

时区问题

1 .应该有一个绝对时间吧,时间戳,从时间戳转为本地时间
2 .这种问题一般数据库的时区设置为UTC时间,前端传的数据增加时区的字段,标识自己是哪个时区,后端将这个时间转为UTC时区传给数据库,同时,数据库返回的时间再转为前端需要的时区传递出去,这样会有效避免时区问题
3 .既然我们的数据库已经是当地的时区,无法改变,那一种有效的做法时,登录页面前做个选择时区的页面,用户选择切换到对应的时区,访问对应的数据源。

基础套路

定义国际化配置:
定义的方式有多种,多以文件的形式单独保存,如json,js,properties 等,
并且将配置信息以键值对的形式保存备用

根据环境读取配置:
所谓环境说白了就是用户选择的标志,形式如下:
hash型:#cn; #en; #us
saerch型:?lan=cn; ?lan=en; ?lan=us
url/meta型: 163.com/cn/; 163.com/en
缓存型:缓存形式多为cookie,默认cn,用户重新设定后将缓存更新

将配置展现在页面上:
使用三方插件或者自己编写插件将配置信息映射到页面上,
可以使用,juery.i18n.js 或 react、angular国际化插件等regular暂无插件
插件的基本原理都是做字典查询键值匹配替换。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容