MathML Demo: <mfrac> - fractions 编辑

MathML Background Image

1. Inline, auto, normal line $\frac{\sin \theta }{\pi }$, numerator and denominator should render script size.
2. Inline, display style, normal line ${\displaystyle \frac{\ln x}{y}}$, numerator and denominator should render normal size.
3. Inline, text style, normal line $\frac{\tan \theta }{67}$, numerator and denominator should render script size.
4. Inline, auto, thick line $\genfrac{}{}{1pt}{}{x^2+1}{x}$, the superscripted 2 should be script-script size.
5. Inline, display style, thick line ${\displaystyle \genfrac{}{}{1pt}{}{x-1}{0.98\times {10}^2+y}}$, the superscripted 2 should be script size.
6. Inline, text style, thick line ${\displaystyle \genfrac{}{}{1pt}{}{x^2+1}{x}}\genfrac{}{}{1pt}{}{x^2+1}{x}$ the end.
7. Inline, auto, no line $\genfrac{}{}{0ex}{}{x^2+1}{x}$ the end.
8. Inline, display style, no line ${\displaystyle \genfrac{}{}{0ex}{}{1.234567}{89+x}}$ the end.
9. Inline, text style, no line $\genfrac{}{}{0ex}{}{x^2+1}{x}$ the end.
10. Inline binomial, auto, no line $\left(\genfrac{}{}{0ex}{}{5}{8}\right)$ the end.
11. Inline binomial, display style, no line $\left({\displaystyle \genfrac{}{}{0ex}{}{n-k}{n}}\right)$ the end.
12. Inline binomial, text style, no line $\left(\genfrac{}{}{0ex}{}{\log x}{y}\right)$ the end.
13. Inline built-in verts, auto, no line $\left|\genfrac{}{}{0ex}{}{\sin \theta }{M}\right|$ the end.
14. Inline up arrows, display style, no line $\uparrow {\displaystyle \genfrac{}{}{0ex}{}{\sin \theta }{M}}\uparrow$ the end.
15. Inline down arrows, text style, no line $\downarrow \genfrac{}{}{0ex}{}{\sin \theta }{M}\downarrow$ the end.
16. Inline floor, auto, normal line $\lfloor \frac{\sin \theta }{M}\rfloor$ the end.
17. Inline ceiling, display style, normal line $\lceil {\displaystyle \frac{\sin \theta }{M}}\rceil$ the end.
18. Inline updown arrows, text style, normal line $\updownarrow \frac{\sin \theta }{M}\updownarrow$ the end.
19. Inline double up arrows, auto, thick line $\Uparrow \genfrac{}{}{1pt}{}{\sin \theta }{M}\Uparrow$ the end.
20. Inline double down arrows, display style, thick line $\Downarrow {\displaystyle \genfrac{}{}{1pt}{}{\sin \theta }{M}}\Downarrow$ the end.
21. Inline double up down arrows, text style, thick line $\Updownarrow \genfrac{}{}{1pt}{}{\sin \theta }{M}\Updownarrow$ the end.
22. Inline, styles auto, display and text $\frac{1}{2}-{\displaystyle \frac{1}{2}}+\frac{1.23456}{7890}$, the rendering should be script-size, normal-size and script-size in this example. Fraction lines should align vertically with the math axis.
23. The same expression $${\displaystyle \frac{1}{2}-{\displaystyle \frac{1}{2}}+\frac{1.23456}{7890}}$$ in a display.
24. Inline fenced nested fractions $\left[\frac{\parallel \frac{\sin \theta +1}{11}\parallel -x}{\frac{x^2}{a_1}}\right]+[1.0]$ etc.
25. The same expression $${\displaystyle \left[\frac{\parallel \frac{\sin \theta +1}{11}\parallel -x}{\frac{x^2}{a_1}}\right]+[1.0]}$$ in a display.
26. LaTeX renders continued fractions ${\displaystyle \frac{1}{\sqrt{2}+{\displaystyle \frac{1}{\sqrt{3}+{\displaystyle \frac{1}{\sqrt{4}+{\displaystyle \frac{1}{\sqrt{5}+{\displaystyle \frac{1}{\sqrt{6}+\dots }}}}}}}}}}$ normal size at all levels in all contexts
27. $${\displaystyle \frac{1}{\sqrt{2}+{\displaystyle \frac{1}{\sqrt{3}+{\displaystyle \frac{1}{\sqrt{4}+{\displaystyle \frac{1}{\sqrt{5}+{\displaystyle \frac{1}{\sqrt{6}+\dots }}}}}}}}}}$$
28. Inline nested fracs $\frac{1^{\sqrt{6}}}{\sqrt{2}+\frac{1}{\sqrt{3}+\frac{1}{\sqrt{4}+\frac{1}{\sqrt{5}+\frac{1}{\sqrt{6}+\dots }}}}}$ are script size at the first level and decrease to script script size for all more nested levels.
29. Displayed nested fractions are normal size at the first level, $${\displaystyle \frac{1^{\sqrt{6}}}{\sqrt{2}+\frac{1}{\sqrt{3}+\frac{1}{\sqrt{4}+\frac{1}{\sqrt{5}+\frac{1}{\sqrt{6}+\dots }}}}}}$$script size at second level, and script-script size at all more nested levels.
30. $${\displaystyle \mathrm{HypergeomDist}\left(x;M,K,n\right)=\sum _{k=0}^x\frac{\left(\genfrac{}{}{0ex}{}{K}{k}\right)\left(\genfrac{}{}{0ex}{}{M-K}{n-k}\right)}{\left(\genfrac{}{}{0ex}{}{M}{n}\right)}}$$
31. Here's a display $${\displaystyle F\left(t,y\right)=\frac{\left(1,\frac{dy}{dt}\right)}{\parallel \left(1,\frac{dy}{dt}\right)\parallel }}$$ with some real math in it.
32. And this is an example where the bevelled attribute is set inside the radical $$\frac{y^2-t^2}{\sqrt{\raisebox{1ex}{$1$}\!\left/ \!\raisebox{-1ex}{$(1+{\left|y^2-t^2\right|}^2)$}\right.}}$$
33. And this shows a combination with a background image at a desired opacity

    HTML Content

    <div class="background"></div>
    <math display="block">
    <mrow>
    <msub>
    <mi>Z</mi>
    <mi>&alpha;</mi>
    </msub>
    <mrow>
    <mo>(</mo>
    <mi>f</mi>
    <mo>)</mo>
    </mrow>
    <mo>=</mo>
    
    <mfrac>
    <mn>1</mn>
    <mrow>
    <mn>2</mn>
    <mi>i</mi>
    <mo>&ThinSpace;</mo>
    <mi>cos</mi>
    <mo>(</mo>
    <mfrac>
    <mrow>
    <mi>&alpha;</mi>
    <mi>&pi;</mi>
    </mrow>
    <mn>2</mn>
    </mfrac>
    <mo>)</mo>
    </mrow>
    </mfrac>
    
    <mrow>
    <msub>
    <mo>&int;</mo>
    <mi>C</mi>
    </msub>
    <mfrac>
    <mrow>
    <mi>f</mi>
    <mo stretchy='false'>(</mo>
    <mi>i</mi>
    <mi>z</mi>
    <mo stretchy='false'>)</mo>
    <msup>
    <mrow>
    <mo>(</mo>
    <mo>-</mo>
    <mi>z</mi>
    <mo>)</mo>
    </mrow>
    <mi>&alpha;</mi>
    </msup>
    </mrow>
    <mrow>
    <msup>
    <mi>e</mi>
    <mrow>
    <mn>2</mn>
    <mi>&pi;</mi>
    <mi>z</mi>
    </mrow>
    </msup>
    <mo>-</mo>
    <mn>1</mn>
    </mrow>
    </mfrac>
    </mrow>
    <mi>d</mi>
    <mi>z</mi>
    </mrow>
    </math>

    CSS Content

    [class="background"] {
      background-image: url(https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/mozilla-banner.gif);
      opacity: 0.2;
      position: absolute;
      left: 0;
      width: 100%;
      height: 58px;
    }