meta data for this page
  •  

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

下次修改
前次修改
blog:2020:12:13-word-card [2020/12/13 06:49]
127.0.0.1 外部編輯
blog:2020:12:13-word-card [2022/11/18 23:23] (目前版本)
ghsrobert ↷ 鏈結因頁面移動而自動修正
行 3: 行 3:
  
 技術拆解/,(⭐ = 技術點),/ 技術拆解/,(⭐ = 技術點),/
-  - [[BlueGriffon]] = __HTML 編輯器__,自不待言+  - [[web-designing:bluegriffon]] = __HTML 編輯器__,自不待言
     - 先把 100 多個字串打好(共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的,但我打字很快就打完了 XD)     - 先把 100 多個字串打好(共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的,但我打字很快就打完了 XD)
     - 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐,就丟到 BlueGriffon 裡開始設定 CSS:<code css>     - 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐,就丟到 BlueGriffon 裡開始設定 CSS:<code css>
行 16: 行 16:
   - 想用清楚、好看的粗體 sans-serif 字型:   - 想用清楚、好看的粗體 sans-serif 字型:
     - 先用 Typeface 找系統現有 → 仍不滿意     - 先用 Typeface 找系統現有 → 仍不滿意
-    - → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到↓<code css>+    - → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到一個字型並下載安裝↓<code css>
     font-family: "ArmWrestler", "ArmWrestler";</code>     font-family: "ArmWrestler", "ArmWrestler";</code>
-      * ⭐順便還把該網頁用 [[mao>save-to-notion|Save to Notion]] 收集到 [[https://www.notion.so/9d9d90b0174f47cc82df48abf4828ad8?v=1b57d4c9219a40fea030ada39ec69493|Notion「字型」資料庫]]中,還把字型縮圖弄成 gallery showcase ;)+      * ⭐順便還把該字型網頁用 [[mao>save-to-notion|Save to Notion]] 收集到 [[https://www.notion.so/9d9d90b0174f47cc82df48abf4828ad8?v=1b57d4c9219a40fea030ada39ec69493|Notion「字型」資料庫]]中,還把字型縮圖弄成 gallery showcase ;)
   - 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色,以便分類 ← 我本來抱怨太麻煩,否決掉((大膽,不要命了 XD))\\ 後來想到,只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好,那 HTML 編輯方式很簡單,一樣用 regex 搜出同韻的各行,再把該韻加上 class 即可   - 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色,以便分類 ← 我本來抱怨太麻煩,否決掉((大膽,不要命了 XD))\\ 後來想到,只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好,那 HTML 編輯方式很簡單,一樣用 regex 搜出同韻的各行,再把該韻加上 class 即可
     - 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的     - 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的
行 38: 行 38:
 } }
 </code> </code>
 +  * 學到試試 ''body#container'' 然後<code css>
 +#container {
 +  width: 21cm;
 +}
 +</code>效果是從 BlueGriffon 的尺規可以直接看出頁寬範圍,再來調 width(([[https://stackoverflow.com/questions/4023192/div-width-in-cm-inch|css - Div width in cm (inch) - Stack Overflow]]。但仔細看,它好像沒有要教我把整個 body 當成 21 cm……只是我看到 21cm 就以為它是要用在整張紙 XD))
 +  * 後來改為 ''width: 3cm'',感覺還是蠻寬的,不過有讓一行多放一張卡片,也減少留白了
 +  * 不過列印時有超出去邊界 → 再學到在列印 dialog 中設定 fit content to page width(([[g>macos+print+to+pdf+actual+size|macos print to pdf actual size]]\\ [[g>macos+print+pdf+decrease+padding]]\\ [[https://www.free-power-point-templates.com/articles/borderless-pdf-presentation-printing-on-a-mac/|Borderless PDF Presentation Printing on a Mac]]。另外也順便學到設定無邊界的紙張,但目前只有在 PowerPoint 中看到滿版效果,在 Firefox 中不管怎樣都還是會有白邊,需要再研究))
 </div> </div>
  
 {{tag>blogged published HTML CSS "Sublime Text" EmEditor regex}} {{tag>blogged published HTML CSS "Sublime Text" EmEditor regex}}