漢字を確認するためのツールを作った
手書きの機会が増え、漢字を書けなくなってきていたので、漢字を細かく確認するためのツールを作った。
↑ のページを開くと、画面いっぱいにキャレット (カーソル) が表示されているはずだ。コレは画面いっぱいにテキストボックスが表示されている状態で、このまま任意の漢字を入力すると、画面いっぱいに文字が表示されて、漢字の構成を確認しやすくなっている。
↑ コチラでソースを確認いただける。HTML はテキストボックスのみ。CSS は画面いっぱいにテキストボックスを広げて表示しているのみ。ちなみにフォントは Noto Sans Mono CJK JP を使うようにしている。
JS 側では、画面いっぱいにフォントサイズを拡大するための計算をしている。window.innerWidth と window.innerHeight で、ページの表示領域のサイズが取得できる。入力される文字数が1・2文字で、画面の高さいっぱいにフォントサイズを拡大できる場合は、window.innerHeight と同値のフォントサイズに指定している。
一方、入力文字数が10文字とかある状態では、文字が見切れてしまわないように、window.innerWidth を文字数で割って、1文字あたりのフォントサイズを算出している。この時、半角文字は 0.5 文字、全角文字は 1 文字と計算することで、全角半角混在の文字列でも画面の幅いっぱいに、かつ見切れないようにフォントサイズを調整できている。
ということで、JS のコード全量は以下のとおり。
document.addEventListener('DOMContentLoaded', () => {
const calcCharacterLength = text => text.split('').reduce((length, character) => {
const charCode = character.charCodeAt();
if(Number.isNaN(charCode)) return length;
const isHalfWidthCharacter = (charCode >= 0x0 && charCode <= 0x7f); // 半角文字 … 判定これで十分なのかな
return length + (isHalfWidthCharacter ? 0.5 : 1);
}, 0);
const element = document.getElementById('text');
const calcFontSize = () => {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 入力された文字列から「文字の長さ」を算出する・半角1文字は 0.5・全角1文字は 1 で返す
const textLength = calcCharacterLength(element.value);
// 最低 16px・ウィンドウの高さまで文字サイズを広げるか、1行に収まる範囲でウィンドウ幅から文字サイズを算出する
const fontSize = Math.max(Math.min(Math.floor(windowWidth / textLength), windowHeight), 16);
element.style.fontSize = `${fontSize}px`;
};
calcFontSize();
window.addEventListener('resize', calcFontSize);
element.addEventListener('input', calcFontSize);
element.focus();
});
reduce や Math.max()・Math.min() をうまく使えていると思う。また、addEventListener('input') がとても便利だ。
ついでに HTML と CSS もバックアップがてら掲載しておこう。
<input type="text" id="text" value="">
@font-face {
font-family: "Noto Sans Mono CJK JP";
src: local("NotoSansMonoCJKjp-Regular"),
local("Noto Sans Mono CJK JP Regular"),
local("Noto Sans Mono CJK JP");
font-display: swap;
}
@font-face {
font-family: "Noto Sans Mono CJK JP Web";
src: url("https://cdn.jsdelivr.net/npm/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/npm/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff") format("woff"),
url("https://cdn.jsdelivr.net/npm/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf") format("opentype"),
url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf") format("opentype"),
url("https://cdn.jsdelivr.net/npm/@japanese-monospaced-fonts/noto-sans-mono-cjk-jp@1.0.1/NotoSansMonoCJKJP-Regular.otf") format("opentype"),
url("https://unpkg.com/@japanese-monospaced-fonts/noto-sans-mono-cjk-jp@1.0.1/NotoSansMonoCJKJP-Regular.otf") format("opentype");
font-display: swap;
}
html,
body,
#text {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
color: #000;
font-size: 16px;
font-family: "Noto Sans Mono CJK JP", "Noto Sans Mono CJK JP Web", Osaka-mono, "MS Gothic", Menlo, Consolas, Courier, "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
text-align: center;
line-height: 1;
background: #fff;
caret-color: #069;
}
以上。
