Add character catalog page

irori · Sep 4, 2024 · 0b906c8 · 0b906c8
1 parent 4f2591a
commit 0b906c8
Show file tree

Hide file tree

Showing 6 changed files with 227 additions and 1 deletion.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -27,6 +27,7 @@ jobs:
         ./build.sh otf woff2
         cp dist/*.woff2 site/
         pyftsubset dist/wapuro-mincho.woff2 --text-file=site/index.html --output-file=site/wapuro-mincho.subset.woff2 --flavor=woff2
+        python src/catalog.py >site/catalog.html
 
     - name: Upload artifacts
       uses: actions/upload-artifact@v4

diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 .venv/
 dist/*.otf
 dist/*.woff2
+site/catalog.html
diff --git a/site/catalog.js b/site/catalog.js
@@ -0,0 +1,35 @@
+const $ = document.querySelector.bind(document);
+
+const popup = $('#popup');
+
+document.addEventListener('click', (event) => {
+    if (popup.classList.contains('show')) {
+        popup.classList.remove('show');
+    }
+    const target = event.target;
+    if (target.tagName !== 'TD' || target.classList.contains('blank')) return;
+    const text = target.textContent;
+    const unicode = [...text].map((c) =>
+        `U+${c.codePointAt(0).toString(16).padStart(4, 0).toUpperCase()}`).join(' ');
+    $('#popup-glyph').textContent = text;
+    document.getElementById('popup-info-jis').textContent = target.dataset.jis;
+    document.getElementById('popup-info-unicode').textContent = unicode;
+    popup.classList.add('show');
+    popup.style.top = event.pageY - popup.offsetHeight / 2 + 'px';
+    popup.style.left = event.pageX - popup.offsetWidth / 2 + 'px';
+    $('#copy-icon').hidden = false;
+    $('#copied-icon').hidden = true;
+});
+
+document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+        popup.classList.remove('show');
+    }
+});
+
+$('#copy-button').addEventListener('click', async (event) => {
+    event.stopPropagation();
+    await navigator.clipboard.writeText($('#popup-glyph').textContent);
+    $('#copy-icon').hidden = true;
+    $('#copied-icon').hidden = false;
+});
diff --git a/site/index.html b/site/index.html
@@ -70,7 +70,8 @@ <h2>試し書き</h2>
 </div>
 
 <h2>収録文字</h2>
-<p>JIS X 0213:2004の第1〜第3水準漢字と非漢字 8,797字のうち、<a href="http://glyphwiki.org/wiki/Group:JISX0213%E5%90%88%E6%88%90%E6%96%87%E5%AD%97">単一のUnicodeコードポイントで表せない25字</a>を除いた計8,772字を収録しています。</p>
+<p>JIS X 0213:2004が規定する第1〜第4水準漢字と非漢字、全11,233字を収録しています。</p>
+<p><a href="catalog.html">収録文字一覧</a></p>
 <p>縦書きにも対応しています。また、当時のワープロ文書でよく使われていた縦倍角・横倍角バージョンも付属しています。</p>
 
 <h2>ライセンス</h2>

diff --git a/src/catalog.py b/src/catalog.py
@@ -0,0 +1,23 @@
+from jinja2 import Environment, FileSystemLoader
+from jisx0213 import JISX0213
+
+codeconv = JISX0213()
+tables = []
+for plane in range(1, 3):
+    for row in range(1, 95):
+        # plane 2 has only characters in rows 1, 3–5, 8, 12–15, 78–94.
+        if plane == 2 and row not in (1, *range(3, 6), 8, *range(12, 16), *range(78, 95)):
+            continue
+        t = [None] * 100
+        for cell in range(1, 95):
+            cp = (plane - 1) * 0x8080 | (row + 0x20) << 8 | (cell + 0x20)
+            u = codeconv.unicode(cp)
+            t[cell] = u
+        tables.append({ 'plane': plane, 'row': row, 'table': t })
+
+env = Environment(loader=FileSystemLoader('templates'))
+env.trim_blocks = True
+env.lstrip_blocks = True
+template = env.get_template('catalog.html')
+content = template.render(char_table=tables)
+print(content)
diff --git a/templates/catalog.html b/templates/catalog.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>ワープロ明朝 収録文字一覧</title>
+  <style>
+    body {
+      background-color: #fafafa;
+      max-width: 640px;
+      margin: 0 auto 10rem;
+    }
+    @font-face {
+      font-family: "ワープロ明朝";
+      src: url("wapuro-mincho.woff2") format("woff2");
+    }
+    table {
+      border-collapse: collapse;
+      margin-top: 2rem;
+    }
+    th {
+      border: solid 1px;
+      background-color: #eee;
+      &.plane {
+        width: 2em;
+      }
+      &.row {
+        width: 2em;
+      }
+      &.col {
+        width: 2em;
+      }
+    }
+    td {
+      font-family: "ワープロ明朝";
+      font-size: 24px;
+      width: 2em;
+      height: 2em;
+      text-align: center;
+      border: solid 1px;
+      &.blank {
+        background-color: #ddd;
+      }
+    }
+    #popup {
+      border: 1px solid #000;
+      background-color: #fff;
+      position: absolute;
+      display: none;
+      &.show {
+        display: block;
+      }
+    }
+    #popup-glyph {
+      font-family: "ワープロ明朝";
+      font-size: 120px;
+      width: 10rem;
+      height: 10rem;
+      line-height: 10rem;
+      text-align: center;
+    }
+    .popup-info {
+      margin-left: 0.5rem;
+    }
+    #copy-button {
+      position: absolute;
+      right: 0.5rem;
+      top: 9.3rem;
+      background-color: #fff;
+      border: none;
+      #copy-icon {
+        color: #33f;
+      }
+      #copied-icon {
+        color: #ccc;
+      }
+    }
+
+    .tooltip {
+      position: relative;
+      cursor: pointer;
+    }
+    .tooltip-text {
+      opacity: 0;
+      visibility: hidden;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -30px;
+      display: inline-block;
+      padding: 5px;
+      white-space: nowrap;
+      font-size: 0.8rem;
+      line-height: 1.3;
+      background: #333;
+      color: #fff;
+      border-radius: 3px;
+      transition: 0.3s ease-in;
+    }
+    .tooltip:hover .tooltip-text {
+      opacity: 1;
+      visibility: visible;
+    }
+  </style>
+</head>
+<body>
+  <h1>ワープロ明朝 収録文字一覧</h1>
+  <p><a href="index.html">トップページへ戻る</a></p>
+  {% for tbl in char_table %}
+    <table>
+      <tr>
+        <th scope="col">面</th>
+        <th scope="col">区</th>
+        <th scope="col">点</th>
+        {% for i in range(10) %}
+          <th scope="col">{{ i }}</th>
+        {% endfor %}
+      </tr>
+      {% for y in range(10) %}
+        <tr>
+          {% if y == 0 %}
+            <th scope="row" rowspan="10" class="plane">{{ tbl.plane }}</th>
+            <th scope="row" rowspan="10" class="row">{{ tbl.row }}</th>
+          {% endif %}
+          <th scope="row" class="col">{{ y }}0</th>
+          {% for x in range(10) %}
+            {% if tbl.table[y * 10 + x] is none %}
+              <td class="blank"></td>
+            {% else %}
+              <td data-jis="{{ tbl.plane }}-{{ tbl.row }}-{{ y * 10 + x }}">{{ tbl.table[y * 10 + x] }}</td>
+            {% endif %}
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </table>
+  {% endfor %}
+  <div id="popup">
+    <div id="popup-glyph"></div>
+    <button id="copy-button" class="tooltip">
+      <span id="copy-icon">
+        <span class="tooltip-text">コピー</span>
+        <!-- https://tabler.io/icons/icon/clipboard -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+          <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+        </svg>
+      </span>
+      <span id="copied-icon" hidden>
+        <span class="tooltip-text">コピーしました</span>
+        <!-- https://tabler.io/icons/icon/clipboard-check -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard-check">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+          <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+          <path d="M9 14l2 2l4 -4" />
+        </svg>
+      </span>
+    </button>
+    <div class="popup-info">JIS: <span id="popup-info-jis"></span></div>
+    <div class="popup-info">Unicode: <span id="popup-info-unicode"></span></div>
+  </div>
+  <script src="catalog.js" async></script>
+</body>
+</html>