眾多IT巨頭都無法解決的「電腦科學最大難題」

2024-05-25碼農

引言

在數位時代，使用者與界面的每一次互動都是對產品體驗的一次投票。完美的使用者體驗往往建立在細節之上，而對齊——尤其是居中布局——是這些細節中的關鍵一環。居中布局不僅僅是一種視覺美學的追求，它更是一種資訊呈現的邏輯，能夠引導使用者的註意力，提升閱讀和瀏覽的舒適度。

然而，正如 Niki 在其個人部落格上發表的文章【電腦科學裏最大的難題：居中顯示】中所講，實作完美的居中布局並非易事。它涉及到對字型度量、行高、圖示與文本對齊等復雜問題的深入理解，並且需要設計師和開發者齊心協力。

居中的重要性

在網頁設計中，居中對齊透過建立清晰的視覺焦點，有效減輕使用者的認知負擔，並幫助他們快速把握頁面核心內容和結構。居中的設計元素，如標題和按鈕，能顯著提升頁面的吸重力和專業度。

當呈現給終端使用者時，很多知名公司的套用和網站仍然存在居中對齊的問題。你是否曾經也註意到了這些歪歪扭扭的居中對齊了呢？

Github按鈕中圖示和文本沒有居中對齊。

圖片來源於:https://tonsky.me/blog/centering

X(Twitter)沒有居中對齊

圖片來源於：https://tonsky.me/blog/cent ering

Apple在Big Sur作業系統中沒有對文本居中對齊

圖片來源於：https://grumpy.website/938

在本文中，我們將深入探討設計師和開發者在實作居中對齊時遇到的難題，同時發掘 CSS 和 SVG 在這一過程中的不足之處。透過分析現狀，我們將提出一系列解決方案和最佳實踐，旨在幫助讀者提升網頁和應用程式的對齊品質，從而最佳化使用者體驗。

在設計工具中便捷的居中布局能力

在 Figma 中，透過選擇一個或多個元素並套用居中對齊，設計師能夠迅速實作在容器內的水平胡垂直居中，而無需手動計算像素。此外，還可以透過其直觀且強大約束功能對元素進行限制，例如固定元素的寬度和高度，然後啟用中心約束，以確保元素在容器大小變化時，依然保持水平胡垂直方向的居中。這極大地簡化了設計師在設計階段的工作流程。

在 Figma 中，對圖形添加約束條件以實作居中

對於文本內容的居中展示，Figma 同樣提供了豐富的對齊內容，使得文本的布局既美觀又符合設計意圖。

在Figma中，可以對文本套用的居中內容

Figma 還提供了如 Auto Layout 和 Layout Grids 等強大的布局工具，這些工具在設計階段幫助設計師建立響應式設計。雖然這些工具在概念上與 CSS Flexbox 類似，但它們是專為設計界面而設計，提供了更加直觀的操作方式。

Figma 中的 Auto Layout 功能

CSS 中布局內容對於元素居中的支持

當設計躍入開發階段，開發者需要根據設計稿編寫相應的 CSS 程式碼來實作類似的布局效果，挑戰隨之而來。開發者面臨的任務不僅僅是將設計精確地轉化為程式碼，還要確保這些設計在不同裝置和瀏覽器上的相容性和一致性。 從設計到程式碼的轉換過程中，開發者需要深入理解CSS的布局機制，並運用其提供的多種居中方案來實作設計的視覺要求。 比如使用下面的一些布局模型：

傳統方法 ：利用 margin: auto; 可輕松實作塊級元素的水平居中，這是最基礎也是最廣泛支持的方法。

Flexbox 布局 ： Flexbox 透過 align-items 和 justify-content等內容，為一維布局中的居中對齊提供了簡潔的解決方案。

Grid 布局： Grid布局進一步擴充套件了居中能力，透過 place-items 內容在二維空間中實作精準對齊。

結合 position 和 transform： 對於需要更精細控制的場合，結合 position: absolute; 和 transform: translate(); 可以提供更復雜的居中方案。

SVG 中居中布局挑戰

在 SVG 中，提供了一種不同於 CSS 的布局系統。SVG 元素通常是基於它們的 x 和 y 座標來定位，而不是依賴於塊級或行內級布局模型。這意味著 SVG 內部的 <svg> 元素並不直接支持 CSS 的 Flexbox 或 Grid 布局。

在 SVG 1.1 中，通常可以透過以下幾種方法實作元素居中：

使用 viewBox 和 preserveAspectRatio：透過 viewBox 內容，我們可以定義 SVG 內部的一個座標系統，而 preserveAspectRatio 內容則控制著當 SVG 縮放以適應不同尺寸的容器時，內容如何適配視口。這兩者結合使用，可以建立一個靈活的布局框架。

