文字の白抜きをやってくれるjsライブラリ作りました。

作り方は簡単です。

まずはこちらのコードを
shironuki.jsとして保存してください

    document.querySelectorAll('[shironuki-style]').forEach(el => {
      el.style.fontSize = '50px';
      el.style.color = el.style.color || 'white';

      const parts = el.getAttribute('shironuki-style').split('-');
      const styleType = parts[0];
      const thickness = parseInt(parts[1], 10);
      const colors = parts[2].split('|');

      let shadow;

      switch (styleType) {
        case 'simple':
          shadow = `${-thickness}px ${-thickness}px 0 ${colors[0]}, ${thickness}px ${-thickness}px 0 ${colors[0]}, ${-thickness}px ${thickness}px 0 ${colors[0]}, ${thickness}px ${thickness}px 0 ${colors[0]}`;
          break;
        case 'blur':
          shadow = `0 0 ${thickness}px ${colors[0]}`;
          break;
        case 'multi':
          shadow = colors.map((c, i) => `${i + 1}px ${i + 1}px 0 ${c}`).join(',');
          break;
        case 'glow':
          shadow = `0 0 ${thickness / 4}px ${colors[0]}, 0 0 ${thickness / 2}px ${colors[0]}, 0 0 ${thickness}px ${colors[0]}, 0 0 ${thickness * 1.5}px ${colors[0]}`;
          break;
        case 'dotted':
          shadow = `${thickness}px ${thickness}px 0 ${colors[0]}, -${thickness}px -${thickness}px 0 ${colors[0]}, ${thickness}px -${thickness}px 0 ${colors[0]}, -${thickness}px ${thickness}px 0 ${colors[0]}, 0px ${thickness * 2}px 0 ${colors[0]}, ${thickness * 2}px 0px 0 ${colors[0]}, -${thickness * 2}px 0px 0 ${colors[0]}, 0px -${thickness * 2}px 0 ${colors[0]}`;
          break;
        case 'elegant':
          shadow = `${thickness}px ${thickness}px ${thickness}px ${colors[0]}`;
          el.style.fontFamily = 'Times New Roman, serif';
          break;
        case 'bold':
          shadow = `${-thickness}px ${-thickness}px 0 ${colors[0]}, ${thickness}px ${-thickness}px 0 ${colors[0]}, ${-thickness}px ${thickness}px 0 ${colors[0]}, ${thickness}px ${thickness}px 0 ${colors[0]}`;
          el.style.fontWeight = 'bold';
          break;
        default:
          shadow = `1px 1px ${thickness}px ${colors[0]}`;
      }

      el.style.textShadow = shadow;
    });

そしてHTML側で<script src=”shironuki.js”></script>で呼び出してください。

そうすると
白抜きにしたい文字に対して、

なんと
<div shironuki-style=”glow-20-purple”>光る紫白抜き</div>
とhtmlの属性に 白抜きスタイル=”種類,太さ,色”と書くだけで白抜きができます。

実際に白抜きしたものがこれになります。

動的白抜き文字バリエーション（新しい統一ロジック）

シンプルな縁取り

太い縁取り

ぼかし縁取り

色付き縁取り（黄＋青）

多層縁取り（赤・青・黒）

グローエフェクト（赤）

グローエフェクト（青）

グローエフェクト（緑）

グローエフェクト（紫）

点状縁取り

信頼できる白抜き

エレガントな白抜き

かなり太字の白抜き

めちゃめちゃ簡単にできます。

白抜きの種別や色などどういう仕様かというと

shironuki-style="[スタイル]-[太さ]-[色]"

<div shironuki-style="simple-1-black">シンプル白抜き</div>

<div shironuki-style="multi-3-black|red|blue">多層白抜き</div>

<div shironuki-style="glow-20-red">光る赤白抜き</div>

<script src="shironuki.js"></script>