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

技術拆解/,（⭐ = 技術點）,/：
  - [[web-designing:bluegriffon]] = __HTML 編輯器__，自不待言
    - 先把 100 多個字串打好（共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的，但我打字很快就打完了 XD）
    - 打完字後用 Sublime Text regex 全部轉成 ``div.card``⭐，就丟到 BlueGriffon 裡開始設定 CSS：<code css>
.card {
  float: left;
  border: 1px dotted #cccccc;
  padding: 1em;
  text-align: center;
  font-size: 1cm;
  letter-spacing: 0.1em; /*這行較特別*/
</code>
  - 想用清楚、好看的粗體 sans-serif 字型：
    - 先用 Typeface 找系統現有 → 仍不滿意
    - → 上 FontSquirrel 很快就從 ``Bold`` 標籤中找到一個字型並下載安裝↓<code css>
    font-family: "ArmWrestler", "ArmWrestler";</code>
      * ⭐順便還把該字型網頁用 [[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 即可
    - 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的
    - <div tip>後來想到用以前的 EmEditor 巨集腳本功能加速 ⭐((Sublime Text 自己的 RegReplace package 太麻煩了，我不喜歡))
  - 搭配試算表迅速製作 22 行取代模式（Sublime Text 弄出 22 行 TSV 的過程也運用 regex）
  - 用很久以前就做的「草稿 → .jsee」腳本一擊轉換為 EmEditor 新腳本((EmEditor 得開 Windows 虛擬機來用))
  - → 承上的新腳本@字卡 HTML 檔 → 一次搞定把 100 多行都依 22 種韻尾加上不同的 class
  - CSS 也需要類似的 22 行，但 color 各不相同：
    - 一樣用 Sublime Text 轉換 TSV 到試算表打稿
    - 需要 22 種隨機且偏深的色碼 → 找了一下產生器，找到這個：[[https://www.crispedge.com/random-colors/|Random Color Generator (Hex color codes with color names)]] 有提供不同色系的選擇，包括暗色⭐((至於這個無法分辨深淺就先不用：[[https://www.randomlists.com/random-color?qty=22|Random Color Generator — with color name and hex]]))
    - ↑把上述色碼貼到試算表 22 行後就可以弄回 Sublime Text 完成 CSS
</div>

待解決：
<div issue>列印時直接變為 A4 分頁、大小理想的字卡樣式
待研究 FIXME
  - <code css>
  width: 4.8cm;
}
</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>

{{tag>blogged published HTML CSS "Sublime Text" EmEditor regex}}