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.
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

句法

/* 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

Is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general categories : it excludes any punctuation marks or symbols at the beginning of the word.

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

uppercase
Is a keyword forcing all characters to be converted to uppercase.
lowercase
Is a keyword forcing all characters to be converted to lowercase.
none
Is a keyword preventing the case of all characters to be changed.
full-width 
Is a keyword forcing the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

正式语法

none | capitalize | uppercase | lowercase | full-width

例子

none

<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> 
<p>text-transform: none <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
  text-transform: none;
}
strong { float: right; }

This demonstrates no text transformation.

首字母大写capitalize (普通)

<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: capitalize <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
  text-transform: capitalize;
}
strong { float: right; }

This demonstrates text capitalization.

首字母大写 (标点)

<p>Initial String <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> </p> <p>text-transform: capitalize <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> </p>
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.

首字母大写(符号)

<p>Initial String <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p> <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong></p>
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.

首字母大写 (荷兰ij有向图)

<p>Initial String <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong> </p> <p>text-transform: capitalize <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong> </p>
span {
  text-transform: capitalize;
}
strong { float: right; }

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

大写字母uppercase  (普通)

<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: uppercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
  text-transform: uppercase;
}
strong { float: right; }

This demonstrates transforming the text to uppercase.

大写字母(希腊元音)

<p>Initial String <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> </p><p>text-transform: uppercase <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> </p>
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.

小写字母lowercase (普通)

<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: lowercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
span {
  text-transform: lowercase;
}
strong { float: right; }

This demonstrates transforming the text to lowercase.

小写字母 (希腊语Σ)

<p>Initial String <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong> </p> <p>text-transform: lowercase <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong> </p>
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.

全宽度full-width (普通)

<p>Initial String <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p>
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
CSS Text Level 4
text-transform
Working Draft From CSS Text Level 3
text-transform
, adds the full-size-kanakeyword and allows the full-width keyword to be used together with another keyword.
CSS Text Level 3
text-transform
Working Draft 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.
CSS Level 2 (Revision 1)
text-transform
Recommendation From CSS Level 1
text-transform
, extends letters to non-latin bi-cameral scripts
CSS Level 1
text-transform
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.

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, ziyunfei, Hbjswj
 最后编辑者: xgqfrms-GitHub,