HTML and display
Saved lesson content should stay readable outside the editor and without a subscription.
Persisted format
| Item | Saved HTML | What to preserve |
|---|---|---|
| Formula | <math data-latex="…">…</math> | MathML for reading and data-latex for editing again. |
| Calculation / worked solution | div.conta-armada, tables, text and MathML | data-conta JSON when present; inline styles and structure. |
| Graph / drawing | <img> with PNG | src, alt, dimensions and data-grafico or data-quimica. |
| Chemical formula | <math data-quimica="…"> | MathML, LaTeX and configuration JSON. |
| CKEditor / Tiptap | span/div[data-formulix] | Wrappers and sanitized children; Tiptap also supports JSON. |
During TinyMCE editing, the representation uses .eqx[data-mathml]; on saving, the adapter produces portable MathML. The temporary element is not the persisted format. LaTeX is stored in data-latex because TinyMCE 8’s sanitizer removes semantics/annotation. Attribute and class names are unchanged across languages.
<math xmlns="http://www.w3.org/1998/Math/MathML" data-latex="x^2">
<msup><mi>x</mi><mn>2</mn></msup>
</math>Display for students
Render saved HTML using your platform’s safe handling. Modern browsers display MathML; tables and images do not require Formulix for reading. PNGs must remain accessible in your platform’s storage. Removing metadata may preserve appearance while preventing further editing.
For older browsers, the project recommends MathJax 3. Self-host it or load the component below on the reading page, following the official MathJax 3 guide. This example uses an external CDN: review CSP and privacy when loading third-party resources.
<script defer
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>For dynamically added content, call MathJax.typesetPromise([element]) once MathJax is ready. Formulix does not need to be loaded on the student-facing page.
Sanitization and accessibility
Preserve only necessary elements and attributes through explicit sanitizer rules. Do not disable sanitization for untrusted HTML. Check MathML, tables, styles and metadata through a save/reopen cycle. Drupal alpha has a specific Full HTML restriction.
Keep image alternative text. MathML helps assistive technology but does not replace testing with the school’s editor, browser and screen reader.