數學計算：手動計算並設定元素的 x 和 y 座標，以確保它們在 SVG 畫布上居中。

text-anchor 內容：對於文本元素，text-anchor='middle' 內容可以確保文本在水平方向上居中顯示。

dominant-baseline 內容：對於文本的垂直居中，dominant-baseline='middle' （或在某些情況下使用 central ）可以用來調整文本的基線，實作垂直居中。

包裹元素：將需要居中的元素放入一個 <g> 元素中，然後對 <g> 元素套用 transform 內容進行平移或縮放，以實作居中效果。

但每種方法都有其局限性或需要開發者考慮的方面：

使用 viewBox 和 preserveAspectRatio：
雖然 viewBox 提供了一個強大的方法來縮放 SVG 內容，但如果不正確使用，它可能導致內容在不同尺寸的容器中出現意外的變形或位置偏移。並且需要仔細考慮 preserveAspectRatio 的值，以確保內容在縮放時保持設計意圖。
數學計算：
手動計算座標可能會非常繁瑣，尤其是對於復雜的 SVG 或在響應式設計中需要適應多種螢幕尺寸時，這基本是不可能的挑戰。

text-anchor 內容：

text-anchor 內容主要用於文本內容的水平居中，它不提供垂直居中的功能。並且對於非文本元素或需要垂直居中的場景，需要額外的方法或內容提供支持。

dominant-baseline 內容：

dominant-baseline 的使用可能因瀏覽器而異，某些瀏覽器可能不支持或表現不一致。

包裹元素：

將元素包裹在 <g> 元素中並使用 transform 內容雖然提供了靈活性，但也可能增加 SVG 的復雜性，尤其是在大型計畫中管理多個 <g> 元素時。需要仔細管理 <g> 元素的層級和套用的變換，以避免樣式的沖突或不可預期的結果。

SVG 以其向量圖形的無限縮放能力和跨多裝置相容性而受到重視，但在復雜布局方面存在局限。在前文中我們也提到，SVG 並不能直接套用 CSS Flexbox 或 Grid 布局系統，這限制了開發者在 SVG 內部實作高級布局的能力。

盡管 SVG 可以嵌入 HTML 並接受 CSS 樣式，利用 Flexbox 或 Grid 對 SVG 容器進行布局，從而實作復雜的居中和對齊效果。這確實為開發者提供了一條解決 SVG 布局限制的路徑。但是新的問題也可能會隨之而來：SVG 內容和 CSS 樣式可能發生沖突。如 text-anchor 與 text-align 在文本對齊上的交互作用，需要開發者判斷優先級並謹慎處理。

此外，瀏覽器對 SVG 和 CSS 的支持差異可能導致 SVG 元素在不同環境下表現不一致。因此，開發者需要在多個瀏覽器和裝置中進行測試，並準備解決方案以確保布局的相容性和一致性。

當前，我們被困在 SVG 的諸多限制之中，面對著一系列令人沮喪的挑戰。隨著 SVG 2 正式規範的步伐緩慢前行，我們不禁要問：我們還要等待多久才能迎來那些承諾中的改進？還要在不完善的解決方案中掙紮多少年？SVG 的內容沖突問題真的能夠得到解決嗎？這些問題的答案仍然是一片迷霧。設計和開發工作被迫依賴於過時的技巧和權宜之計，這不僅限制了創造力，也阻礙了為使用者提供最佳體驗的能力。

VGG 中居中對齊的最佳實踐

VGG Specs 引入了一系列先進的布局模型和內容，極大地簡化了精準居中對齊的實作過程。這些內容不僅使得設計師的設計意圖得以完美呈現，還為開發者提供了強大的工具，以確保使用者介面的精確布局。開發者不再需要手動編寫繁瑣的程式碼來實作設計師的創意，從而顯著簡化了開發流程並減少了錯誤。這一過程不僅提升了開發效率，還確保了使用者介面在不同平台和裝置上的相容性和一致性。

透過 VGG Specs 實作的 Flex 和 Grid 布局模型，開發者能夠對向量圖形執行復雜的布局任務，就像操作網頁中的其他元素一樣自然。這些模型的靈活性和強大功能，讓設計圖形的布局變得直觀而高效。而 Constraint 布局模型則可以進一步增強了對元素位置和尺寸的精確控制。無論是需要嚴格遵守特定尺寸的圖形，還是必須在特定位置展示的元素，Constraint 布局都能提供必要的支持。

例如，設計師在 Figma 中設計了一個帶有 Auto Layout 的按鈕。在這個按鈕設計中，設計師利用 Auto Layout 的功能，確保按鈕的邊緣與其所處容器的邊緣保持一致，同時在垂直和水平方向上居中。

