前端面試：如何用 CSS baseline-shift 處理文字與 SVG 的基線對齊？

題幹與適用場景

設計系統中的狀態圖示、單位符號和內嵌 SVG 需要和正文、按鈕文字及數學公式對齊。開發者用負的 top 或 transform 修正後，在字型替換、不同行高和 RTL 頁面中出現漂移。請設計基於 CSS 基線的方案，並說明 baseline-shift、SVG 基線、回退策略、可及性和視覺回歸測試。

面試官考察點

• 是否理解 inline formatting context、字型基線、上標/下標和替代基線。
• 能否區分 baseline-shift 與 vertical-align、transform 的職責。
• 能否處理 HTML 文字與 SVG 內容的跨瀏覽器差異。
• 是否會保留可讀文字、焦點順序和 RTL 語義，而不是只追求像素。
• 能否用字型矩陣、快照和真實瀏覽器覆蓋驗證。

回答前需要釐清的問題

1. 圖示是裝飾性還是傳達狀態？是否有可見文字和螢幕閱讀器名稱？
2. 目標是普通內嵌圖示、上標單位、公式，還是 SVG 內部的文字？
3. 需要支援哪些瀏覽器、字型載入失敗和縮放級別？
4. 對齊基準是字母基線、數學基線、SVG dominant-baseline，還是視覺中心？
5. 元件是否支援 RTL、動態字型大小和使用者強制高對比度？

30 秒回答

我會先定義語義基線：正文圖示通常跟隨字母基線，公式或上標才使用明確的上移量。優先讓圖示參與 inline formatting context，用 baseline-shift 表達相對基線的意圖，不把 transform 當成排版規則；vertical-align 負責行內盒的對齊方式，二者不能混為一談。對 SVG 統一 viewBox 和基線策略，舊瀏覽器提供 vertical-align 或尺寸回退。裝飾圖示隱藏，狀態圖示保留文字和名稱；測試字型載入、縮放、RTL、SVG 和瀏覽器快照。

分步驟深入解答

1. 先確定基線語義

基線不是盒子的垂直中心。正文圖示通常應與字母基線對齊；上標、下標和數學符號則有不同的基線關係。先把視覺需求寫成「相對目前行基線上移/下移」，再決定 CSS 屬性，避免為每個字型寫魔法像素。

.status-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  baseline-shift: 0.08em;
}

範例中的偏移只是元件設計令牌，不能假設適用於所有字型；應透過真實字型和字級測量確定。

2. 分清 baseline-shift、vertical-align 與 transform

baseline-shift 表達相對基線的偏移，適合上標、下標和需要保持排版關係的內嵌內容。vertical-align 參與行內盒、表格儲存格或指定基線的對齊。transform: translateY() 只改變繪製位置，不改變行盒計算，可能造成點擊區域、溢出和後續文字關係不一致。

3. 處理 SVG 與字型差異

為 SVG 設定穩定的 viewBox，避免路徑本身留白導致視覺誤差。內嵌 SVG 的基線行為還受替代基線和 dominant-baseline 影響；不要只在 Chrome 中目測。對圖示元件提供預設基線、上標和下標變體，減少呼叫方重複覆蓋。

4. 設計回退層

偵測屬性支援後再啟用精細偏移；不支援時使用 vertical-align、尺寸或 line-height 的保守方案。回退應保持可讀和可點擊，不能把不可見文字擠出螢幕。字型尚未載入時先採用系統字型可接受的基線，字型載入後透過穩定令牌而非腳本逐幀修正。

5. 可及性與國際化

裝飾圖示使用空替代文字並避免重複朗讀；表達狀態的圖示必須有文字或可及名稱。不要把上移位置當作語義，RTL 只改變書寫方向，不應改變垂直基線。使用者放大字型、強制高對比度和減少動效時，元件仍需保持清晰和可操作。

6. 測試和回歸門禁

測試矩陣覆蓋常用字型、字型載入失敗、字級 12–32px、不同 line-height、SVG 路徑、上標/下標、RTL、瀏覽器和縮放。截圖比較應關注基線偏差、行高變化、裁剪和點擊區域；同時執行可及性檢查。發現偏差時先判斷基線模型還是資源留白錯誤，不要繼續堆疊 transform。

高品質示範回答

我先把需求分成正文圖示、上標/下標和 SVG 文字三類，因為它們的基線不同。正文圖示加入行內格式上下文，用 baseline-shift 表達相對目前基線的偏移；vertical-align 負責行內盒對齊，transform 只作為無法改變排版時的最後視覺修正。SVG 使用穩定 viewBox，並測試替代基線和路徑留白。

我會提供屬性支援回退、系統字型和舊瀏覽器策略，保證點擊區域與可讀文字不受影響。裝飾圖示隱藏，狀態圖示有名稱。測試覆蓋字型、字級、行高、SVG、RTL、縮放和截圖回歸；偏差先回到基線語義與資源幾何檢查，而不是增加更多魔法數字。

常見錯誤

• 把基線當成盒子中心，用一個 translateY 解決所有字型。
• 認為 vertical-align、baseline-shift 和 transform 完全等價。
• 只測試 Chrome 預設字型，不測試字型載入失敗、縮放和 RTL。
• SVG viewBox 有額外留白，卻把問題歸因於 CSS。
• 裝飾圖示被螢幕閱讀器重複朗讀，或狀態圖示沒有可及名稱。
• 用腳本測量每幀位置，造成佈局抖動和維護成本。

追問及應對

為什麼不用固定的 top: -2px？

它依賴特定字型、字級和行高，不能表達基線意圖，也不參與行盒計算。相對基線的令牌更容易隨排版上下文調整和測試。

SVG 路徑看起來仍然偏低怎麼辦？

先檢查 viewBox 留白、路徑幾何和 SVG 的替代基線，再調整元件基線令牌。不要直接把每個圖示單獨加 transform，導致設計系統無法統一。

屬性不支援的瀏覽器如何保證體驗？

提供 vertical-align 和尺寸的保守回退，保持可讀、可點擊和不裁剪；將精確偏移作為增強，並用真實瀏覽器截圖確認回退沒有破壞行高。