Unity TextMeshPro 文本对齐方式详解

Unity TextMeshPro 文本对齐方式详解

概述

你是否还在对TMP的对齐方式 傻傻分不清？ 有人说那还不简单，就上下左右，居中对齐这些方式嘛。是的，没错，基础的对齐方式确实是这些。

那下面这些你是否都清楚明白了呢？

Justified、Flush、Geometry Center、Baseline、Midline、Capline。

话不多说，我们往下看！！！

Justified、Flush、Geometry Center。这三个选项都属于TextMeshPro的高级对齐设置，主要控制文本在水平方向上的分布和对齐方式。

---

1. Justified（两端对齐）

定义

• 文本左右两端都对齐，通过调整单词间距实现
• 类似报纸、杂志的排版效果

视觉表现

|这 是  一 段  两端 对齐 的 文本|
|第二行文本 也 会 两端 对齐 显示|
|最 后 一 行 通 常 左 对 齐|

特点

• 非最后一行：左右两边完全对齐
• 最后一行：保持左对齐（标准排版规则）
• 通过增加单词间距来填充整行宽度
• 创建整洁的文本块

代码设置

textComponent.horizontalAlignment = HorizontalAlignmentOptions.Justified;

---

2. Flush（边缘对齐）

定义

• Justified的变体，但对最后一行处理不同
• 所有行（包括最后一行）都尝试进行两端对齐

视觉表现

|这 是  一 段  边缘 对齐 的 文本|
|第二 行 文本 也 会 边缘 对齐 显|
|示   最   后   一   行    也|

特点

• 包括最后一行：也会被拉伸以填满整行宽度
• 可能造成最后一行单词间距过大
• 适用于需要严格对齐的场合

与Justified的区别

// Justified: 最后一行左对齐
// Flush: 最后一行也强制两端对齐

---

3. Geometry Center（几何中心对齐）

定义

• Geometry Center 是一个特殊的对齐选项
• 它基于文本的几何边界框进行精确的中心对齐
• 与普通Center对齐有重要区别

与普通Center的区别

普通Center对齐

textComponent.horizontalAlignment = HorizontalAlignmentOptions.Center;

• 基于文本的布局边界（layout bounds）进行居中
• 考虑字符的advance（前进宽度）和字间距
• 是传统的文本居中方式

Geometry Center对齐

textComponent.horizontalAlignment = HorizontalAlignmentOptions.GeometryCenter;

• 基于文本的实际几何形状进行精确居中
• 计算所有可见字符的精确边界框
• 考虑字符的实际形状和轮廓

实际差异示例

假设有以下文本：

" A V "

普通Center对齐效果：

|   A V   |  ← 基于字符布局位置居中

Geometry Center对齐效果：

|  A V  |   ← 基于字符实际几何形状居中

为什么会有差异？

1. 字符形状不对称

   • 字符"A"左边有较多空白，右边较窄
   • 字符"V"左右形状不对称
   • Geometry Center会补偿这种不对称性

2. 边界框计算方式不同

   • 普通Center：使用字符的布局边界（包括两边的空白）
   • Geometry Center：使用字符的实际可见几何边界

代码演示

public class GeometryCenterExample : MonoBehaviour
{
    public TextMeshProUGUI centerText;
    public TextMeshProUGUI geometryCenterText;
    
    void Start()
    {
        // 测试不对称字符
        string testText = "A V A W A";
        
        // 普通居中
        centerText.horizontalAlignment = HorizontalAlignmentOptions.Center;
        centerText.text = testText;
        
        // 几何中心对齐
        geometryCenterText.horizontalAlignment = HorizontalAlignmentOptions.GeometryCenter;
        geometryCenterText.text = testText;
        
        // 添加边框以便观察差异
        centerText.text = $"<color=red>[{testText}]</color>";
        geometryCenterText.text = $"<color=blue>[{testText}]</color>";
    }
}

视觉对比

普通Center:
|       [A V A W A]       |  ← 基于布局边界

Geometry Center:
|     [A V A W A]         |  ← 基于几何形状

