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 中不管怎樣都還是會有白邊,需要再研究

討論區

輸入您的意見. 允許使用維基語法:
D J G T Q