這才是設(shè)計：Medium如何雕琢下劃線

這才叫設(shè)計：看Medium如何精雕細(xì)琢下劃線

本文作者M(jìn)arcin Wichary是Medium設(shè)計師，前Google用戶體驗設(shè)計師。

對于計算機(jī)來說，在屏幕上畫一條水平線似乎再容易不過了，但是，簡單的事情卻往往內(nèi)藏玄機(jī)，排版工藝就是個精細(xì)活兒，原本只需花一晚上就能優(yōu)化的Medium下劃線外觀最終足足用了一個月的時間。

回顧歷史

為了強(qiáng)調(diào)某個詞語，過去常采用斜體或粗體的形式，而下劃線則顯得有些土鱉，但它的易用性讓其得以頻繁使用。

在 20 世紀(jì)的打字機(jī)時代，刻板的等寬字體與單色打字機(jī)色帶讓下劃線成為了唯一理想的文字強(qiáng)調(diào)方式：先退格，再在同樣的地方打出下劃線。

然后互聯(lián)網(wǎng)來了，下劃線搭配藍(lán)色字體成為了可點擊鏈接的標(biāo)志，也許這種方式會慢慢消失——前不久Google就清除了所有超鏈接下的下劃線——但我堅信至完全消失還需要一段時間。

不幸的是，在這幾年的網(wǎng)頁排版技術(shù)發(fā)展中——更好的 CSS 屬性、對國際化更多的支持、自定義字體——下劃線還是原來老樣子，只有極小的可定制性。

開始工作

在某個周二的早晨，我醒來后發(fā)現(xiàn) Chrome 下的 Medium 鏈接是這樣的：

丑陋至極！無法忍受！再看看其它瀏覽器，雖然好一些，但都差強(qiáng)人意：

我在加入 Medium 后不久，便開始羅列出網(wǎng)頁排版中可改進(jìn)的地方，那天 Chrome 下劃線問題立刻就被我列為首要事務(wù)。

無品牌錘子

我從計算機(jī)歷史以及前人經(jīng)驗中獲得了很多靈感。

上圖拍攝于計算機(jī)歷史博物館中的 IBM 1401 維修實驗室，其中的手提箱裝滿了 19 世紀(jì) 50 年代操作計算機(jī)所需的全部工具，除了錘子，其它大多數(shù)物品都印有官方商標(biāo)。

在那個時代，計算機(jī)仍然是電動機(jī)械式，它的外圍設(shè)備包括打卡機(jī)、鏈?zhǔn)酱蛴C(jī)、讀帶機(jī)，操作它們既要動腦，也要動手，即使你的最終目的就是搗鼓無形的代碼。

Web 設(shè)計常常也是如此：用十分有限的工具、復(fù)雜而邋遢的方法解決簡單的問題，因為并沒有一個簡單方法讓瀏覽器給你想要的下劃線，但是我們可以采取迂回戰(zhàn)術(shù)。

在找到答案之前，先來看看問題所在。

找到完美的下劃線

完美的下劃線應(yīng)該既可見又不唐突——讓用戶意識到哪些文字是可點擊的，同時又不需要對其投入太多注意力。它應(yīng)該被放在離文字一段恰當(dāng)距離的地方，當(dāng)有下行字母占位時，下劃線要緊貼其后：

技術(shù)上，開發(fā)者可以：

改變下劃線寬度（支持半像素/視網(wǎng)膜技術(shù)）

改變下劃線與文字的距離

改變下劃線顏色

清除字母的下伸部分

對已訪問鏈接采取不同的樣式

開啟頭腦風(fēng)暴

下面是我與身邊的前端工程師們想出來的辦法：

1. 默認(rèn)方式

默認(rèn)的 text-decoration:underline 還不夠好，我覺得讀者應(yīng)該得到更好的東西。

2. 高級 CSS 屬性

比如，text-decoration-skip 與 text-underline-position，然而大多數(shù)瀏覽器并不支持它們，在短期內(nèi)也不會支持。

3. 使用 border-bottom 與 box-shadow

用 border-bottom 修改下劃線算是自上世紀(jì) 90 年代以來的 CSS 技巧之一了，它能讓我們自定義顏色，但線與文字距離太遠(yuǎn)，下圖中的 border-bottom 下劃線感覺就像在兩行文字之間：

也有可能突破該限制，只需設(shè)置 display: inline-block 再減小 height 或 line-height 即可，但有一個致命的弱點——鏈接文字不能換行。所以，它對常規(guī)頁面文字根本行不通。（另外，border-bottom 不能顯示兩個以下的視網(wǎng)膜像素）

使用 box-shadow 也有類似的限制。

4. 定制下劃線字體

我們平時見到的斜體與粗體其實具有各自獨立的字母形狀以保持字體的視覺完整性：

既然如此，那為什么不能定制一個獨立的下劃線字體讓下劃線成為字形的一部分呢？

雖然看似很有戲，但在我們這里卻有如下問題：

應(yīng)用一款獨立字體能增大頁面加載耗時

無法改變下劃線的位置、寬度與顏色

字體授權(quán)問題

定制字體不太容易

5. 使用<canvas>

HTML canvas 標(biāo)簽?zāi)芸刂茊蝹€像素，所以我們可以自定義寬度、顏色，甚至在字母的下伸部分周圍繪制，然而問題是無法知道鏈接文字什么時候換行，目前并沒有精確測量換行文字的工具，用 JavaScript 實現(xiàn)開銷太大。
（該方案的另一個版本是，定制一款只有下劃線的字體，再將它繪制到文字上，最終因為與上文同樣的原因而被否決）

6. 使用 background-image 及漸變

雖然看似與下劃線無關(guān)，但 background-image 支持換行文字，靈活性強(qiáng)，還支持視網(wǎng)膜像素，也能在行內(nèi)使用 data 協(xié)議，更能利用漸變進(jìn)行合成。

于是，我們的最終方案是：一個細(xì)小的 1px 或 2px 高漸變，水平拉伸，垂直放置。

7. 清除字母的下伸部分

我的同事想出來了一個雖機(jī)靈但不切實際的辦法——應(yīng)用白色 text-shadow 或 text-stroke 來模擬下劃線與文字間的間隙。

不幸的是，為了取得最佳效果，需要放置多層陰影，代價太大，而 text-stroke 則會遮蓋下劃線里面部分，所以最終我們決定暫時把這事放一放。

8. 事情變得復(fù)雜了

據(jù)我觀察，

作者會在5個地方用上鏈接：body，H1，H2，圖片說明，文章引文

大多數(shù)鏈接是白色背景上的黑字，有些會放在圖片上

視網(wǎng)膜與非視網(wǎng)膜像素顯示

我們給平板與手機(jī)調(diào)整了字體大小

對于某些語言會采用默認(rèn)系統(tǒng)字體

有些用戶會放大或縮小網(wǎng)頁

有些用戶使用不常見的瀏覽器

在接下來幾周，

得到通用公式而不是特定數(shù)值——如果未來要改變字體或大小，調(diào)整下劃線的位置就容易多了

限定我們使用的瀏覽器，為不支持的瀏覽器提供默認(rèn)樣式

簡化代碼，減小網(wǎng)頁大小以及后期維護(hù)成本

然后，事兒就這么成了

沒有煙花，沒有香檳，在經(jīng)過 31 天的討論、嘗試、錯誤與再嘗試后，我的代碼評審員們發(fā)來了四個字母：LGTM（Looks Good To Me）

在 Chrome 下最終的前后效果對比圖：