對於按鈕上的文字展現，設計師采取了在垂直和水平方向的居中對齊。在 Figma 中，這可以透過設定文字域的對齊內容來實作。設計師選擇了文字域，並套用了水平居中和垂直居中對齊，使得文本無論在何種螢幕尺寸下都能保持居中顯示，增強了按鈕的可讀性和美觀性。

開發者在將這個設計轉化為實際的前端程式碼時，可以透過 VGG 直接還原出完全一致的樣式和布局。對於按鈕的居中對齊，開發者可以使用 VGG 提供的 Flexbox 或 Grid 布局系統，透過設定相應的內容（如 justify-content 和 align-items）來實作水平胡垂直居中。

此外，VGG Specs 還提供了一些其他內容，幫助開發者更精確地控制間距、邊距和尺寸，確保實作的布局與設計稿中的效果一致。透過 VGG，開發者可以確保每個元素的樣式和布局在不同的裝置和螢幕尺寸上都能保持一致性和響應性，從而提供高品質的使用者體驗。

透過 VGG 完美還原的按鈕樣式

透過 VGG 還原的 Button 布局完整程式碼

我們必須承認，CSS 作為網頁設計和開發中的核心語言，擁有非常強大的樣式和布局能力。然而，與此強大功能相伴的，是相對較為高昂的學習成本。CSS 的語法規則、內容和值眾多，且存在各種特殊情況和邊緣案例，這使得初學者和非專業開發者在掌握 CSS 時可能會感到困難。

VGG Specs 旨在提供一個更為易用的解決方案。VGG Specs 透過簡化的語法和直觀的 API（之後將由 VGG Runtime 提供），降低了學習門檻，使得開發者可以更快地上手並實作布局。

與 SVG 相比，SVG 雖然在向量圖形的建立和顯示方面得到青睞，但在布局能力上並不完善。SVG 缺乏類似 CSS Flexbox 和 Grid 這樣的現代布局系統，這限制了它在復雜界面設計中的套用。而 VGG Specs 則在這方面進行了補充和完善，它不僅支持向量圖形的所有特性，還提供了一整套布局解決方案，使得開發者可以輕松實作復雜的界面布局，無需擔心 SVG 的局限。

VGG Specs 的設計理念是將易用性和強大功能相結合，為開發者提供一個既簡單又強大的工具。同時，VGG Specs 也為設計師和開發者之間的協作提供了便利，使得從設計到實作的過程更加流暢和高效。

我們期待看到一個更加高效和友好的開發環境，讓開發者可以更加輕松地構建出既美觀又實用的網頁和套用。

此外，VGG 開源了底層引擎 VGG 執行時，具有跨平台渲染和執行能力。我們後續會出一系列內容討論 SVG 作為向量圖形存在的問題，並展示 VGG 的圖形能力以及相比於 SVG 的優點。

參考：

https://grumpy.website/938

https://tonsky.me/blog/centering/

https://youtu.be/_-6LgEjEyzE?t=2291

https://web.dev/blog/align-content-block

https://habr.com/ru/companies/ruvds/articles/810311/ https://mp.weixin.qq.com/s/1tLk9PDPByA6zNdbQ4eGOQ

https://aelaschool.com/en/visualdesign/alignment-ui-invisible-structure-behind-designs/

關於 VGG

VGG（VeryGoodGraphics）是新一代跨平台套用開發解決方案。VGG 倡導 Design-as-Code 的理念，讓開發者可直接基於設計稿編程，快速將設計原型交付為可互動的套用。 特性一：無程式碼完美還原設計稿 VGG 自研的開源圖形引擎能渲染出高保真設計稿中的任意細節，可直接將設計稿作為使用者介面，省去前端與客戶端開發者使用程式碼去復原設計稿的開發工作，降低他們與設計師之間的溝通摩擦成本。 特性二：原生跨平台、嵌入式支持已有開發框架
VGG 透過完全或者部份嵌入的方式，支持在任意一種已有的 APP 基礎上進行增量式開發，主持主流平台與框架。
特性三：指令碼與 WebAssembly 支持
VGG 還同時支持平台無關的 JS 指令碼與 WebAssembly 模組，在提供快速業務邏輯開發能力的同時支持高效能計算。
特性四：高度的生態相容性
VGG 提供的 SaaS 服務目前已實作對主流設計生態的相容（Figma/Sketch/Adobe Illustrator），並提供 Figma 外掛程式幫助設計稿快速同步。將來還計劃為開發者提供開發輔助工具，打通從套用 UI 設計到套用研發的完整流程。