用 Stylus 微調國教院網頁樣式

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

留言

張貼留言

這個網誌中的熱門文章

嘗試錯誤的英文是什麼

圖片
在工程領域，不管是硬體還是軟體，常常會提到說「如果要讓產品變得更好、或是讓自身快速學習某個領域知識的話，就必須要靠嘗試錯誤」 嘗試錯誤學習主要意思就是，透過快速的測試，讓自己接收到反饋的速度加快，因此就能夠根據收到的訊息累積經驗，並加快學習/開發的速度 嘗試錯誤的英文發音，聽起來像是「踹欸裸」。但網路上看到的英文寫法卻有分歧，最常見的是這裡兩種：「try and error」，或是「trial and error」。究竟是哪種呢？ 在不確定哪種用法是對的時候，我常會使用 Google Trend 當作輔助工具。Google Trend 可以幫助我們了解某個詞的搜尋熱度的趨勢變化。以 嘗試錯誤英文寫法的全球搜尋熱度為例 ，結果發現，trial and error 的搜尋次數比較高。因此貌似 trial and error 會是比較好的寫法 Google Trend 有個特色，是可以調整想觀察哪個區域的搜尋熱度，因此就 調整到台灣看看吧 。結果發現，try and error 的搜尋次數竟然比較多 @@。 真是猜不透台灣人 RRR 結論是，平常在用嘗試錯誤這個用詞，還是以 trial and error 當作正式寫法比較好。不過台灣人感覺也接受 try and error 這個寫法就是惹。 其他參考資料 [請益] try and error - 看板 Eng-Class - 批踢踢實業坊 try and error - 試誤法 嘗試錯誤 - 維基百科，自由的百科全書 ​
閱讀完整內容

[TED] 興趣沒有目的地

圖片
一開始知道博恩這個人，是因為 Youtube 推播了「 大奶微微 」這個段子的影片。後來的博恩夜夜秀我也滿喜歡的，在台灣是個很新鮮的節目形式。而自從知道博恩大學唸過心理系後，就越來越喜歡這個人惹。然後剛剛在 Youtube 上看到這個博恩在 TED 的演講： 興趣沒有目的地 | 曾 博恩 | TEDxProvidenceUniversity - YouTube 博恩在演講頭一分鐘就提出貫穿整場的提問： 你下班後都在幹麻？ 這句話「你下班後都在幹麻？」在整個演講中一直被提到。簡單說就是，當下班過後，你還有什麼興趣能支持著你一直往前進呢？ 鋼鐵人 隨後就提了他在大學時期自製鋼鐵人裝的故事，並認為興趣是最能定義一個人的東西。例如，博恩在大學前可能被旁人貼上「他就是那個書呆子」的標籤。但在做完衣服後，可能就會被記住是「他就是那個做鋼鐵人的」。 興趣的第二個特徵是，能讓人產生強大的動力。博恩大學本來唸的是外文和心理學，這些學科跟自製鋼鐵人裝需要了解的燈飾操作（Arduino）與服裝製作（聚酯樹脂）完全不搭嘎的，但興趣卻讓他完成了這件作品。因此博恩認為，雖然「隔行如隔山」，但是「興趣的力量，可以移山」。 博恩的第三個感悟是，他認為，台灣人很功利主義。因為博恩在戶外製作鋼鐵人裝時，很多人過來問說「這是作業嗎？」「這有在賣嗎？」「都沒有的話你為什麼要做這個？」。於是博恩感慨，認為興趣應該是不需要理由的，它本身就是理由，並順口將話題帶到了博恩在單口喜劇的初體驗。 站立喜劇 博恩在高中時被同學推坑脫口秀。被激起興趣後，在大學時跑去嘗試素人的單口喜劇表演初體驗，但台下卻沒有鼓掌或笑聲 QQ。博恩認為，正是因為一開始沒有獲得成功的獎賞（次級增強物），而自己卻依然喜歡單口喜劇，代表自己應該是真心喜歡它的。 你下班後都在幹麻？ 我們活著是為了什麼？是工作，還是興趣？博恩認為，工作應該是維持生活的手段，但很多人卻為了混口飯吃，把工作當成了人生的目的，而花時間在興趣上則被認為是不切實際。博恩認為，興趣不需要 KPI，就算有階段性目的的話也是自己訂的，而不是外加的。 當一個人在講自己有熱誠的話題的時候，他的眼睛會發光。如果用個視覺意象比喻的話，活著，就是眼睛有光，生生不息。博恩最後說道，如果再有人來問說，為什麼要在可能沒報酬的興趣上花
閱讀完整內容

英文單字的語源查詢工具

圖片
我記得在高一的時候，英文老師曾經跟班上介紹過字首、字根、字尾的概念。那時覺得我的世界觀又開拓了一點，原來英文單字不是最小單位，它是可以再被拆解的。 於是，後來有好一陣子，我在背單字前，都會先到一個網站查該單字的字首字尾。後來沒有再使用該網站查詢有兩個原因：一、太花時間了，每個單字都查詢的時間，都可以再背誦單字一輪了。二、那個網站倒了，我現在要找也找不到了 QQ 直到長大後，有去主動了解英文的語言系統發展的歷史，才比較明白英文語言系統是一直在演化的，就跟中文語言系統一樣。想了解中文的語源，我可以去找說文解字來看；但想找英文的語源，我卻沒有很好的入門方案。 以下是我目前所知道的，能找英文語源的查詢工具 語源 Online Etymology Dictionary 是一定要放第一個的網站。雖然我一直覺得它的斷句很爛，閱讀起來很不舒服，但它是我目前能找到收錄最多語源資料的網站，甚至連該詞彙在各時間點的發展都有。現在看它的斷句好像有好一點 … march | Origin and meaning of march by Online Etymology Dictionary youdict 優詞 第二個要介紹的網站是優詞。這個網站超奇妙的，對語源的解釋寫得很口語，跟第一個網站的寫法很不一樣。滿推薦的，真希望我高中背英文時有這個網站 XD 優詞詞源 [中文版] dictionary 詞根詞綴_同根詞 - 優詞詞根字典 dictionary 詞源 (Etymology) - 優詞詞源 [英文版] Google search 第三個要介紹的是 google 搜尋 … 嘿丟就是 google 大神。我本來只是想用 google 搜尋網路上找得到的英文語源辭典，所以就用「dictionary origin」當關鍵字搜尋。結果，它就跳出整理過的資訊卡片了 …，還有附上簡易發展圖呢 dictionary origin - Google 搜尋 [G 密技] Google 搜尋讓你輕鬆查「定義」！ - 香腸炒魷魚 Google の検索で辭書定義の結果出力が充実（例文、同義語、語源など） | TechCrunch Japan 字首字尾 English4Formosa 貌似是台灣人開發的查詢系統，也有手機版可
閱讀完整內容