编辑“︁CSS文本转换”︁

= CSS文本转换 =

'''CSS文本转换'''（Text Transformation）是CSS中用于控制文本大小写的属性，它允许开发者在不修改原始文本内容的情况下，改变其显示形式。该功能常用于规范化用户输入显示、创建标题样式或满足特定排版需求。

== 属性语法 ==
<code>text-transform</code>属性的基础语法如下：
<syntaxhighlight lang="css">
selector {
    text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana;
}
</syntaxhighlight>

== 属性值详解 ==
{| class="wikitable"
! 值 !! 描述 !! 示例输入 → 输出
|-
| <code>none</code> || 默认值，保留原始文本大小写 || <code>Hello World</code> → <code>Hello World</code>
|-
| <code>capitalize</code> || 每个单词的首字母大写 || <code>hello world</code> → <code>Hello World</code>
|-
| <code>uppercase</code> || 所有字母转为大写 || <code>Hello World</code> → <code>HELLO WORLD</code>
|-
| <code>lowercase</code> || 所有字母转为小写 || <code>Hello World</code> → <code>hello world</code>
|-
| <code>full-width</code> || 将字符转换为全角形式（主要用于东亚文字） || <code>ABC</code> → <code>ＡＢＣ</code>
|-
| <code>full-size-kana</code> || 将日文假名转换为全角形式 || <code>ｱｲｳ</code> → <code>アイウ</code>
|}

== 实际应用示例 ==

=== 基础示例 ===
<syntaxhighlight lang="html">
<p class="title">welcome to css text transformation</p>
<style>
.title {
    text-transform: capitalize; /* 显示为 "Welcome To Css Text Transformation" */
}
</style>
</syntaxhighlight>

=== 表单输入规范化 ===
当需要统一用户输入显示时（如用户名展示）：
<syntaxhighlight lang="html">
<input type="text" placeholder="Enter your name">
<style>
input {
    text-transform: lowercase; /* 输入 "JOHN DOE" 自动显示为 "john doe" */
}
</style>
</syntaxhighlight>

=== 多语言支持 ===
处理混合语言文本时的效果对比：
<syntaxhighlight lang="html">
<p class="mixed">Привет Hello 你好</p>
<style>
.mixed {
    text-transform: uppercase; /* 显示为 "ПРИВЕТ HELLO 你好" */
}
</style>
</syntaxhighlight>

== 技术细节 ==
* '''词边界定义'''：<code>capitalize</code>根据Unicode标准识别单词边界，连字符后的字母也会被大写（如"co-ordinated" → "Co-Ordinated"）
* '''继承性'''：该属性可被子元素继承
* '''字体支持'''：某些字体可能没有对应的大写/小写字形，浏览器会尝试模拟效果
* '''性能影响'''：频繁动态修改可能触发重排（reflow）

== 与其他属性的交互 ==
<mermaid>
graph LR
    A[text-transform] --> B[font-variant]
    A --> C[::first-letter]
    A --> D[text-rendering]
</mermaid>

* 与<code>font-variant: small-caps</code>组合时，会先应用文本转换再应用小型大写字母效果
* <code>::first-letter</code>伪元素会基于转换后的文本选择首字母

== 数学表示 ==
对于字符串转换过程，可以表示为函数：
<math>
T(s, mode) = \begin{cases}
    s & \text{if } mode = none \\
    \bigcup_{w \in words(s)} capitalize(w) & \text{if } mode = capitalize \\
    toUpper(s) & \text{if } mode = uppercase \\
    toLower(s) & \text{if } mode = lowercase 
\end{cases}
</math>
其中<math>words(s)</math>表示按Unicode标准分割单词。

== 浏览器兼容性 ==
所有现代浏览器完全支持<code>none</code>/<code>capitalize</code>/<code>uppercase</code>/<code>lowercase</code>值，<code>full-width</code>和<code>full-size-kana</code>的兼容性如下：
* Chrome 85+
* Firefox 80+
* Safari 14+

== 最佳实践建议 ==
1. 避免在用户可编辑内容上强制转换，可能干扰输入体验
2. 对于动态内容，优先在服务器端处理文本转换
3. 使用<code>text-transform: uppercase</code>替代全大写文本输入，保持HTML语义化
4. 结合<code>letter-spacing</code>改善全大写文本的可读性

== 常见问题 ==
'''Q: 为什么<code>capitalize</code>对数字和符号后的字母无效？'''
A: 这是符合CSS规范的行为，只有Unicode定义的"字母"字符会被转换。

'''Q: 如何实现首字母大写其余小写？'''
<syntaxhighlight lang="css">
p {
    text-transform: lowercase;
}
p::first-letter {
    text-transform: uppercase;
}
</syntaxhighlight>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]