在標準文本框中，幾乎總是在實際文本的上方和下方都有多餘的空間。因此，當你使用文本框測量和實現間距時，它最終會超出您的預期。行高越大，問題就越大。下面的示例顯示文本框之間的距離設置為32px。如您所見，即使將所有垂直間距都設置為相同的值，它們在視覺上也比32px大得多。
這是跨工具和平臺的常見問題。在我的上一篇中型文章中，我談到了如何使用4px底線網格來測量文本周圍的間距並獲得更好的視覺準確性。知道這種方法的缺點，我一直在尋找更好的解決方案。去年六月，我遇到了一個新興的CSS樣式規範，叫做Leading-Trim。我一直在與規範的作者（來自W3C CSS工作組fantasai的專家）合作，以確保Microsoft Design可以成為這項變革性工作的一部分。
今天，我們很高興地宣布Microsoft Design正在贊助此新規範的創作。本文介紹了這個新的CSS標準（領先修剪）及其對Web設計人員和開發人員的意義。
要了解這是如何成為問題的，特別是在網絡上，我們需要回顧印刷術的歷史。大約140年前，仍然使用單個鉛盒手動設置字體。為了使文本更具可讀性，排字機將鉛條插入空格線（這是行距的來歷）。塊的高度加上行距的總和等於行的總高度。
80年代早期的圖形設計軟體保持了相同的傳統，人們可以直接添加底部行距來控制線之間的間距，結果行的高度會增加。其他軟體把它分為兩部分，人們可以在其中直接調整行高。但是事實上，行距始終是不斷變化的部分。
Web發明後，事情發生了變化，CSS1於1996年問世。創建CSS1的人們決定將行距一分為二，並將其放在每行的上方和下方。他們稱其為「半行距」。他們的原因很簡單：使文本框看起來均勻。
自CSS1開始，行距被分成兩半，並置於每行的上方和下方。上面顯示的瀏覽器窗口是Internet Explorer 3.0。IE3是第一個支持CSS的商業瀏覽器。所使用的字體是Verdana，它與1996年由Microsoft發起的Web項目的Core Fonts一起發布。
半行距創造性地避免了邊界框的不均勻性，但同時也帶來了自己的問題。每個字體系列中的每種字體大小都帶有默認的行高。通常默認行高高於其包含的文本內容，以容納某些字符和撇號。增加行高變成了增加兩個半行距，使文本框更大。半行距，再加上行高默認保留的額外空間，是當今我們文本框不好用的根源。
一些最受歡迎的UI設計工具，例如Figma和Sketch，似乎已經採用了半行距模型並以這種方式呈現文本。因此我們在設計工具和瀏覽器中都遇到了這個問題。
設計方面的解決方法相對容易：你可以忽略邊界框，而直接根據文本的文字高度和底線來測量空間。這是一個手動過程，因為大多數設計工具沒有辦法獲取文字高度和底線的實際位置，但是設計師又想把自己的設計作品設計的更好。
如果採用這種方法，開發人員仍將僅在CSS中實現邊界框間距。因此它們將獲得看似隨機的間距值。
為了緩解此隨機性問題，開發人員可以在CSS中以負邊距「裁剪」文本框。但是負邊距將需要手動確定，並且是特定於字體的，因此是「隨機的」。任何字體，瀏覽器，作業系統或語言環境的更改都將不可避免地導致您不小心設置邊距。此外，該技術通常都不是良好的編碼實踐，並且可能導致其他的問題出現。
Leading-trim試圖改變我們已經使用24年的標準。
Leading-trim是CSS工作組正在引入的新CSS屬性。顧名思義，它就像文本框剪刀一樣工作。您只需使用兩行CSS，就可以從您選擇的參考點中修剪掉所有多餘的空間。
h1 {上面的示例首先使用text-edge（也是新屬性）來告訴瀏覽器，所需的文本邊緣是字母頂部到字母底線。然後，它使用leading-trim從兩側修剪它。注意，leading-trim僅會影響文本框；它不會切斷其中的文本。
這兩行CSS創建了一個貼合的文本框來包裹文本。這可以幫助你獲得更準確的間距並創建更好的視覺層次。
藉助Leading-Trim，可以解決在網站上看到的所有的對齊問題。例如，即使文本框位於文本框內，您的文本也不一定總是在容器中垂直居中。
默認行高保留的多餘空間會導致文本不總是在文本框中居中。使用Leading-Trim，可以可靠地垂直居中放置文本。
每種字體的設計也不同。它具有自己的默認行高，並且其中的文本可以具有不同的大小和底線位置。因此，有時即使字體大小、行高和文本框位置保持不變，更改字體也會更改文本的對齊方式，如下例所示：
在第二個示例中，你可以看到Leading-trim是如何防止這種情況並使文本保持原樣。
Leading-trim超出了使間距和對齊更準確的範圍。它在建立精確的間距系統，為設計的準確性和一致性以及高效的設計到開發交接鋪平道路方面發揮著關鍵作用。
間距系統就像T恤尺寸一樣用於間距值。就像今天在代碼中如何設置調色板或類型漸變一樣，間距值也可以使用CSS類表示。（要了解有關間距系統的更多信息，請查看Nathan Curtis的 「設計系統中的空間」。）
擁有間距系統有很多好處。設計人員可以更快地確定間距，開發人員可以設置相應的間距變量以消除代碼中的隨機硬編碼值。但是今天，即使我們設置了間距系統，由於文本框中的額外空間，對於文本元素來說也不是很準確。如果我們嘗試忽略設計中的邊界框並在代碼中「裁剪」文本框，則會遇到那些棘手的解決方法問題。
應用於文本元素且沒有leading-trim的間距系統😕
藉助Leading-trim，設計人員最終可以釋放間隔系統的功能。從設計開始，我們可以在測量可見的間距（針對字體的大寫高度和底線的度量）的基礎上應用間距系統。除了準確的間距外，它還有助於我們建立更好的視覺層次結構並增強對布局的信心。總體而言，我們可以提高整個設計的一致性。
從設計到開發的交接過程也將更加順暢，因為開發人員將能夠建立完全相同的系統，並避免在布局錯誤上花費大量時間。最重要的是，Leading-trim間距系統將幫助我們提供用戶信任和喜歡的更美觀的產品。
除了精巧和更高效的交接，我們希望Leading-trim能夠為數字排版帶來新的篇章，並從Open Type開始推動對其他標準和平臺的改進。
瀏覽器通過訪問字體參數來查找例如行高和底線來進行Leading-trim。作為標準字體格式，Open Type指要在字體文件中包括哪些參數。自1997年以來，Open Type由 Microsoft 和 Adobe 聯合開發，作為 Apple True Type 字體格式的擴展。儘管今天Open Type對拉丁腳本和CJK語言提供了強大的支持，但它仍缺乏其他較不常用的書寫系統（如希伯來語或泰語）的關鍵指標。隨著人們採用Leading-trim，我們希望這能為OpenType添加其他書寫系統的更多字體參數提供了方法。
最終，我們希望Leading-trim可以通過確保全球相同的印刷能力來幫助改進OpenType及其國際化。這僅僅是生態系統的開始。一旦Leading-trim功能在所有現代瀏覽器中都可用，使用Web技術（例如Figma，Teams和VS Code）構建的桌面應用程式也將能夠利用它。
這構成影響不僅僅是Web端。Sketch已經為文字頂部和底線添加了捕捉目標。不用按住Option鍵來顯示邊界框到邊界框的間距，而是可以按住Control + Option來查看底線到文字頂部的間距。它使可見的間距測量變得容易得多。更重要的是，這表明人們進行數字排版的方式正在緩慢變化。我們希望微調可以進一步鼓勵這種變化。通過這種思維方式的變化，不僅僅是快速的目標，Leading-trim可能會成為我們設計工具中的一種新的文本呈現標準，並擴展到我們的作業系統。
Leading-Trim是fantasai正在研究的CSS Inline Layout Module Level 3規範的一部分。規範中還包含其他四個建議，其共同目標是修復CSS文本布局。
Microsoft Design贊助此規範的編寫，這是CSS標準化的第一步。該規範將為每個瀏覽器提供實施藍圖，以便世界各地的Web開發人員和設計人員可以使用其引入的功能。但是，我們希望我們的參與超出此範圍，從將OpenType規範擴展到瀏覽器實施，產品集成和測試等等。
我們相信，這一新規範將有助於推動可訪問性、國際化和工藝方面的發展，我們為成為這一計劃的一部分而感到自豪。
我們期待與CSS工作組和fantasai的合作，這將是整個Microsoft的跨團隊合作，並且對未來的發展感到興奮。