DioxusLabs / DioxusLabs/dioxus

Unable to render math via rsx! without dangerous_inner_html

Open
#3,352 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

**Problem**

Following the tutorial, I am able to render math in the following way:

```
#[component]
pub fn Hero() -> Element {

let contents = include_str!("output.html");

rsx! {
div { dangerous_inner_html: "{contents}" }
}
}
```

This yields the expected results on both desktop and web:
image

However, it's both more ergonomic and safer to work with the source directly. I tried `dx translate --file output.html` but it appears that the styles are not being properly parsed:

image

Using the generated RSX leads to a compilation error.

**Steps To Reproduce**

Steps to reproduce the behavior:

- Run the tutorial app with the above modifications and using following `output.html`:
```html

mjx-container[jax="CHTML"] {
line-height: 0;
}

mjx-container [space="1"] {
margin-left: .111em;
}

mjx-container [space="2"] {
margin-left: .167em;
}

mjx-container [space="3"] {
margin-left: .222em;
}

mjx-container [space="4"] {
margin-left: .278em;
}

mjx-container [space="5"] {
margin-left: .333em;
}

mjx-container [rspace="1"] {
margin-right: .111em;
}

mjx-container [rspace="2"] {
margin-right: .167em;
}

mjx-container [rspace="3"] {
margin-right: .222em;
}

mjx-container [rspace="4"] {
margin-right: .278em;
}

mjx-container [rspace="5"] {
margin-right: .333em;
}

mjx-container [size="s"] {
font-size: 70.7%;
}

mjx-container [size="ss"] {
font-size: 50%;
}

mjx-container [size="Tn"] {
font-size: 60%;
}

mjx-container [size="sm"] {
font-size: 85%;
}

mjx-container [size="lg"] {
font-size: 120%;
}

mjx-container [size="Lg"] {
font-size: 144%;
}

mjx-container [size="LG"] {
font-size: 173%;
}

mjx-container [size="hg"] {
font-size: 207%;
}

mjx-container [size="HG"] {
font-size: 249%;
}

mjx-container [width="full"] {
width: 100%;
}

mjx-box {
display: inline-block;
}

mjx-block {
display: block;
}

mjx-itable {
display: inline-table;
}

mjx-row {
display: table-row;
}

mjx-row > * {
display: table-cell;
}

mjx-mtext {
display: inline-block;
}

mjx-mstyle {
display: inline-block;
}

mjx-merror {
display: inline-block;
color: red;
background-color: yellow;
}

mjx-mphantom {
visibility: hidden;
}

_::-webkit-full-page-media, _:future, :root mjx-container {
will-change: opacity;
}

mjx-assistive-mml {
position: absolute !important;
top: 0px;
left: 0px;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0px 0px 0px !important;
border: 0px !important;
display: block !important;
width: auto !important;
overflow: hidden !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

mjx-assistive-mml[display="block"] {
width: 100% !important;
}

mjx-math {
display: inline-block;
text-align: left;
line-height: 0;
text-indent: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
font-size-adjust: none;
letter-spacing: normal;
border-collapse: collapse;
word-wrap: normal;
word-spacing: normal;
white-space: nowrap;
direction: ltr;
padding: 1px 0;
}

mjx-container[jax="CHTML"][display="true"] {
display: block;
text-align: center;
margin: 1em 0;
}

mjx-container[jax="CHTML"][display="true"][width="full"] {
display: flex;
}

mjx-container[jax="CHTML"][display="true"] mjx-math {
padding: 0;
}

mjx-container[jax="CHTML"][justify="left"] {
text-align: left;
}

mjx-container[jax="CHTML"][justify="right"] {
text-align: right;
}

mjx-msubsup {
display: inline-block;
text-align: left;
}

mjx-script {
display: inline-block;
padding-right: .05em;
padding-left: .033em;
}

mjx-script > mjx-spacer {
display: block;
}

mjx-mo {
display: inline-block;
text-align: left;
}

mjx-stretchy-h {
display: inline-table;
width: 100%;
}

mjx-stretchy-h > * {
display: table-cell;
width: 0;
}

mjx-stretchy-h > * > mjx-c {
display: inline-block;
transform: scalex(1.0000001);
}

mjx-stretchy-h > * > mjx-c::before {
display: inline-block;
width: initial;
}

mjx-stretchy-h > mjx-ext {
/* IE */ overflow: hidden;
/* others */ overflow: clip visible;
width: 100%;
}

mjx-stretchy-h > mjx-ext > mjx-c::before {
transform: scalex(500);
}

mjx-stretchy-h > mjx-ext > mjx-c {
width: 0;
}

mjx-stretchy-h > mjx-beg > mjx-c {
margin-right: -.1em;
}

mjx-stretchy-h > mjx-end > mjx-c {
margin-left: -.1em;
}

mjx-stretchy-v {
display: inline-block;
}

mjx-stretchy-v > * {
display: block;
}

mjx-stretchy-v > mjx-beg {
height: 0;
}

mjx-stretchy-v > mjx-end > mjx-c {
display: block;
}

mjx-stretchy-v > * > mjx-c {
transform: scaley(1.0000001);
transform-origin: left center;
overflow: hidden;
}

mjx-stretchy-v > mjx-ext {
display: block;
height: 100%;
box-sizing: border-box;
border: 0px solid transparent;
/* IE */ overflow: hidden;
/* others */ overflow: visible clip;
}

mjx-stretchy-v > mjx-ext > mjx-c::before {
width: initial;
box-sizing: border-box;
}

mjx-stretchy-v > mjx-ext > mjx-c {
transform: scaleY(500) translateY(.075em);
overflow: visible;
}

mjx-mark {
display: inline-block;
height: 0px;
}

mjx-c {
display: inline-block;
}

mjx-utext {
display: inline-block;
padding: .75em 0 .2em 0;
}

mjx-mi {
display: inline-block;
text-align: left;
}

mjx-c::before {
display: block;
width: 0;
}

.MJX-TEX {
font-family: MJXZERO, MJXTEX;
}

.TEX-B {
font-family: MJXZERO, MJXTEX-B;
}

.TEX-I {
font-family: MJXZERO, MJXTEX-I;
}

.TEX-MI {
font-family: MJXZERO, MJXTEX-MI;
}

.TEX-BI {
font-family: MJXZERO, MJXTEX-BI;
}

.TEX-S1 {
font-family: MJXZERO, MJXTEX-S1;
}

.TEX-S2 {
font-family: MJXZERO, MJXTEX-S2;
}

.TEX-S3 {
font-family: MJXZERO, MJXTEX-S3;
}

.TEX-S4 {
font-family: MJXZERO, MJXTEX-S4;
}

.TEX-A {
font-family: MJXZERO, MJXTEX-A;
}

.TEX-C {
font-family: MJXZERO, MJXTEX-C;
}

.TEX-CB {
font-family: MJXZERO, MJXTEX-CB;
}

.TEX-FR {
font-family: MJXZERO, MJXTEX-FR;
}

.TEX-FRB {
font-family: MJXZERO, MJXTEX-FRB;
}

.TEX-SS {
font-family: MJXZERO, MJXTEX-SS;
}

.TEX-SSB {
font-family: MJXZERO, MJXTEX-SSB;
}

.TEX-SSI {
font-family: MJXZERO, MJXTEX-SSI;
}

.TEX-SC {
font-family: MJXZERO, MJXTEX-SC;
}

.TEX-T {
font-family: MJXZERO, MJXTEX-T;
}

.TEX-V {
font-family: MJXZERO, MJXTEX-V;
}

.TEX-VB {
font-family: MJXZERO, MJXTEX-VB;
}

mjx-stretchy-v mjx-c, mjx-stretchy-h mjx-c {
font-family: MJXZERO, MJXTEX-S1, MJXTEX-S4, MJXTEX, MJXTEX-A ! important;
}

@font-face /* 0 */ {
font-family: MJXZERO;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Zero.woff") format("woff");
}

@font-face /* 1 */ {
font-family: MJXTEX;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff") format("woff");
}

@font-face /* 2 */ {
font-family: MJXTEX-B;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff") format("woff");
}

@font-face /* 3 */ {
font-family: MJXTEX-I;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff") format("woff");
}

@font-face /* 4 */ {
font-family: MJXTEX-MI;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff") format("woff");
}

@font-face /* 5 */ {
font-family: MJXTEX-BI;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff") format("woff");
}

@font-face /* 6 */ {
font-family: MJXTEX-S1;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff") format("woff");
}

@font-face /* 7 */ {
font-family: MJXTEX-S2;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff") format("woff");
}

@font-face /* 8 */ {
font-family: MJXTEX-S3;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff") format("woff");
}

@font-face /* 9 */ {
font-family: MJXTEX-S4;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff") format("woff");
}

@font-face /* 10 */ {
font-family: MJXTEX-A;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff") format("woff");
}

@font-face /* 11 */ {
font-family: MJXTEX-C;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff") format("woff");
}

@font-face /* 12 */ {
font-family: MJXTEX-CB;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff") format("woff");
}

@font-face /* 13 */ {
font-family: MJXTEX-FR;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff") format("woff");
}

@font-face /* 14 */ {
font-family: MJXTEX-FRB;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff") format("woff");
}

@font-face /* 15 */ {
font-family: MJXTEX-SS;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff") format("woff");
}

@font-face /* 16 */ {
font-family: MJXTEX-SSB;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff") format("woff");
}

@font-face /* 17 */ {
font-family: MJXTEX-SSI;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff") format("woff");
}

@font-face /* 18 */ {
font-family: MJXTEX-SC;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff") format("woff");
}

@font-face /* 19 */ {
font-family: MJXTEX-T;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff") format("woff");
}

@font-face /* 20 */ {
font-family: MJXTEX-V;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff") format("woff");
}

@font-face /* 21 */ {
font-family: MJXTEX-VB;
src: url("https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff") format("woff");
}

mjx-c.mjx-c222B.TEX-S1::before {
padding: 0.805em 0.61em 0.306em 0;
content: "\222B";
}

mjx-c.mjx-c1D44F.TEX-I::before {
padding: 0.694em 0.429em 0.011em 0;
content: "b";
}

mjx-c.mjx-c1D44E.TEX-I::before {
padding: 0.441em 0.529em 0.01em 0;
content: "a";
}

mjx-c.mjx-c1D453.TEX-I::before {
padding: 0.705em 0.55em 0.205em 0;
content: "f";
}

mjx-c.mjx-c28::before {
padding: 0.75em 0.389em 0.25em 0;
content: "(";
}

mjx-c.mjx-c1D465.TEX-I::before {
padding: 0.442em 0.572em 0.011em 0;
content: "x";
}

mjx-c.mjx-c29::before {
padding: 0.75em 0.389em 0.25em 0;
content: ")";
}


Some math: .

```
**Expected behavior**
`dx translate --file output.html` correctly parses the file and the resulting RSX code renders identically to using `dangerous_inner_html`.

**Screenshots**
See above.

**Environment:**
- Dioxus version: dioxus 0.6.0 (was built without git repository)
- Rust version: rustc 1.83.0 (90b35a623 2024-11-26)
- OS info: MacOS 14.6.1 (23G93)
- App platform: web, desktop

**Additional Information**
My notional pipeline looks something like `file_with_latex.html` -> (MathJax) -> `pure_html_and_css.html` -> (dx translate) -> App.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.