用 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 的調整方式
留言
張貼留言