itaiji-web

IVS（Variation Selector）入りの文章を置換せずに表示保証するための軽量ライブラリです。
IVS文字列の変換や書き換えは行わず、IVS入りテキストを壊さずに表示することを主眼にしています。

概要

• 既にIVSが含まれている文章を検出し、表示に適したフォントを誘導します。
• DOMの内容は改変せず、表示の安定にフォーカスしています。
• SPAにも対応可能（observe オプション）。

使い方

1) CSSを読み込む

assets/css/itaiji-web.css を読み込みます。

<link rel="stylesheet" href="./assets/css/itaiji-web.css" />

2) JSを読み込む

dist/itaiji-web.min.js を読み込みます。

<script src="./dist/itaiji-web.min.js"></script>

3) 対象要素にクラスを付与

• IVS入りテキストのみを対象にする場合は class="itaiji-web"
• その要素の全文字をIVS対応フォント寄りにしたい場合は class="itaiji-web-all"

<div class="itaiji-web">…IVS入りテキスト…</div>

4) 初期化

<script>
  window.initItaijiWeb({
    mode: "ivs-only",
    autoForceWhenVS: true,
    forceClass: "itaiji-web-all",
    observe: false
  });
</script>

examples/index.html について

examples/index.html は最小構成の動作例です。

• CSSとJSを相対パスで読み込みます
• initItaijiWeb() の基本的な呼び出し例を含みます

デモ

• 公開デモ（bloom 環境）: https://bloom.amaranthus.tech/itaiji-web/

ローカルでも簡単に確認できます。

ローカルでの確認手順

npm run build
python -m http.server 8000 --directory .

ブラウザで http://localhost:8000/examples/ を開き、葛󠄀飾 / 渡邉󠄀 / 邉󠄚 を入力して、
IVSの直前の文字のみが赤く強調され、IVSを持っている書体(フォント)に寄ることを確認してください。

フォントについて（重要）

このリポジトリはフォントを同梱しません。
assets/fonts/ には .gitkeep のみを配置し、フォントファイルは利用者が用意してください。

• IVSに対応した書体(フォント)を利用する場合は、各フォントの公式配布元から取得してください（ライセンス条件に従ってください）。
• 特定の書体に固定する意図はなく、環境に合ったIVS対応の書体を選んで利用してください。

assets/css/itaiji-web.css は以下の前提で書かれています：

• assets/fonts/ipamjm.woff2 / assets/fonts/ipamjm.woff が存在する場合に読み込む
• 存在しない場合はシステムフォントにフォールバック

WOFF2推奨・キャッシュ推奨

WOFF2を推奨

WOFF2は圧縮効率が高いため、可能であればWOFF2を優先してください。

Cache-Control 例

フォントは長期キャッシュ推奨です。

Cache-Control: public, max-age=31536000, immutable

preload 例

<link rel="preload" href="/assets/fonts/ipamjm.woff2" as="font" type="font/woff2" crossorigin>

ライセンス注意（フォント）

• IPAフォントライセンスは再配布・派生物に関する条件があります。
• フォントを同梱・配布する場合は、ライセンス文書の同梱・表記などの条件を満たす必要があります。
• そのため、本リポジトリはフォントを同梱せず、利用者自身で用意する運用を推奨します。

公開前チェックリスト

• npm run build が成功する
• examples/index.html が動作する（CSS/JSのパス確認）
• assets/fonts/ に利用者が用意したフォントが配置されている（必要な場合）

ライセンス（コード）

MIT License