meta data for this page
  •  

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

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

技術拆解（⭐ = 技術點）：

  1. bluegriffon = HTML 編輯器，自不待言
    1. 先把 100 多個字串打好（共 22 種不同的韻尾。其實這步本來也可以用試算表輔助複製相同的韻尾來加速的，但我打字很快就打完了 XD）
    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";
  3. 巧皇后本來還交代希望「同韻」的單字要有相同的文字顏色，以便分類 ← 我本來抱怨太麻煩，否決掉1)
    後來想到，只要用把同韻的 card 都加上相同的 class 再用 CSS 賦予個別的文字 color 就好，那 HTML 編輯方式很簡單，一樣用 regex 搜出同韻的各行，再把該韻加上 class 即可
    1. 本來要用 Sublime Text 把 22 種韻尾取代 22 輪的

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

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

待解決：

列印時直接變為 A4 分頁、大小理想的字卡樣式
待研究 FIXME 

  1.   width: 4.8cm;
}
  • 學到試試 body#container 然後
    #container {
  width: 21cm;
}

    效果是從 BlueGriffon 的尺規可以直接看出頁寬範圍，再來調 width5)

  • 後來改為 width: 3cm，感覺還是蠻寬的，不過有讓一行多放一張卡片，也減少留白了
  • 不過列印時有超出去邊界 → 再學到在列印 dialog 中設定 fit content to page width6)
, , , , , ,
1)
大膽，不要命了 XD
2)
Sublime Text 自己的 RegReplace package 太麻煩了，我不喜歡
3)
EmEditor 得開 Windows 虛擬機來用
4)
至於這個無法分辨深淺就先不用：Random Color Generator — with color name and hex
5)
css - Div width in cm (inch) - Stack Overflow。但仔細看，它好像沒有要教我把整個 body 當成 21 cm……只是我看到 21cm 就以為它是要用在整張紙 XD
6)
macos print to pdf actual size
macos+print+pdf+decrease+padding
Borderless PDF Presentation Printing on a Mac。另外也順便學到設定無邊界的紙張，但目前只有在 PowerPoint 中看到滿版效果，在 Firefox 中不管怎樣都還是會有白邊，需要再研究

討論區

輸入您的意見. 允許使用維基語法:
L M A S E