談HTML5和CSS3的國際化支援

2021-08-25 18:48:16 字數 1318 閱讀 6702

html5、css3在國際化支援,解決跨文化和語言問題上有了更大的進步,很好的體現了人性化的設計理念。

一、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)

顯示的文字如下:

ruby標籤在中文、韓文和日文教科書和古文中非常有用,讀者們可以方便了解文字的詳細讀音和含義。

目前主要瀏覽器的新版本對於ruby標籤的支援程度如下:除fifrefox和opera外均提供支援。

談HTML5和CSS3的國際化支援

html5 css3在國際化支援,解決跨文化和語言問題上有了更大的進步,很好的體現了人性化的設計理念。一 padding start padding end css3的屬性padding start,padding end,用於解決跨語言書寫習慣的padding問題。當排版是從左到右時,paddin...

css3和html5的基礎

流式布局 應對視窗大小做等比例縮放布局 簡單來說利用百分數來進行布局 css3的box sizing與calc 通常設定邊框會被設定在元素的外圍 box sizing屬性值設為border box時邊框就加在元素內部 css3中在進行響應式布局時需要對不不同的螢幕大小設定不同的div排序方式。這時候...

html5和css3新特性

1易用簡潔 指令碼和連線無需type html5新增加的一些標籤和特性如下 1.無需寫type,指令碼和連線 2.新增加標籤標記元素mark高亮顯示 audio video 如下figure input新增屬性 placeholder required autofocus 新增正規表示式在input...