【翻译】行高的相关计算

原文链接:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height

译者序:

翻译该段文档,是因为自己在写相应的样式时遇到了疑惑,于是找文档看说明,发现很多地方和自己以前的理解还是有很大的差异,阅读后收获颇丰,而且网上目前的中文参考资料中似乎也找不到原滋原味的定义。于是决定自己翻译一下,也算是对自己的锻炼吧。第一次翻译,错误和不足的地方欢迎大家指正。

ps:没想到短短的一段文档翻译居然用了两三周时间才完成。文章仅为翻译,对知识点的整理和总结等以后有时间再考虑吧。

阅读该文档时需注意每个用词,不同用词有不同含义,相似的用词往往指代的是不同的对象。一定要弄清楚文档描述说明的对象是什么。文档中“box”统一翻译成了“盒子”,“elements”统一翻译成了“元素”。

行高的计算(Line height calculations: the 'line-height' and 'vertical-align' properties)

正如在章节「行级格式化上下文(inline formatting contexts)」中的描述,用户代理将行内级盒子(inline-level boxes)布局到一个由行盒(line boxes)垂直排列而成的容器里。单个行盒的高度按下列规则进行判定:

  1. 行盒中每个行级盒的高度都将通过计算获得。对于替换元素(replaced elements),行级块元素(inline-block elements)和行级表单元素(inline-table elements),其高度为他们外边框(margin box)的高度;对于行内盒(inline boxes),其高度为他们的line-height
  2. 行级盒在垂直方向上依照他们的vertical-align属性进行对齐。当他们按top或者bottom的值进行对齐时,必须保证其排列方式能使行盒的高度尽可能的小。如果行级盒过高,对于行盒的基线(baseline)的定位,有多种方案,但css 2.1 规范并未对此进行定义。
  3. 行盒的高度为他内部所有盒子中,最高的盒子的顶部和最低的盒子的底部之间的距离。(其计算包含‘strut’——将在‘line-height’章节之下进行说明)

空的行内元素生成空的行内盒,但这些盒子依然拥有外边距,内边距,边框和行高,因此产生的影响则是其高度的计算和非空元素的一样。

行距和半行距(Leading and half-leading)

css假定每种字体都能够通过指定在其基线上的一个特定高度和在其基线下的一个特定深度来对其进行度量。在此假定下,我们用A表示这个高度,用D表示这个深度。我们同时定义AD=A+D,及顶边到底边的距离。注意,该方法是在将字体作为一个整体进行度量时使用,而无需在意个别字形实际的上边缘和下边缘。

用户代理必须在一个非替换行内盒(non-replaced inline box)中根据每个字形的基线进行对齐。对每个字形,分别计算其A和D。注意,每个字形都是单独的元素,可能由不同的字体组成,因此也不必拥有相同的A和D。如果行内盒不包含任何字形,他将包含一个‘strut’(一个零宽的无形的字形),其A和D为元素第一个有效字体的A和D。

我们还需要确定添加到每个字形上的行距L,L=line-height-AD。行距的一半被添加到A上面,另一半被添加到D下面。最终我们得到基线之上A'=A+L/2和基线之下D'=D+L/2所确定的字形和他的行距的一个总高度。

提示:L可能是负数

行内盒通过包裹所有字形和字形上下两边的半行距(half-leading)所形成的高度就是line-height。子元素的盒子(boxes)对此高度不产生影响。

然而非替换元素的外边距,边框,内边距不参与行盒的计算。他们将被渲染到行内盒周围。这就是说,line-height指定的高度可能小于contained boxes的内容高度,内边距和边框的背景和高度可能溢出到相邻的行盒内。用户代理应该按文档顺序渲染盒子。这将会使后一行的边框副高到前一行的边框和文字之上。

提示:CSS 2.1 没有定义行内盒的内容区域是什么,所以不同的UA可能以不同的方式绘制背景和边框

‘line-height’

(译注:具体参数说明见链接)

对于内容由行内级元素组成的块级包含元素(block container element),line-height指定了包含子元素的行盒的最小高度。如果每个行盒正好由一个零宽度的拥有元素的字体和行高的行内盒开始,则行盒的最小高度由基线以上的最小高度和基线以下的最小深度组成。我们称这个假想的盒子为“strut”。

字体基线上下的高度和深度的度量方式假定已包含在字体中。

对于非替换行内元素,line-height指定的高度被用于行盒高度的计算。

(译注:这段参数取值的说明的翻译省略)

当元素包含的文本被渲染成多种字体的时候,用户代理可以根据最大的字体尺寸来决定normal值。

提示:当在块级包含盒子中的所有行内盒(不包括替换元素,行级块元素等)的line-height取值相同且都拥有相同的字体时,连续的基线应该被打散,因为这对于在列方向上有不同字体但又必须进行对齐时,是非常重要的。例如在表格中。(译注:后半段理解不是太清楚,按猜测意译的。)

‘vertical-align’

(译注:具体参数说明见链接)

该属性影响一个由行内级元素产生的盒子在行盒内垂直方向上的定位。

提示:该属性在表格上下文中具有不同的含义,具体内容参见「table height algorithms」章节

以下取值仅在其参照对象为“行内元素的父元素”或“块级包含元素的父元素的 strut”时有意义。

在下列的定义中,对于行内级非替换元素,用于对齐的盒子为高度是line-height(包括盒子的字形和上下两边的半行距,见上文)的盒子。对于其他元素,用于对齐的盒子为其外边框。

baseline

使盒子的基线和父元素的基线在一条线上。如果盒子没有基线,这使其外边框的底边和父元素的基线在一条线上。

middle

使盒子的中线和父元素的基线加上x字符高度的一半对齐。

(译注:sub、super、text-top、text-bottom、<percentage>、<length>的取值说明翻译省略,可自行搜索相关含义)

以下取值使元素相对于行盒进行对齐。因为元素可能有已经参照其对齐的子元素,所以这些取值使用已对齐子树的边界来对其。行内级元素的已对齐子树(aligned subtree)包括这个元素和他所有的计算出的vertical-align的取值不为topbottom的行内级子元素的已对齐子树。已对齐子树的顶部为子树中顶边最高的盒子的顶部,底部同理。

top

使已对齐子树的顶部和行盒的顶部对齐

bottom

使已对齐子树的顶部和行盒的底部对齐

inline-table的基线为表格第一行的基线。

inline-block的子元素中没有在文档流中的行盒或者inline-blockoverflow属性的计算值不为visible时,其基线为外边距的底边。否则inline-block的基线为其文档流中最后一个行盒的基线。

posted @ 2013-09-10 20:11  snadn  阅读(926)  评论(1编辑  收藏  举报