适用场景

使用Geometry Center的情况：

• 需要精确视觉居中的文本
• 艺术字体或特殊字符排版
• 不对称字符的文本（如"A", "V", "W"等）
• UI元素需要像素级精确对齐时

使用普通Center的情况：

• 常规文本排版
• 性能考虑（Geometry Center计算量稍大）
• 对称字符的简单文本

性能考虑

• Geometry Center 比普通 Center 计算量稍大
• 对于大量动态文本，可能影响性能
• 静态文本或短文本可以安全使用

使用建议

1. Center：标题、按钮文字、需要视觉平衡的短文本
2. Justified：长段落文本、文章内容、需要专业排版的文字
3. Flush：需要严格对齐的表格数据、特殊排版需求
4. Geometry：高精度排版、多语言混合、艺术字体处理

接着我们来看 Baseline、Midline、Capline 的具体区别吧！

4. Baseline（基线）

定义

• 基线是绝大多数字母"坐"在上面的虚拟参考线
• 是文本排版中最基本的对齐基准

特征

  TextMeshPro
      ↑
      |  (上升部分)
------基线------  ← 字母底部对齐线
      |

• 小写字母如"a、c、e"的底部紧贴基线
• 只有下伸部分（如g、j、p、q、y的尾部）会延伸到基线下方

应用场景

// 设置基线对齐
textComponent.verticalAlignment = VerticalAlignmentOptions.Baseline;

• 多行文本的默认对齐方式
• 确保不同字体大小的文本底部对齐

5. Midline（中线）

定义

• 中线位于基线和Capline中间的位置
• 大致对应小写字母的x高度（x-height）中心

特征

      Capline
        ↑
------中线------  ← 小写字母高度中心
        |
------基线------

• 不是精确的数学中点，而是基于字体度量
• 反映小写字母的主体高度中心

应用场景

// 设置中线对齐
textComponent.verticalAlignment = VerticalAlignmentOptions.Middle;

• 实现文本的垂直居中显示
• 让文本在容器中视觉上居中

6. Capline（大写线）

定义

• Capline是大写字母顶部所在的虚拟线
• 也称作"大写高度线"

特征

------Capline------  ← 大写字母顶部
        ↑
      (小写字母上升部分)
------中线------
------基线------

• 确定大写字母如"A、B、C"的顶部位置
• 小写字母的上升部分（如b、d、f、h、k、l）可能接近或达到Capline

实际对比示例

public class TextAlignmentExample : MonoBehaviour
{
    public TextMeshProUGUI text1; // Baseline对齐
    public TextMeshProUGUI text2; // Midline对齐  
    public TextMeshProUGUI text3; // Capline对齐
    
    void Start()
    {
        string sampleText = "Hello\ngjpqy";
        
        // 基线对齐 - 底部对齐
        text1.verticalAlignment = VerticalAlignmentOptions.Baseline;
        text1.text = $"Baseline:\n{sampleText}";
        
        // 中线对齐 - 垂直居中
        text2.verticalAlignment = VerticalAlignmentOptions.Middle;
        text2.text = $"Midline:\n{sampleText}";
        
        // 大写线对齐 - 顶部对齐
        text3.verticalAlignment = VerticalAlignmentOptions.Top;
        text3.text = $"Capline:\n{sampleText}";
    }
}

视觉对齐效果

Capline对齐:   HELLO    [大写字母顶部对齐]
              hello
              gjpqy
              
Midline对齐:   HELLO    [小写字母中心对齐]
              hello
              gjpqy
              
Baseline对齐:  HELLO    [字母底部对齐]
              hello  
              gjpqy

实用建议

1. Baseline对齐：最常用的多行文本对齐方式
2. Midline对齐：用于按钮文本、标题等需要居中的情况
3. Capline对齐：需要大写字母顶部对齐的特殊设计

我们对于理解这三个基准线对于精确控制文本排版非常重要，特别是在需要精细调整UI布局时。

相信看完上面的内容，应该对文本的对齐各种方式都有所了解了吧！高手请绕道哦~