技術資料 / Formulix 0.1.0
HTML と表示
保存した教材をエディターの外でも、契約終了後も読める形式に保ちます。
保存形式
| 項目 | 保存する HTML | 保持する情報 |
|---|---|---|
| 数式 | <math data-latex="…"> | 閲覧用 MathML と再編集用 data-latex |
| 筆算・解法 | div.conta-armada、表、文章、MathML | data-conta の JSON（存在する場合）、インラインスタイルと構造 |
| グラフ・図 | PNG の <img> | src、alt、寸法、data-grafico または data-quimica |
| 化学式 | <math data-quimica="…"> | MathML、LaTeX、設定 JSON |
| CKEditor / Tiptap | span/div[data-formulix] | ラッパーと安全化した子要素。Tiptap は JSON も可 |
TinyMCE の編集中は .eqx[data-mathml] を使い、保存時にポータブルな MathML へ変換します。一時的な編集要素と保存形式を混同しないでください。TinyMCE 8 のサニタイザーは semantics/annotation を除去するため、LaTeX は data-latex に保持します。
<math xmlns="http://www.w3.org/1998/Math/MathML" data-latex="x^2">
<msup><mi>x</mi><mn>2</mn></msup>
</math>児童・生徒への表示
プラットフォームの安全な処理で HTML を表示します。MathML 対応ブラウザーでは数式を表示でき、表と画像の閲覧に Formulix は不要です。PNG は継続してアクセスできるストレージに置きます。メタデータを削除すると見た目が残っても再編集できなくなる場合があります。
古いブラウザー向けには MathJax 3 を推奨しています。自前で配信するか、次の外部 CDN の例を使用します。MathJax 3 公式ガイドを参照し、第三者への通信に関する CSP とプライバシーを評価してください。
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>動的に追加した内容には、MathJax の準備後に MathJax.typesetPromise([element]) を呼び出します。児童・生徒用ページに Formulix を読み込む必要はありません。
サニタイズとアクセシビリティ
必要な要素・属性のみ明示的に許可し、信頼できない HTML のサニタイズを無効にしないでください。保存と再開で MathML、表、スタイル、メタデータを確認します。Drupal alpha の Full HTML 制限も参照してください。画像の代替テキストを保持します。MathML があっても、学校で使うエディター・ブラウザー・スクリーンリーダーでの確認は必要です。