SKAM Web Component Demo

1. 基本的な宣言的利用

<skam-renderer>
  <script type="application/vnd.berlysia.skam+xml">
    <?xml version="1.0" encoding="UTF-8"?>
    <skam:doc xmlns:skam="urn:skam:1"
              xml:lang="ja">
      <skam:body>
        <skam:block>
          <skam:kun yomi="まな"
                    okuri="ビテ">學</skam:kun>而
          ...
        </skam:block>
      </skam:body>
    </skam:doc>
  </script>
</skam-renderer>

2. 書字方向の切り替え

縦書き横書き

<skam-renderer writing-mode="vertical">
  ...
</skam-renderer>

// JS で切り替え
el.setAttribute('writing-mode', 'horizontal');

3. プロファイル切り替え

プロファイル:

<skam-renderer profile="learningBasic">
  ...
</skam-renderer>

// プリセット名 or JSON で指定
el.setAttribute('profile',
  '{"yomigana":true,"okurigana":false}');

4. CSS Variables でスタイルカスタマイズ

フォントサイズ: 1em 返り点色: ルビ色:

/* CSS Variables は Shadow DOM を貫通 */
skam-renderer {
  --skam-glyph-size: 2em;
  --skam-color-kaeriten: #c00;
  --skam-color-ruby: #06c;
}

5. プログラマティック操作

SKAM-ML を入力して適用

イベントログ

6. エラーハンドリング

// 不正な XML を渡すとエラー表示
<skam-renderer>
  <script type="application/vnd.berlysia.skam+xml">
    <invalid>not valid SKAM-ML
  </script>
</skam-renderer>

// skam-error イベントで検知可能
el.addEventListener('skam-error', (e) => {
  console.error(e.detail.error);
});