用 HTML 網頁製作小朋友英文練習字卡

巧皇后想幫兒子製作英文練習字卡，我主動爭取分憂解勞 不想用 Word 等微軟工具，本來想用 macOS Pages，後來想說先用 HTML 試試好了。

技術拆解_{（⭐ = 技術點）}：

1. bluegriffon = HTML 編輯器，自不待言
   1. 先把 100 多個字串打好（共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的，但我打字很快就打完了 ）
   2. 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐，就丟到 BlueGriffon 裡開始設定 CSS：

      .card {
        float: left;
        border: 1px dotted #cccccc;
        padding: 1em;
        text-align: center;
        font-size: 1cm;
        letter-spacing: 0.1em; /*這行較特別*/

2. 想用清楚、好看的粗體 sans-serif 字型：
   1. 先用 Typeface 找系統現有 → 仍不滿意
   2. → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到一個字型並下載安裝↓

          font-family: "ArmWrestler", "ArmWrestler";

      • ⭐順便還把該字型網頁用 Save to Notion 收集到 Notion「字型」資料庫中，還把字型縮圖弄成 gallery showcase
3. 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色，以便分類 ← 我本來抱怨太麻煩，否決掉¹⁾
   後來想到，只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好，那 HTML 編輯方式很簡單，一樣用 regex 搜出同韻的各行，再把該韻加上 class 即可
   1. 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的

   2. 後來想到用以前的 EmEditor 巨集腳本功能加速 ⭐²⁾

      1. 搭配試算表迅速製作 22 行取代模式（Sublime Text 弄出 22 行 TSV 的過程也運用 regex）
      2. 用很久以前就做的「草稿 → .jsee」腳本一擊轉換為 EmEditor 新腳本³⁾
      3. → 承上的新腳本@字卡 HTML 檔 → 一次搞定把 100 多行都依 22 種韻尾加上不同的 class
      4. CSS 也需要類似的 22 行，但 color 各不相同：
         1. 一樣用 Sublime Text 轉換 TSV 到試算表打稿
         2. 需要 22 種隨機且偏深的色碼 → 找了一下產生器，找到這個：Random Color Generator (Hex color codes with color names) 有提供不同色系的選擇，包括暗色⭐⁴⁾
         3. ↑把上述色碼貼到試算表 22 行後就可以弄回 Sublime Text 完成 CSS

待解決：

¹⁾

大膽，不要命了

²⁾

Sublime Text 自己的 RegReplace package 太麻煩了，我不喜歡

³⁾

EmEditor 得開 Windows 虛擬機來用

⁴⁾

至於這個無法分辨深淺就先不用：Random Color Generator — with color name and hex

⁵⁾

css - Div width in cm (inch) - Stack Overflow。但仔細看，它好像沒有要教我把整個 body 當成 21 cm……只是我看到 21cm 就以為它是要用在整張紙

⁶⁾

macos print to pdf actual size
macos+print+pdf+decrease+padding
Borderless PDF Presentation Printing on a Mac。另外也順便學到設定無邊界的紙張，但目前只有在 PowerPoint 中看到滿版效果，在 Firefox 中不管怎樣都還是會有白邊，需要再研究