关于HTML 5和CSS3的国际化支持

开发 前端
随着html5和CSS3在国内的升温,我们来了解一下关于HTML5和CSS3的国际化支持。HTML5、CSS3在国际化支持,解决跨文化和语言问题上有了更大的进步,很好的体现了人性化的设计理念。

随着html5和CSS3在国内的升温,我们来了解一下关于HTML5和CSS3的国际化支持。HTML5、CSS3在国际化支持,解决跨文化和语言问题上有了更大的进步,很好的体现了人性化的设计理念。

51CTO推荐专题:HTML 5 下一代Web开发标准详解

 一、Padding-start、padding-end CSS3的属性padding-start, padding-end,用于解决跨语言书写习惯的padding问题。 当排版是从左到右时,padding-start在左边,padding-end在右边;而排版是右到左时,padding-start在右边,padding-end在左边。这个属性能够解决padding-right和padding-left在跨书写习惯时的兼容性问题。

 

 

一个使用的例子是Chrome新的设置中心:

 

 

目前主要浏览器的新版本对于Padding-start和Padding-End标签的支持程度如下:除IE和Opera外都支持(从左到右为IE、Chrome、Firefox、Opera、Safari、QQ浏览器5)。

 

 

二、box-pack CSS3新的盒子模型中有一个属性box-pack,它可以设置为4个值:start、end、center、justify。Start和end的使用类似于padding-start和padding-end,因为box-direction属性可以设置盒子排列的顺序,使用start可以更具普遍性和兼容性,就是指和父标签的起始位置对齐。 目前主要浏览器对于CSS3新盒子模型的支持情况类似于padding-start标签:除IE和Opera外都支持。

 

 

三、-webkit-locale Webkit内核新增加了一个属性:-webkit-locale(之前叫做-webkit-hyphenate-locale,值可以设置为auto或者一个指定区域的字符串,例如“en_us”。这个属性顾名思义,可以指定连字符的显示方式,此属性源于Webkit的bug 43467。在iOS 4.2及以上版本平台上效果如下:

 

 

不过此属性还不像hyphenate-character一样,是CSS3草案中的一部分。 目前它很明显只能在Webkit内核浏览器上使用,尤其是在iOS平台上:

 

 

四、Ruby标签 HTML5提供了Ruby标签, 允许为一个或者多个文本添加附加注释,例如下面的代码: Hello, HTML5 ( Hyper Text Mark-up Language 5 ) Hello, HTML5 ( Hyper Text Mark-up Language 5 ) 显示的文本如下: Ruby标签在中文、韩文和日文教科书和古文中非常有用,读者们可以方便了解文本的详细读音和含义。 目前主要浏览器的新版本对于Ruby标签的支持程度如下:除Fifrefox和Opera外均提供支持。

 

原文:http://www.mhtml5.com/author/xielisha

【编辑推荐】

  1. 技术分析:HTML 5将改变移动互联网
  2. HTML 5新特性与技巧
  3. 学习HTML 5的10个***资源
  4. 不得不知HTML 5的10件事
  5. AppMobi发布HTML 5开发工具XDK(免费下载)
责任编辑:陈贻新 来源: HTML5研究小组
相关推荐

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2012-05-11 09:37:34

HTML5

2012-05-24 11:03:55

HTML5

2011-11-25 13:18:40

HTML 5

2010-03-22 08:56:12

2011-07-15 09:10:44

HTML 5CSS3

2012-05-30 09:22:56

Hybrid App助HTML5JavaScript

2011-11-17 09:24:27

HTML 5

2013-07-09 09:24:29

响应式HTML5CSS3

2009-12-29 15:05:29

WPF支持国际化

2011-11-18 13:25:48

HTML 5

2012-02-29 09:27:36

ibmdw

2013-08-21 13:19:33

HTML5CSS3表单设计

2014-12-03 10:21:50

HTML5

2010-07-23 10:08:44

Dojo 1.5

2011-06-17 08:54:38

HTML 5CSS3

2011-09-21 11:02:17

HTML 5

2011-01-25 09:16:33

HTML 5CSS3Web

2011-08-18 15:24:40

iPhone国际化

2012-04-10 10:31:07

点赞
收藏

51CTO技术栈公众号