Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
-text-transform: none Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: none + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { text-transform: none; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates no text transformation. +这个示例展示了没有文字转换的情况。 -{{ EmbedLiveSample('none', '100%', '100px') }} +{{ EmbedLiveSample('使用“none”', '100%', '100px') }} -### 首字母大写 `capitalize`（普通） +### 使用“capitalize”（一般情况） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: capitalize Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: capitalize + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates text capitalization. +这个示例展示了首字母大写的情况。 -{{ EmbedLiveSample('首字母大写 capitalize（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（一般情况）', '100%', '100px') }} -### 首字母大写（标点） +### 使用“capitalize”（标点） ```html -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!
++ 原始文字 + (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? + ?¡transform! +
++ text-transform: capitalize + (this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize? + ?¡transform! +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +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. +这个示例展示了一个词的初始标点是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。 -{{ EmbedLiveSample('首字母大写（标点）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（标点）', '100%', '100px') }} -### 首字母大写（符号） +### 使用“capitalize”（符号） ```html -Initial String ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
text-transform: capitalize ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
++ 原始文字 + ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl +
++ text-transform: capitalize + ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl +
``` ```css span { text-transform: capitalize; } -strong { float: right; } +strong { + float: right; +} +``` + +这个示例展示了初始符号是如何被忽略的。关键字的目标是第一个字母，也就是字母或数字总类中的第一个 Unicode 字符部分。 + +{{ EmbedLiveSample('使用“capitalize”（符号）', '100%', '100px') }} + +### 使用“capitalize”（荷兰语 ij 双字母字符） + +```html ++ 原始文字 + The Dutch word: "ijsland" starts with a digraph. +
++ text-transform: capitalize + The Dutch word: "ijsland" starts with a digraph. +
``` -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* 必须像一个单一的字母一样处理。 -{{ EmbedLiveSample('首字母大写（符号）', '100%', '100px') }} +{{ EmbedLiveSample('使用“capitalize”（荷兰语 ij 双字母字符）', '100%', '100px') }} -### 首字母大写（荷兰 ij 有向图） +### 使用“uppercase”（一般情况） ```html -Initial String The Dutch word: "ijsland" starts with a digraph.
text-transform: capitalize The Dutch word: "ijsland" starts with a digraph.
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: uppercase + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { - text-transform: capitalize; + text-transform: uppercase; +} +strong { + float: right; } -strong { float: right; } ``` -This demonstrates how the Dutch _ij_ digraph must be handled like one single letter. +这个示例展示了如何将文本转换为大写字母。 -{{ EmbedLiveSample('首字母大写（荷兰 ij 有向图）', '100%', '100px') }} +{{ EmbedLiveSample('使用“uppercase”（一般情况）', '100%', '100px') }} -### 大写字母 `uppercase`（普通） +### 使用“uppercase”（希腊语元音） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: uppercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα" +
++ text-transform: uppercase + Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα" +
``` ```css @@ -166,77 +270,162 @@ span { strong { float: right; } ``` -This demonstrates transforming the text to uppercase. +这个示例展示了希腊元音除了不连读的 *eta* 之外，应该没有重音，而元音对中第一个元音的重音变成了第二个元音的重音。 -{{ EmbedLiveSample('大写字母 uppercase（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“uppercase”（希腊语元音）', '100%', '100px') }} -### 大写字母（希腊元音） +### 使用“lowercase”（一般情况） ```html -Initial String Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
text-transform: uppercase Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"
++ 原始文字 + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
++ text-transform: lowercase + Lorem ipsum dolor sit amet, consectetur adipisicing elit… +
``` ```css span { - text-transform: uppercase; + text-transform: lowercase; } -strong { float: right; } +strong { + float: right; +} +``` + +这个示例展示了如何将文本转换为小写字母。 + +{{ EmbedLiveSample('使用“lowercase”（一般情况）', '100%', '100px') }} + +### 使用“lowercase”（希腊语 Σ） + +```html ++ 原始文字 + Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ. +
++ text-transform: lowercase + Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ. +
``` -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. +这个示例展示了希腊字母西格玛（`Σ`）是如何根据上下文转化为普通小写西格玛（`σ`）或词尾变体（`ς`）的。 -{{ EmbedLiveSample('大写字母（希腊元音）', '100%', '100px') }} +{{ EmbedLiveSample('使用“lowercase”（希腊语 Σ）', '100%', '100px') }} -### 小写字母 `lowercase`（普通） +### 使用“lowercase”（立陶宛语） ```html -Initial String Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
text-transform: lowercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
++ 原始文字 + Ĩ is a Lithuanian LETTER as is J́ +
++ text-transform: lowercase + Ĩ is a Lithuanian LETTER as is J́ +
``` ```css span { text-transform: lowercase; } -strong { float: right; } +strong { + float: right; +} ``` -This demonstrates transforming the text to lowercase. +这个示例展示了立陶宛语字母 `Ĩ` 和 `J́` 在转换为小写时保持上方的小点。 -{{ EmbedLiveSample('小写字母 lowercase（普通）', '100%', '100px') }} +{{ EmbedLiveSample('使用“lowercase”（立陶宛语）', '100%', '100px') }} -### 小写字母（希腊语 Σ） +### 使用“full-width”（一般情况） ```html -Initial String Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
text-transform: lowercase Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
++ 原始文字 + 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~ +
++ text-transform: full-width + 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~ +
``` ```css span { - text-transform: lowercase; + text-transform: full-width; +} +strong { + width: 100%; + float: right; } -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. +有些字符有两种格式：正常宽度和全宽度，它们具有不同的 Unicode 编码点。全宽版本可以用来将它们与亚洲的表意文字顺利混合。 -{{ EmbedLiveSample('小写字母（希腊语 Σ）', '100%', '100px') }} +{{ EmbedLiveSample('使用“full-width”（一般情况）', '100%', '175px') }} -### 全宽度 `full-width`（普通） +### 使用“full-width”（日语半角片假名） ```html -Initial String 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
text-transform: full-width 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
++ 原始文字 + ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強 +
++ text-transform: full-width + ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強 +
``` ```css span { text-transform: full-width; } -strong { width: 100%; float: right; } +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. +日文的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的（全宽）片假名字符不同，一个带有 dakuten（声母标记）的字母被表示为两个码点，即字母的主体和 dakuten。在将这些字符转换为全宽时，`full-width` 将它们合并为一个代码点。 -{{ EmbedLiveSample('全宽度 full-width（普通）', '100%', '175px') }} +{{ EmbedLiveSample('使用“full-width”（日语半角片假名）', '100%', '175px') }} + +### 使用“full-size-kana” + +```html +ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ
+ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ
+ +``` + +```css +p:nth-of-type(2) { + text-transform: full-size-kana; +} +``` + +{{ EmbedLiveSample('使用“full-size-kana”', '100%', '175px') }} ## 规范 @@ -245,3 +434,7 @@ Some characters exists in two formats, normal width and a full-width, with diffe ## 浏览器兼容性 {{Compat}} + +## 参见 + +- {{cssxref("font-variant")}} From 99f9a08cfa17bb4d2be12cfc9d38d8980602560b Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Fri, 7 Apr 2023 15:59:32 +0800 Subject: [PATCH 2/4] Apply suggestions from code review --- files/zh-cn/web/css/text-transform/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/text-transform/index.md b/files/zh-cn/web/css/text-transform/index.md index 41ba2d351519a4..594c81f5b00912 100644 --- a/files/zh-cn/web/css/text-transform/index.md +++ b/files/zh-cn/web/css/text-transform/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/text-transform {{CSSRef}} -**text-transform** CSS 属性指定如何将元素的）文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。 +**text-transform** CSS 属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。 {{EmbedInteractiveExample("pages/css/text-transform.html")}} From a743544ce605e21507737ff9690edb8f19976488 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Fri, 7 Apr 2023 16:00:09 +0800 Subject: [PATCH 3/4] Apply suggestions from code review --- files/zh-cn/web/css/text-transform/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/text-transform/index.md b/files/zh-cn/web/css/text-transform/index.md index 594c81f5b00912..4e7cf21dae53ee 100644 --- a/files/zh-cn/web/css/text-transform/index.md +++ b/files/zh-cn/web/css/text-transform/index.md @@ -407,7 +407,7 @@ strong { } ``` -日文的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的（全宽）片假名字符不同，一个带有 dakuten（声母标记）的字母被表示为两个码点，即字母的主体和 dakuten。在将这些字符转换为全宽时，`full-width` 将它们合并为一个代码点。 +日语的半宽片假名被用来在 8 位字符编码中表示片假名。与普通的（全宽）片假名字符不同，一个带有 dakuten（声母标记）的字母被表示为两个码点，即字母的主体和 dakuten。在将这些字符转换为全宽时，`full-width` 将它们合并为一个代码点。 {{ EmbedLiveSample('使用“full-width”（日语半角片假名）', '100%', '175px') }} From cdf358214c61154f167d3abe7b61d26898ee1f0f Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Fri, 7 Apr 2023 16:01:36 +0800 Subject: [PATCH 4/4] Apply suggestions from code review --- files/zh-cn/web/css/text-transform/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/text-transform/index.md b/files/zh-cn/web/css/text-transform/index.md index 4e7cf21dae53ee..a5ac606ab13060 100644 --- a/files/zh-cn/web/css/text-transform/index.md +++ b/files/zh-cn/web/css/text-transform/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/text-transform - 在荷兰语中（`nl`），`ij` 双字母变为 `IJ`，即使设置了 `text-transform: capitalize`，该属性只大写单词的第一个字母。 - 在希腊语中（`el`），当整个单词是大写的时候，元音会失去重音（`ά`/`Α`），除了不连贯的 eta（`ή`/`Ή`）。另外，在第一个元音上有重音的双元音会失去重音，在第二个元音上获得重音（`άι`/`ΑΪ`）。 - 在希腊语中（`el`），小写的西格玛字符有两种形式：`σ` 和 `ς`。`ς` 只在西格玛结束一个词的时候使用。当对大写西格玛（`Σ`）应用 `text-transform: lowercase` 时，浏览器需要根据上下文选择正确的小写形式。 -- 在爱尔兰语中（`ga'），某些前缀字母在基本首字母大写时仍为小写，因此，例如 `text-transform: uppercase` 会将 `ar aon tslí` 变为 `AR AON tSLÍ`，而不是像人们所期望的那样，变为 `AR AON TSLÍ`（仅在 Firefox）。在某些情况下，大写字母也会被删除：`an t-uisce` 转换为 `AN tUISCE`（并且连字符被 `text-transform: lowercase` 正确地重新插入）。 +- 在爱尔兰语中（`ga`），某些前缀字母在基本首字母大写时仍为小写，因此，例如 `text-transform: uppercase` 会将 `ar aon tslí` 变为 `AR AON tSLÍ`，而不是像人们所期望的那样，变为 `AR AON TSLÍ`（仅在 Firefox）。在某些情况下，大写字母也会被删除：`an t-uisce` 转换为 `AN tUISCE`（并且连字符被 `text-transform: lowercase` 正确地重新插入）。 语言由 HTML [`lang`](/zh-CN/docs/Web/HTML/Global_attributes/lang) 属性或 XML [`xml:lang`](/zh-CN/docs/Web/SVG/Attribute/xml:lang) 属性定义。