長文章怎麼保持可讀：程式碼、表格、圖片與圖說

一篇文章的段落都能順利換行，不代表它在手機上就容易讀。長指令可能把整頁撐寬，表格可能被壓成每格只有幾個字，圖片雖然縮小了，裡面的標籤卻看不清楚。

這幾種問題不能只靠縮小字體處理。正文、程式碼和資料表保留資訊的方式不同；圖片與圖說也不是放在一起就會自動說清楚。我比較在意的是，讀者換到窄螢幕之後，還能不能完成原本的閱讀工作。

以下依據 2026 年 10 月 23 日的本站文章版型，整理目前的處理與仍需要人工判斷的地方。

先分清楚，什麼內容需要保留原來的結構

正文可以隨容器換行，程式碼裡的縮排、表格裡的欄列關係，卻可能是理解內容的一部分。把所有東西強制折行，雖然能消除橫向捲軸，也可能把另一種閱讀問題藏進去。

我會先按讀者要做的事區分：

內容	讀者需要保留什麼	排版時先處理什麼
一般正文	句子的順序與段落關係	隨可用寬度換行，不讓讀一行字需要左右移動整頁
行內識別字或網址	名稱與前後句的關係	必要時換行，避免單一長字串撐寬正文
程式區塊	縮排、行的邊界與可複製的內容	先精簡示例，再決定是否保留局部橫向捲動
資料表	表頭與各欄列的對應	先減少不必要的欄位，必要時讓表格自己捲動

W3C 對 Reflow 的說明也區分一般內容與理解時需要二維布局的區塊。資料表可以有自己的捲動容器，但這個例外不會讓旁邊的段落也自動取得橫向溢出的理由。[1]

因此，看到某張表格可以左右捲動，不等於整個文章頁都可以被它撐寬。反過來說，也不能把每一段長程式碼都直接當成不需要重排的例外。

程式碼先縮到能說明問題，再決定怎麼捲動

本站目前讓程式區塊保留局部橫向捲動，行內 code 則允許長字串換行。將相關規則用一般 CSS 摘寫，差異像這樣：

.note-body pre {
  max-width: 100%;
  overflow-x: auto;
}

.note-body :not(pre) > code {
  overflow-wrap: anywhere;
}

這段摘寫只呈現寬度與換行取捨，沒有列出完整的字體、間距和表面樣式。文章主欄與正文容器另有 min-w-0，讓布局中的內容有縮小空間；單獨複製一個 overflow-x: auto，不能保證任何外層布局都不會溢出。

不過，能捲動只是容納方式，不是範例已經適合閱讀的證據。若要說明一個判斷，卻貼進整個設定檔，讀者仍要在不相關的行之間找重點。

我會先刪掉與論點無關的程式，把需要注意的條件放在附近說明。只有讀者真的需要比較完整的一行、或保留縮排與原始結構時，才讓橫向捲動承擔這個成本。不能用「程式碼本來就很長」跳過編輯。

表格要保留對照，不是只把每格縮得更窄

表格適合讓人沿著相同欄位比較不同項目。如果縮到手機後，每個儲存格都變成很長的一列文字，原本的比較優勢可能已經消失。

本站表格目前採用 display: block、width: fit-content、max-width: 100% 與 overflow-x: auto，把需要的橫向移動留在表格本身。這是在保留對照結構與可用寬度之間的取捨，不代表每張表格都應該沿用相同形狀。

校稿時，我會先看是否有某一欄其實只是重複說明，或某些儲存格已經長成完整段落。如果各列不需要互相比較，改成小節可能更合適；若真的需要逐欄對照，就保留表頭與資料的關係，不為了塞滿螢幕而拿掉重要資訊。

還要另外確認讀者能否發現橫向內容，以及使用鍵盤時能否到達並操作捲動區。這篇文章的實際預覽中，程式區塊帶有 tabindex="0"，表格則沒有同樣的屬性。兩者的操作條件需要分開檢查，不能只憑 CSS 或一個 tabindex 宣稱鍵盤操作已經完整驗收。

圖片縮得進來，不代表圖中的資訊還讀得到

文章圖片目前有 max-width: 100% 與自動高度，讓它不必以原始寬度撐開正文。但一張包含很多小字的流程圖，即使整張顯示在螢幕內，也可能需要重畫、拆圖或補上文字說明。

圖說要補的是讀者如何解讀這張圖：圖中的範圍、比較條件、示意與實際狀態的差別。重複寫一次「這是一張流程圖」，通常沒有增加足夠資訊。

HTML 的 figure 可以把一份完整的圖像、圖表或其他內容視為一個單位，figcaption 則提供這個單位的標題或說明。[2] 本站已經為 figcaption 定義樣式，但選擇器存在，不代表每張 Markdown 圖片都已經有圖說；輸出裡仍需要真的出現對應的內容與結構。

圖說與 alt 的分工也要看情境。如果圖片提供附近文字沒有交代的資訊，仍要補足可理解的替代內容；若資訊已完整重複在文字裡，處理方式又不同。WAI 的 alt 判斷流程，先問的就是圖片在目前情境裡增加了什麼意思，而不是只看它有沒有一段可見圖說。[3]

圖片的載入與失敗狀態是另一份責任。這裡先處理文章讀者能否理解圖片，不把排版設定當成載入或效能改善的證據。

閱讀驗收，要帶著真正難排的內容來看

空白版型或幾段短文，碰不到長文章最容易出問題的地方。確認時應挑一篇真的含有長識別字、程式區塊、需要對照的表格，以及帶小字的圖片，沿著正文讀下去。

我會把「程式是否輸出正確內容」和「閱讀是否順暢」分開看。前者可以檢查 HTML、heading、表頭和圖說是否存在；後者還需要在窄螢幕、文字放大與實際操作方式下，確認資訊有沒有被切掉、捲動是否可發現，以及讀者是否得反覆尋找對應的說明。

這篇整理的是版型責任與校稿方法，不是全站可及性認證，也沒有所有裝置的閱讀舒適度量測。本站目前已有局部捲動、圖片寬度與圖說樣式，但最後仍要拿真正的文章來讀。只要某段內容必須靠不斷縮小字體才能勉強放下，就值得回頭檢查內容的組織方式。

Sources

[1] https://www.w3.org/WAI/WCAG22/Understanding/reflow.html — W3C — Understanding SC 1.4.10 Reflow [2] https://html.spec.whatwg.org/dev/grouping-content.html — WHATWG — Grouping content: figure and figcaption [3] https://www.w3.org/WAI/tutorials/images/decision-tree — W3C WAI — An alt Decision Tree