翻譯 行高的相關計算

2022-02-18 04:20:56 字數 2784 閱讀 5970

譯者序:

閱讀該文件時需注意每個用詞,不同用詞有不同含義,相似的用詞往往指代的是不同的物件。一定要弄清楚文件描述說明的物件是什麼。文件中「box」統一翻譯成了「盒子」,「elements」統一翻譯成了「元素」。

正如在章節「行級格式化上下文(inline formatting contexts)」中的描述,使用者**將行內級盒子(inline-level boxes)布局到乙個由行盒(line boxes)垂直排列而成的容器裡。單個行盒的高度按下列規則進行判定:

行盒中每個行級盒的高度都將通過計算獲得。對於替換元素(replaced elements),行級塊元素(inline-block elements)和行級表單元素(inline-table elements),其高度為他們外邊框(margin box)的高度;對於行內盒(inline boxes),其高度為他們的line-height

行級盒在垂直方向上依照他們的vertical-align屬性進行對齊。當他們按top或者bottom的值進行對齊時,必須保證其排列方式能使行盒的高度盡可能的小。如果行級盒過高,對於行盒的基線(baseline)的定位,有多種方案,但css 2.1 規範並未對此進行定義。

行盒的高度為他內部所有盒子中,最高的盒子的頂部和最低的盒子的底部之間的距離。(其計算包含『strut』——將在『line-height』章節之下進行說明)

空的行內元素生成空的行內盒,但這些盒子依然擁有外邊距,內邊距,邊框和行高,因此產生的影響則是其高度的計算和非空元素的一樣。

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所確定的字形和他的行距的乙個總高度。

行內盒通過包裹所有字形和字形上下兩邊的半行距(half-leading)所形成的高度就是line-height。子元素的盒子(boxes)對此高度不產生影響。

然而非替換元素的外邊距,邊框,內邊距不參與行盒的計算。他們將被渲染到行內盒周圍。這就是說,line-height指定的高度可能小於contained boxes的內容高度,內邊距和邊框的背景和高度可能溢位到相鄰的行盒內。使用者**應該按文件順序渲染盒子。這將會使後一行的邊框副高到前一行的邊框和文字之上。

對於內容由行內級元素組成的塊級包含元素(block container element),line-height指定了包含子元素的行盒的最小高度。如果每個行盒正好由乙個零寬度的擁有元素的字型和行高的行內盒開始,則行盒的最小高度由基線以上的最小高度和基線以下的最小深度組成。我們稱這個假想的盒子為「strut」。

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

對於非替換行內元素,line-height指定的高度被用於行盒高度的計算。

(譯註:這段引數取值的說明的翻譯省略)

當元素包含的文字被渲染成多種字型的時候,使用者**可以根據最大的字型尺寸來決定normal值。

該屬性影響乙個由行內級元素產生的盒子在行盒內垂直方向上的定位。

以下取值僅在其參照物件為「行內元素的父元素」或「塊級包含元素的父元素的 strut」時有意義。

在下列的定義中,對於行內級非替換元素,用於對齊的盒子為高度是line-height(包括盒子的字形和上下兩邊的半行距,見上文)的盒子。對於其他元素,用於對齊的盒子為其外邊框。

baseline

使盒子的基線和父元素的基線在一條線上。如果盒子沒有基線,這使其外邊框的底邊和父元素的基線在一條線上。

middle

使盒子的中線和父元素的基線加上x字元高度的一半對齊。

以下取值使元素相對於行盒進行對齊。因為元素可能有已經參照其對齊的子元素,所以這些取值使用已對齊子樹的邊界來對其。行內級元素的已對齊子樹(aligned subtree)包括這個元素和他所有的計算出的vertical-align的取值不為topbottom的行內級子元素的已對齊子樹。已對齊子樹的頂部為子樹中頂邊最高的盒子的頂部,底部同理。

top

使已對齊子樹的頂部和行盒的頂部對齊

bottom

使已對齊子樹的頂部和行盒的底部對齊

inline-table的基線為**第一行的基線。

inline-block的子元素中沒有在文件流中的行盒或者inline-blockoverflow屬性的計算值不為visible時,其基線為外邊距的底邊。否則inline-block的基線為其文件流中最後乙個行盒的基線。

ios tableView的行高計算

如果我們設定了預估的行高也就是 tableview.estimatedrowheight 200以及實現了計算行高的方法 cgfloat tableview uitableview tableview heightforrowatindexpath nsindexpath indexpath 這樣的...

ios tableView自動計算行高

最近通過學習了解到乙個東西就是tableview可以自動的計算行高了,只需要配合autolayout來使用就可以了 先設定如下所示的 先設定預估行高 tableview.estimatedrowheight 200 再設定自動計算行高 tableview.rowheight uitableviewa...

tableView計算動態行高的總結

研究tableview怎麼計算動態行高研究了兩天一直還不太會,今天最終做出來了想要的效果。首先。我在網上蒐集了非常多資料,各種大神的總結,然後開始看 研究 試驗,基本思路都是一樣的。1.一定要將label的numberofline設為0 2.獲得文字資訊所須要的size 3.將label的heigh...