fe at international
- 1 min在从事国际化的前端开发过程中，我们会碰到很多在中文环境下意想不到的问题。如何能更快捷的开发出可以在不同语言环境下通用的前端模块和组件，成了一个值得研究的问题。
前端开发包括什么？简单的说包括结构,样式和交互；可以粗暴的分别对应到html,css和js上。我在做国际化开发的时候，碰到的最多的问题，主要集中在布局上，也就是说其实交互逻辑都大致相似，更多的不同和挑战都出现在表现层上。
在表现层上，最大的不同应该就是不同语言环境中，元素和内容的左右镜像。举个简单的例子，现在我们看的中文网页都是从左到右看的，但是在阿拉伯语环境中，所有的内容都是从右向左看的。这点儿区别不仅仅是text-align:left;和text-align:right;的问题，还包括整个页面元素的左右布局调换。
由于目前只做移动端，所以我能想到的处理方法分为这么几种，并不一定适合PC端：
首先是在大多数情况下，弃用float:left和float:right。其实在移动端需要浮动布局的地方已经非常少了，更多的是用inline-block,flex和box来布局。但是在国际化的情况下，还要尽量避免使用inline-block的方法来进行布局。
使用flex或者box布局的话，可以使用flow-flow:row-reverse或者box-direction:reverse来对元素进行倒序排列。
另外，在一些使用inline-block方式布局的地方，可以使用direction:rtl/ltr属性来定制排列的方向，效果和使用reverse是一样的。
在目前的项目中，会打包一个layout.css，写入一些常用的布局用样式，在需要进行布局的元素上，直接写入class；然后还会再定义一个翻转用的css文件，主要写入reverse这些属性。
其次，在不得不使用float的地方，重新定义fl和fr的方向就可以了。
另外，在html中，支持在input或者textarea这种可输入的元素中加入dir属性，来控制输入字符的对齐方式，可选值为ltr和rtl，分别对应左对齐和右对齐。
目前能想到的就这么多，总而言之最主要的目的就是尽量在css层面搞定布局的事情，万不得已不去更改模板。