用 Stylus 微調國教院網頁樣式
之前在寫論文的時候啊，看到不懂的學術英文單字時，我通常都在第一時間把單字拿去餵 google。通常，有很高的機率會查到這裡： 國家教育研究院雙語詞彙、學術名詞暨辭書資訊網 。他是台灣行政院底下研考會的網站，資料庫中能查詢的內容有兩大部份：公告詞彙以及機關建議詞彙。 我覺得這個網站還算不錯的參考，因為能查到許多領域的中英對照表。不過，這個網站有個奇怪的排版，就是字會黏在一起 … 這讓人很困擾 R。以 psychology - 心理學 詞條為例 從圖片可以發現到，文字都黏在一起了，相當難以閱讀。不過，同時也能看到，在每個應該分段的地方，都會有兩個全形空格隔開前的語意段落。因此可以猜想的是，可能是資料從純文本轉換成富文本時出現了問題。 打開瀏覽器的開發人員工具後，可以發現，該段落是用 h4 標籤給包起來的，而且內容的換行是純文本形式的換行，而沒有在 HTML 碼上用 p 或 br 的語意標籤來分段。 因為最近在學寫網頁，就做了一些微調，讓畫面比較好看一點。作法就是 透過 Chrome 附加元件 Stylus - Chrome 線上應用程式商店 ，來為網頁客製 CSS 樣式 用 CSS 選擇器 div>h4 框定要修改樣式的區塊 用 white-space: pre-wrap 強迫文字排版和 HTML 碼中的排版一樣，讓文字分段，不再黏在一起 用 line-height: 1.8em; 增加行距，讓閱讀更舒適 CSS 碼如下 div > h4 { white-space : pre-wrap ; line-height : 1.8em ; /* word-break: break-all; */ } 這樣調整後，排版就比較順眼惹。其實用 <pre> 標籤替換 <h4> 標籤也可以，但可能需要用 JavsScript 來做替換，比較麻煩。所以最後還是選用純 CSS 的調整方式
