iOS 排版概念

字符和標志符號(character和glyph)

字符是書面語言中帶有意義的最小的單位,它可以對應語言中可讀形式的一個讀音,就像羅馬字母表中的字母;也可以代表一個完整的詞,比如中國的(象形)漢字;它們也可以代表某種特定的概念,比如數學符號。在這些情況中,字符都是一個抽象的概念。

雖然字符可以由一塊顯示區域中的某個可識別的形狀所表示,但表示同一個字符的形狀可能有很多,而且它們各自之間并不相同。比如對于大寫字母A,則根據筆劃的粗細,字符書寫的是傾斜還是豎直,所呈現的形狀都會不一樣。同時還有有襯線(筆劃始終處 在大致垂直于筆劃方向添加的一條小短線)和無襯線之分,字符這些形狀中任何一個形狀即稱為一個標志符號即glyph。

字符A的glyphs

字符與glyph之間并沒有一對一的關系,也就是說一個字符有時可能需要多個glyph來表示,而一個glyph有時也可以代表多個字符,比如é可能是由"e"和重讀glyph"′"結合起來表示的。而一個glyph表示多個字母的情況則是連體字母,即特定的字母先后出現時所顯示的glyph

連體字母出現時字符與glyph的對應關系

眾所周知,計算機存儲字符的形式是將每個字符對應字符編碼表中的某個編碼,iOS和OS X中的編碼規則是遵守Unicode規則的。Unicode編碼規則將全世界所有語言中的字符都定義在其中,這個規則是獨立于平臺,程序和編程語言的。并解決了一個長期以來困擾計算機界的問題,那就是數百種不同計算機系統中都使用著自身設計的不一樣的字符編碼系統,而這些編碼系統之間,同一個編碼代表的可能是各不一樣的字符。

同時更為關鍵的是Unicode同時還規定了處理雙向的文本和(字符)前后關系的形式,組成字和換行的方法,排布不同語言文本的方法,怎樣對不同的語言格式化數字,日期,時間等數據。

glyph也是由稱為glyph code的數字化代碼所表示的,用來描述字符的glyph是由layout manger在組合和layout過程中選擇的。layout manager決定用哪個glyph及在顯示區域的哪些位置放置這些glyphs。layout manager會緩存glyph code并提供方法來做字符和glyph之間的轉換及字符坐標與view坐標之間的轉換。

字體:typeface和font

a typeface是可寫語言中部分或所有字符所具有的一組視覺上相關的形狀。比如Times即是一種typeface,它的所有字母在外觀上都可以看出是相關的,即所有字母在字母主干(豎直的比劃)和counter(字母body中的圓形轉角)及其他部分的比例都是一致的。這樣在顯示一大塊文本的時候,同一種typeface的字符形狀可以一起增加可讀性。

a typestyle或者簡單地說style,是特定typeface的一種區分于其他typeface的視覺特征。比如羅馬typestyle有這樣的特征:大寫字母有襯線,字母主干筆劃比水平要粗。在斜體的typestyle中字母向右傾斜,更圓潤看起來更像草書或者手寫的字母。一種typeface通常有多種相關的typestyle。

a font是一系列的glyphs分別代表一種size, typeface和typestyle的組合。fonts包含所有上下文關聯的形式的glyph,比如連體字符,也包括正常的字符形式。

font family代表同一typeface的多種font,各font有不同的typestyle。

styles也稱為traits,特性的變化有粗體,斜體,濃縮,擴展,窄,small caps,海報字體和fixed pitch。文本系統包含稱為字體描述符的對象,這個對象提供字體匹配功能,比如可以簡單地通過創建一個font描述符描述一種字符,比如可以通過font family名和weight,就可以找到系統中匹配對應trait的所有字體。

text layout

text layout是在顯示設備上排布glyph的過程,顯示設備中這塊叫做text view的區域,它代表的是類似于傳統排版中稱為page的一塊區域。glyph互相布局的順序叫做text direction。在英語及源于拉丁語的語言中,glyph是由字符一個挨一個組成單詞,再由一個個空格將單詞隔開的。words是從text view的左上部分從左向右開始排列直到到達view的右邊界,隨后便在前一行的下一行用同樣的方式繼續排列直到到達view的底部。

在其他語言中,glyph的排布會不一樣,比如有的語言是從右向左排的,甚至有的是豎直排布而不是水平排布的。在技術文檔中,很常見的情況是在同一行中會混合不同glyph排布方向的語言,有些文本系統甚至會隔行即變換文本排布方向。有些語言并不通過空格分隔由glyph組合成的字,甚至有的app需要進行任意的glyph排布,比如在某個場景,layout需要glyph按非線性的路徑進行排列。

從一串glyphs中創建文本行的過程中,layout 引擎必須打到一個斷行的點以結束一行并開啟另一行。文本系統中,可以指定任意的字或者glyph邊界作為斷行的點,在羅馬文本中,如果在字中間斷行需要在斷行點處插入一個連字符glyph。

layout manager在layout glyph的時候是沿著一條不可見的稱為baseline的線進行排列的。在羅馬文本中,baseline是水平的,大部分glyph的底部邊緣都位于這條線上。有些glyph會延伸到baseline之下,比如"g"這樣有下行或者叫尾巴的字母,以及大的圓形的字符比如"O"這樣為了顯示效果需要往baseline下面移一點。其他writing system會將glyph放置在baseline之下或者中心位于baseline上。每個glyph都有一個用于layout manager用來與baseline對齊的origin點。

glyph設計者為每種font都提供了稱為metrics的一組數據,描述字體中每個glyph周圍的空間。layout manager使用這些metrics信息來決定glyph的位置。在水平文本中,glyph有一個metrics叫做advance width,它表示的是沿著baseline的方向,其相對于后面的glyph的origin點的空白空間。通常在origin點與glyph之間也是有一定的空白空間的,這段距離的metrics叫做left-side bearing。而定義advance width的這個點與glyph之間的空白空間的metrics(如果有的話)叫做right-side bearing。origin點(在baseline上)與glyph在baseline上的最高點之間的豎直距離metrics叫做ascent,到glyph在baseline之下最低點的距離metrics叫做descent。包裹glyph可見部分的矩形區域叫做bounding rectangle或者bounding box。

glyph metrics描述

水平文本默認情況下排列glyph的時候都會放置對應的advance width,而在有些結合中,會通過使用kerning來使文本更可讀,kerning即是使glyph之間的空間更緊密或者更松弛。最常見的kerning的例子即發生在大寫的W和A之間的,如下圖所示。font中是有設計都提供的kerning metrics信息的,文本系統提供了方法可以選擇關閉kerning或者讓kerning在選中的文本中更松弛或者更緊密。

kerning

排版系統通常使用稱為點的單位來衡量font metrics,在大多數計算機排版系統中,通常是72點每英寸。通過將ascent和descent加起來即可以算出字體的point size。

排版過程中在每行之間添加的空間叫做leading,而font的行高則定義為ascent加descent加leading(leading有時也稱為linegap,通常某段文本所設定的 font point size和line height使用一個比率來表示,比如14/16.5)

雖然從前的排版概念可能難懂一些,但大部分使用過計算機文檔或者打字機的讀者應該對頁面的文本布局概念比較熟悉。比如margin指頁面邊界與文本區域之間的空白,alignment描述文本行相對于margin排列的方式,比如水平文本可以左,右或者居中對齊。

文本行也可以justified,對于需要左右對齊的水平文本行,會改變字間及glyph間的空間以在左右分別對齊。如下圖所示,如果在被請求之后,系統會進行justification和alignment,即在文本流已經斷成行并添加了連字符之后進行。

justified
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容