@drghaliasri/butex 4.3.0 → 4.4.0

package/README.md

@@ -118,6 +118,30 @@ Use this when you only need to render LaTeX strings:
 
 This mode does not require the GUI editor runtime.
 
+### Host CSS resets (Tailwind Preflight and similar)
+
+MathJax renders SVG equations as inline `<svg>` elements, and MathJax 4's inline
+line-breaking can emit one equation as **several sibling `<svg>` chunks**. Global
+CSS resets that declare `svg { display: block }` (e.g. **Tailwind Preflight**)
+stack those chunks vertically, so equations render one term per line.
+
+BuTeX's injected styles guard against this with:
+
+```css
+mjx-container svg {
+  display: inline;
+}
+```
+
+The guard ships in both `injectBuTeXStyles()` (`BUTEX_CHROME_CSS`) and
+`injectBuTeXDocument2Styles()` (`DOCUMENT2_WIDGET_CSS`), so make sure the host
+calls at least one of them (or embeds the CSS constants). If your app injects
+neither and you see stacked/wrapped equations under Tailwind, add the rule above
+to your global stylesheet after the reset.
+
+Also pin the MathJax version the host loads (e.g. `mathjax@4.1`) instead of a
+floating major tag, so CDN updates cannot change rendering behavior silently.
+
 ### 2) GUI editor contract (shippable editor UX)
 
 Use this when you want the same editor UX as the demo:

package/dist/index.global.js

@@ -101,6 +101,14 @@ ${BUTEX_TAKWEEN_FONT_FACE_CSS}
   var BUTEX_CHROME_CSS = `
 ${BUTEX_FONT_FACE_CSS}
 
+/* Guard against host CSS resets (e.g. Tailwind Preflight's \`svg { display: block }\`).
+ * MathJax relies on the browser default \`display: inline\` for its SVG output; with
+ * MathJax v4 inline line-breaking an equation can be emitted as several sibling
+ * <svg> chunks, and a block-level reset stacks them vertically. */
+mjx-container svg {
+  display: inline;
+}
+
 /* BuTeX: Arabic sqrt \u2014 outer mirror entire radical, inner unmirror index & radicand */
 mjx-container[jax="CHTML"] .mjx-rtl-mirror {
   transform: scaleX(-1);