CSS

問題現場：想做一份「能印」的網頁報表 需求很常見：後台要一頁會計報表（明細列表 + 合計列），會計同事要能直接從瀏覽器按列印、出 A4。沒人想為這種小需求引入 PDF library 或產 PDF 的後端服務 —— 瀏覽器列印就好。 寫下去才發現坑滿地：頁碼從哪來？跨頁時表頭會不會消失？頁面外面那層 admin sidebar、左側選單會不會也跟著被印出來？螢幕上預覽是黑背景白字，印到紙上會變什麼樣？ 這些問題的答案幾乎都不在「常見 CSS 教學」裡，而是藏在一份很少人讀的 W3C 規範：CSS Paged Media Module。本文用一份實際做出來的會計報表為例，把這些技巧串起來。 為什麼不選 PDF library？ 開發者第一個反射動作往往是「裝個 jsPDF / pdfmake 直接產 PDF」。在跳進那條路之前，先看清各方案的代價： 方案 中文字型 排版精度 Bundle 適用情境 CSS @page（本文） ✅ 系統字型 高（向量字） 0 KB 後台報表、現場列印、人工流程 html2canvas + jsPDF ⚠️ 需嵌字型 中（光柵化） ~300 KB 簡單表單下載 pdfmake / React-PDF（向量 PDF） ⚠️ 需嵌字型 高 ~500 KB+ 給外部讀者的下載檔 後端 Puppeteer / WeasyPrint ✅ 系統字型 最高 0（前端） 批次寄信、加密簽章 前端 PDF library 最大的痛點是中文字型。系統列印免費借用作業系統字型；jsPDF 預設只內建 Helvetica，要中文不亂碼就得把整套思源黑體（壓縮後仍有 5-10 MB）打包進 bundle，否則出現方塊或缺字。 ...

前言：編輯器與前端的排版不一致之謎 在開發多平台醫療健康應用時，我們採用了現代化的技術棧： 後端 CMS：Strapi v5.15.1（Headless CMS） 前端框架：Vue.js 3 富文本編輯器：CKEditor 5 資料傳輸：GraphQL API 這個組合在大多數情況下運作良好，編輯者可以在 Strapi 後台使用 CKEditor 輕鬆編輯富文本內容，前端 Vue.js 應用透過 GraphQL 獲取並渲染這些內容。 然而，我們遇到了一個令人困惑的問題： 在 Strapi 後台使用 CKEditor 精心排版的水平並排圖片，到了前端網頁卻變成了垂直排列。 這個問題不僅影響了內容的視覺呈現，也破壞了編輯者的排版意圖。更重要的是，這讓非技術背景的內容編輯者感到困惑：「為什麼我在後台看到的排版，到了網站上就變了？」 這篇文章將深入探討這個問題的根本原因，並提供系統性的解決方案。 問題現象與環境說明 內容流程架構 我們的內容從編輯到展示的完整流程如下： sequenceDiagram participant Editor as 內容編輯者 participant Strapi as Strapi 後台 participant CKEditor as CKEditor 5 participant DB as 資料庫 participant GraphQL as GraphQL API participant Vue as Vue.js 前端 participant Browser as 使用者瀏覽器 Editor->>Strapi: 登入後台編輯內容 Strapi->>CKEditor: 載入富文本編輯器 Editor->>CKEditor: 編輯內容，設定圖片水平排列 CKEditor->>CKEditor: 生成 HTML（含 float 樣式） CKEditor->>Strapi: 儲存富文本內容 Strapi->>DB: 儲存到資料庫 Note over Editor,DB: 編輯階段完成 Vue->>GraphQL: 請求內容資料 GraphQL->>DB: 查詢內容 DB-->>GraphQL: 回傳富文本 HTML GraphQL-->>Vue: 回傳 JSON（含 HTML 字串） Vue->>Vue: 使用 v-html 渲染 HTML Vue->>Browser: 顯示最終頁面 Note over Browser: ❌ 問題：圖片垂直排列<br/>（預期：水平排列） 問題的具體表現 預期行為： ...