html text-transform,text-transform

text-transform

text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

text-transform属性考虑特定于语言的案例映射规则，如：

in Turkic languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.

In German (de), the ß becomes SS in uppercase.

In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only put the first letter of a word in uppercase.

In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).

In Greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context.

在其他一些其他特定的情况下，映射规则不被任何浏览器考虑在内：

in Gaelic (ga), a prefix letter remains in lowercase when the base initial is capitalised, so in this example the h- should not be capitalized: text-transform: uppercase will change Meud na h-aplacaid to MEUD NA H-APLACAID which violates the locale orthographic rules, as it ought to be MEUD NA h-APLACAID.

语言由 lang HTML属性或 xml:lang  XML属性定义。

对于这些特定情况的支持因浏览器而异，因此请检查浏览器兼容性表。

none

适用元素all elements. It also applies to ::first-letter and ::first-line.

as specified

Animation typediscrete

/* Keyword values */

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

/* Global values */

text-transform: inherit;

text-transform: initial;

text-transform: unset;

capitalize

这个关键字强制每个单词的首字母转换为大写。其他的字符保留不变(它们写在元素里的文本保留原始大小写)。字母是Unicode字符集或者数字里定义的字符 ；因此单词开头的任何标点符号或者特殊符号将会被忽略。

Authors should not expect capitalize to follow language-specific titlecasing conventions (such as skipping articles in English).

uppercase

这个关键字强制所有字符被转换为大写。

lowercase

这个关键字强制所有字符被转换为小写。

none

这个关键字阻止所有字符的大小写被转换。

full-width

这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里，并允许它们按照一般的东亚文字(比如中文或日文)对齐。

none | capitalize | uppercase | lowercase | full-width | full-size-kana

Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

text-transform: none Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

span {

text-transform: none;

}

strong { float: right; }

This demonstrates no text transformation.

Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

 

text-transform: capitalize Lorem ipsum dolor sit amet, consectetur adipisicing elit, ... 

span {

text-transform: capitalize;

}

strong { float: right; }

This demonstrates text capitalization.

Initial String (this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!

 

text-transform: capitalize (this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform! 

span {

text-transform: capitalize;

}

strong { float: right; }

This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

Initial String ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl

 

text-transform: capitalize ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl

span {

text-transform: capitalize;

}

strong { float: right; }

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

Initial String The Dutch word: "ijsland" starts with a digraph.

 

text-transform: capitalize The Dutch word: "ijsland" starts with a digraph. 

span {

text-transform: capitalize;

}

strong { float: right; }

This demonstrates how the Dutch ij digraph must be handled like one single letter.

Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

 

text-transform: uppercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ... 

span {

text-transform: uppercase;

}

strong { float: right; }

This demonstrates transforming the text to uppercase.

Initial String Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"

text-transform: uppercase Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα" 

span {

text-transform: uppercase;

}

strong { float: right; }

This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

 

text-transform: lowercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ... 

span {

text-transform: lowercase;

}

strong { float: right; }

This demonstrates transforming the text to lowercase.

Initial String Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.

 

text-transform: lowercase Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ. 

span {

text-transform: lowercase;

}

strong { float: right; }

This demonstrates how the Greek character sigma (Σ) is transformed into the regular lowercase sigma (σ) or the word-final variant (ς), according the context.

Initial String 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~

 

text-transform: full-width 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~ 

span {

text-transform: full-width;

}

strong { width: 100%; float: right; }

Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

Specification

Status

Comment

Editor's Draft

From CSS Text Module Level 3

text-transform, adds the full-size-kanakeyword and allows the full-width keyword to be used together with another keyword.

Candidate Recommendation

From CSS Level 2 (Revision 1)

text-transform, extends letters to any Unicode character in the Number or Letter general category.  Modifies the behavior of capitalize to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the full-widthkeyword to mix smoothly ideographic characters and alphabetical characters.

Recommendation

From CSS Level 1

text-transform, extends letters to non-latin bi-cameral scripts

Recommendation

Initial definition

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

1.0 (1.7 or earlier)

4.0

7.0

1.0

capitalize(CSS3 version)

?[1]

14 (14)[1]

?[1]

?[1]

?[1]

full-size-kana

未实现

未实现

未实现

未实现

未实现

full-width

未实现

19 (19)

未实现

未实现

未实现

ß → SS

?

1.0 (1.7 or earlier)

?

?

?

i → İ and ı→ I

未实现

14 (14)

?

?

未实现

Dutch IJdigraph

未实现

14 (14)

未实现

未实现

未实现

Greek accented letters

30

15 (15)

未实现

未实现

未实现

Σ → σ or word-final ς

30

14 (14)

未实现

未实现

6.0

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

1.0

1.0 (1)

6.0

6.0

1.0

capitalize(CSS3 version)

?[1]

14.0 (14)[1]

?[1]

?[1]

?[1]

full-size-kana

未实现

未实现

未实现

未实现

未实现

full-width

未实现

19.0 (19)

未实现

未实现

未实现

ß → SS

?

1.0 (1)

?

?

?

i → İ and ı→ I

未实现

14.0 (14)

?

?

未实现

Dutch IJdigraph

未实现

14.0 (14)

未实现

未实现

未实现

Greek accented letters

未实现

未实现

未实现

未实现

未实现

Σ → σ or word-final ς

未实现

14.0 (14)

未实现

未实现

未实现

[1] The capitalize keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.

/