基础教程：Hype 4排印面板之文本间距

本章节作为Hype 4交互动效制作软件排印面板的最后一个章节，将讲述文本间距内容，尤其是行高度，小编将深入探讨单行文字实现上下左右居中的原理。

在Hype中文本间距有三个属性：字母间距、字间距和行高度。

一、字母间距

对英文来说，是调整每个字母之间的距离；对中文来说，是调整每个字之间的距离。

图1：字母间距

二、字间距

字间距只对英文有效，中文是没有字间距的。它代表的是每个英文单词之间的距离。特别注意的是：如果中文使用了英文的标点符号，调整字间距，对文字排版是有影响的。

图2：字间距

三、行高度

对段落文本而言，就是每一行文字的高度。在应用上分两种情况：单行文字和多行文字段落。

1、单行文字的行高度

单行文字的行高度就是该文本元素的高度（没有边框和上下补白的文本元素）。增加行高度，文本元素的高度也同时增加。

图3显示了行高度的形成过程：设定字体大小为36px，文本元素边框宽度为0，补白为0，行高度也是36px。当行高度增加1px变为37px，元素上边向上移动了1px。行高度再增加1px变为38px，元素下边向下移动了1px。以此类推，不管行高度如何变化，该行文字保持上下居中。

图3：行高度的形成过程

大多数情况，行高度是不等于元素高度的。元素高度的组成是：行高度 + 上边补白 + 下边补白 + 边框宽度 * 2。

2、多行文字的行高度

根据上述行高度的形成以及文本元素高度的组成，这里提供了单行文字上下居中的解决方案：在文本元素高度大于文字大小的情况下，只要：行高度 = 元素高度 – 上下边补白 - 边框宽度 * 2，该行文字必然上下居中。

图4：单行文字上下居中

多行文字的行高度是对整个文本元素而言的，不能单独设置该文本元素某一行的行高度。行高度改变了，每行文字的距离也改变了，但文本元素的高度没有改变。

图5：元素高度不因行高度的改变而改变

当文本元素的高度大于多行文字内容的高度时，那么如何使文字内容在文本元素内上下居中呢？

首先是文本元素的上下补白设置为0，计算文字内容的行数乘以行高度，作为文本元素的高度。然后增加文本元素上下的补白值（两个值要相等），直至文本元素的高度符合要求的高度。这样文字内容在文本元素内上下居中。

图6：多行文字内容在元素内上下居中

四、总结

截止到本章，排印面板的内容就全部讲完了。排印面板的内容相对比较简单，但有一些技巧是必须掌握的，如：添加字体、拷贝粘贴网上文字以及单行文字上下左右居中等。

下一章节开始，将讲述身份面板内容，其中会讲到一些HTML5语言，敬请期待。