Skip to content

HTML CSS JS i18n

Jump to bottom Edit New page
Sam Zeng edited this page May 19, 2014 · 4 revisions

前端 (HTML CSS JS) 多语言解决方案

JS交互文案多语言 (非AJAX，无服务器请求)

注：以下属性均大小写敏感

供JS取得当前语言方案，

1. 设置最外层 HTML 标签的lang属性，如：zh，zh，en

参考：HTML5 lang

<html lang="zh">
…
</html>
2. 添加 <body> Class 属性，如：zh-CN，zh-TW，en-US 
<html lang="zh">
<head></head>
<body class="xxx yyy zh-CN">
</html>
3. 给 HTTP Header 返回状态添加 Accept-Language 字段：

参考：HTTP Header

Accept-Language: en

4. 设置语言字段的浏览器Cookie

JS 多语言流程

--- js/
 |---- /en-US.js                英文语言包  
 |---- /zh-CN.js                中文简体语言包             
 |---- /zh-TW.js                中文繁体语言包

en-US.js文件结构：

var $lang = {
    "用户名" : "User Name",
    "此处用户名不能为空" : "Login can't be blank here"
};

zh-TW.js文件结构：

var $lang = {
    "用户名" : "用戶名",
    "此处用户名不能为空" : "此處用戶名不能為空"
};

JS中调用方式：

$lang["用户名"]
$lang["此处用户名不能为空"]

CSS 多语言流程

注：css中的多语言体现在，图片（如：按钮文字，Banner文字等），才用CSS优先级覆盖的原理，根据当前语言设置调取最佳的CSS文件。

--- css/
 |---- /style.css                        主样式表 
 |---- /images/sprite.png                默认图片(简体) 
 ...     
 |---- /images/en-US/sprite.png          英文图片 
 ...
 |---- /images/zh-TW/sprite.png          繁体中文图片

主style.css 中 background-image 写法：（使用优先级覆盖的逻辑）

body .icon{ background-img:url("images/sprite.png"); }
body.en-US .icon{ background-img:url("images/en-US/sprite.png"); }

HTML 中的多语言图片，由PHP控制输出

<img src="../logo.png"/>
<img src="../logo-tw.png"/>
<img src="../logo-en.png"/>
Add a custom footer
Add a custom sidebar

Clone this wiki locally