From fd10f5cdc14c1f15427fd48655d55b9c6593e0ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Sat, 10 Sep 2022 08:39:39 +0200 Subject: [PATCH] Use EmbedLiveSample for all MathML examples Done: - Add live sample to show the result in the browser, replacing "rendering in your browser" for some examples. - Remove "sample rendering" for some examples, the only exception being `` which is not intended to be supported by browsers in the future, so it's still useful show how it was supposed to render. - Use display="block" for MathML examples, so they show up more "beautifully" (centered in their own line with optimization on readability). - Add a hidden link to math web font for some of them, to ensure that stretchy characters can display correctly. - Adjust indentation and spacing. - Other minimal tweaks of the examples (adding background to spacing elements, add click instruction to maction, split token element examples into multiple lines, fix one quote in ms example, ...) Rationale: - Makes examples a bit clearer and consistent. - All browsers are going to have MathML in the short future (or can already be enabled by a flag), using EmbedLiveSample is more convenient for maintenance of the wiki pages. --- .../en-us/web/mathml/element/maction/index.md | 57 ++++++++++-------- files/en-us/web/mathml/element/math/index.md | 9 +++ .../web/mathml/element/menclose/index.md | 4 +- .../en-us/web/mathml/element/mfenced/index.md | 22 ++++--- files/en-us/web/mathml/element/mi/index.md | 8 ++- files/en-us/web/mathml/element/mn/index.md | 12 +++- files/en-us/web/mathml/element/mo/index.md | 7 ++- files/en-us/web/mathml/element/mover/index.md | 13 ++-- .../en-us/web/mathml/element/mover/mover.png | Bin 1566 -> 0 bytes .../en-us/web/mathml/element/mpadded/index.md | 7 ++- .../web/mathml/element/mphantom/index.md | 8 +-- .../web/mathml/element/mphantom/mphantom.png | Bin 749 -> 0 bytes files/en-us/web/mathml/element/mroot/index.md | 13 ++-- .../en-us/web/mathml/element/mroot/mroot.png | Bin 1029 -> 0 bytes files/en-us/web/mathml/element/mrow/index.md | 38 +++++++----- files/en-us/web/mathml/element/ms/index.md | 8 +-- .../en-us/web/mathml/element/mspace/index.md | 11 ++-- files/en-us/web/mathml/element/msqrt/index.md | 13 ++-- .../en-us/web/mathml/element/msqrt/msqrt.png | Bin 846 -> 0 bytes .../en-us/web/mathml/element/mstyle/index.md | 21 ++++++- files/en-us/web/mathml/element/msub/index.md | 8 +-- files/en-us/web/mathml/element/msub/msub.png | Bin 605 -> 0 bytes .../en-us/web/mathml/element/msubsup/index.md | 8 +-- .../web/mathml/element/msubsup/msubsup.png | Bin 850 -> 0 bytes files/en-us/web/mathml/element/msup/index.md | 13 ++-- files/en-us/web/mathml/element/msup/msup.png | Bin 687 -> 0 bytes .../en-us/web/mathml/element/mtable/index.md | 6 +- .../web/mathml/element/mtable/mtable-1.png | Bin 1666 -> 0 bytes files/en-us/web/mathml/element/mtext/index.md | 6 +- .../en-us/web/mathml/element/munder/index.md | 13 ++-- .../web/mathml/element/munder/munder.png | Bin 1544 -> 0 bytes .../web/mathml/element/munderover/index.md | 26 +++++--- .../mathml/element/munderover/munderover.png | Bin 907 -> 0 bytes .../web/mathml/element/semantics/index.md | 4 +- 34 files changed, 223 insertions(+), 112 deletions(-) delete mode 100644 files/en-us/web/mathml/element/mover/mover.png delete mode 100644 files/en-us/web/mathml/element/mphantom/mphantom.png delete mode 100644 files/en-us/web/mathml/element/mroot/mroot.png delete mode 100644 files/en-us/web/mathml/element/msqrt/msqrt.png delete mode 100644 files/en-us/web/mathml/element/msub/msub.png delete mode 100644 files/en-us/web/mathml/element/msubsup/msubsup.png delete mode 100644 files/en-us/web/mathml/element/msup/msup.png delete mode 100644 files/en-us/web/mathml/element/mtable/mtable-1.png delete mode 100644 files/en-us/web/mathml/element/munder/munder.png delete mode 100644 files/en-us/web/mathml/element/munderover/munderover.png diff --git a/files/en-us/web/mathml/element/maction/index.md b/files/en-us/web/mathml/element/maction/index.md index 43ee2fc29604271..99eb5b0a0e97b21 100644 --- a/files/en-us/web/mathml/element/maction/index.md +++ b/files/en-us/web/mathml/element/maction/index.md @@ -35,34 +35,43 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web The following example uses the "toggle" `actiontype`: ```html - - - - 6 - 8 - - - - +

Try clicking this formula several times: + + + + + + + 6 + 8 + + + + + 3 + × + 2 + + + 4 + × + 2 + + + + 3 - × - 2 - - 4 - × - 2 - - - - - 3 - 4 - - - + + + + + +

``` +{{ EmbedLiveSample('maction_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/math/index.md b/files/en-us/web/mathml/element/math/index.md index 7c2eae2f26e7ad9..54a809304bac524 100644 --- a/files/en-us/web/mathml/element/math/index.md +++ b/files/en-us/web/mathml/element/math/index.md @@ -31,6 +31,13 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web This example contains two MathML formula. The first one is rendered in its own centered block, taking as much space as needed. The second one is rendered inside the paragraph of text, with reduced size and spacing in order to minimize its height. +```html hidden + +``` + ```html

The infinite sum @@ -70,6 +77,8 @@ This example contains two MathML formula. The first one is rendered in its own c

``` +{{ EmbedLiveSample('math_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/menclose/index.md b/files/en-us/web/mathml/element/menclose/index.md index de9535311e744e4..88307fb3f1a0af6 100644 --- a/files/en-us/web/mathml/element/menclose/index.md +++ b/files/en-us/web/mathml/element/menclose/index.md @@ -44,7 +44,7 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples ```html - + x + @@ -53,6 +53,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ``` +{{ EmbedLiveSample('menclose_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mfenced/index.md b/files/en-us/web/mathml/element/mfenced/index.md index e3e91e042620a03..f4d093e9b78da62 100644 --- a/files/en-us/web/mathml/element/mfenced/index.md +++ b/files/en-us/web/mathml/element/mfenced/index.md @@ -30,12 +30,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ### The last separator is repeated (`,`) -Sample rendering: ![{a;b;c,d,e}](mfenced01.png) - -Rendering in your browser: a b c d e - ```html - + a b @@ -46,14 +42,16 @@ Rendering in your browser: a< ``` -### All excess is ignored (`,`) +Sample rendering: ![{a;b;c,d,e}](mfenced01.png) -Sample rendering: ![[a|b|c|d|e]](mfenced02.png) +Rendering in your browser: -Rendering in your browser: a b c d e +{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }} + +### All excess is ignored (`,`) ```html - + a b @@ -64,6 +62,12 @@ Rendering in your browser: ``` +Sample rendering: ![[a|b|c|d|e]](mfenced02.png) + +Rendering in your browser: + +{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }} + ## Specifications The \ element is no longer part of the [latest MathML standard](https://github.com/w3c/mathml/issues/2). Use the {{MathMLElement("mrow")}} and {{MathMLElement("mo")}} elements instead, or, for backwards compatibility, see [mathml-polyfills/mfenced.](https://github.com/mathml-refresh/mathml-polyfills/tree/main/mfenced) diff --git a/files/en-us/web/mathml/element/mi/index.md b/files/en-us/web/mathml/element/mi/index.md index cfe607ab33b2943..88c6620a748531c 100644 --- a/files/en-us/web/mathml/element/mi/index.md +++ b/files/en-us/web/mathml/element/mi/index.md @@ -20,18 +20,24 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples ```html - + sin + + y + + F ``` +{{ EmbedLiveSample('mi_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mn/index.md b/files/en-us/web/mathml/element/mn/index.md index df7885bde606d38..61e2c4753688e53 100644 --- a/files/en-us/web/mathml/element/mn/index.md +++ b/files/en-us/web/mathml/element/mn/index.md @@ -20,19 +20,29 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples ```html - + 0 + + 1.337 + + twelve + + XVI + + 2e10 ``` +{{ EmbedLiveSample('mi_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mo/index.md b/files/en-us/web/mathml/element/mo/index.md index 1feade865be9371..7c20130e9a5d55b 100644 --- a/files/en-us/web/mathml/element/mo/index.md +++ b/files/en-us/web/mathml/element/mo/index.md @@ -58,16 +58,17 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples ```html - + 5 + 5 + + [ - 0 ; @@ -78,6 +79,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ``` +{{ EmbedLiveSample('mo_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mover/index.md b/files/en-us/web/mathml/element/mover/index.md index a2c43a061e08a52..1663d6abc7b32c9 100644 --- a/files/en-us/web/mathml/element/mover/index.md +++ b/files/en-us/web/mathml/element/mover/index.md @@ -23,12 +23,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples -Sample rendering: ![x+y+z](mover.png) - -Rendering in your browser: x+y+z⏞ +```html hidden + +``` ```html - + x @@ -42,6 +45,8 @@ Rendering in your browser: x+ ``` +{{ EmbedLiveSample('mover_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mover/mover.png b/files/en-us/web/mathml/element/mover/mover.png deleted file mode 100644 index 2e43600c0012dafbc692975f4d3cb508c6ef9ae4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1566 zcmV+(2I2XMP)Px#32;bRa{vGf6951U69E94oEQKA0{~D=R7L;)|KgW2 zs;a8p-QNHI{Qv+!u<-u?007n1)i^jf|Ns8}|Ns2|{{R3B|NiYf0RZ0m|Nr~x`TzeH z0R{j6_UZlq|Nr^Z_Wv>f07(b{6954J`{lv&|F~uz001>61_1rzoAmzw|N7j=_5T0> zD&g1F_5c6r;@{=0YXATH032ZM{{R2<%iY}BrO)n&%=Dt>{rcI8>a%rg9033FzyKL* z{_VH__|&$}?c(hC6l28y@wPNIH7P17z3%>SLpV4&K>hgd$FZwnZLT#pY3QzAL?Z@4 zo8a8@{r>jic*pWAPm9lGWE+>}6bp4fVOkL~pOH#j&F1ptY|?%v|(8Ywx~ z+1qD9IM&tGKrbK#5E^@CQc*iNVrh2T*44gT6GA^cajD`{OGb5RUUz-AsFQ+ZG&f3K zbI8up=+wR)6bW9I*g!-`Pg!K0o}QkZjpz0K$E=h2+nO;=b=BGG+pMLCTzQR`oMfHc zw2g0iFdnv#WAp3Py?I?md#9}B``)K_{qxz=_3>|fil()|iK4vSu#SIso9VG)=BZTs zgzRHiW6b)rxXzz=1@ros9eV z`pd+-foe)uoY`|$JDpHjnt){7$g*aKm-pMFVkrdm+_eE4I$3s+iGp7MA5NWA7lE+Y zK?*>a*qLSLp*p;z#(;8S2_}L4@Wv|zBw#KFB@_v*FG06L=j=edDq zm;enjh1Kowwor6@!;szkP`K_We5H#k079tgl5L#|01ATQvdI7d0;fqtK~zY`V_+Z- znB-)rF;Eq-giD#qP}fK^<7D}KMQWP(IaB3Z0q+}asu}1R9K@clXkyI%P>+XHy^iX- zwH!d8s>%Ta+Yau(BG1kqA;7>8Aj!_2ykliAT#iGPqZve1SC(>PbIG)Zx^i|X;Fn-W z0lXppAT=jXp$fC}vrEBLRQ0Udf@~hw>7BwTN>PmD^@jOZI@k?|k*Mkz7z8ha4Xn4d zDdPkI2m2aM2ymD(Jh;@0tv+(kPZXFdc8lXSQUP3iY1x5FwgY^R&*$+iLN*EZXJNqN*{ZFDWwzVWuL2U(Z4k-OGRc0~L$ESor zXSN-jZOH!)o*)FBn3$Ln;#3lW6q5x!ctr|SewzOiz^8<7kv`nT=I=kGrV&aZ-~azI z%HqbOL{nofytEK`o|P{3O8SO2ULzGGet!|bXKR2nEbugToqLpLCaHB(pBt}{I>ukU zxbYaNGk>u!lvxxFtoHe2QxB`*_jqhdwkV#kiIoK=^CeEJkev+e6FdHI)<+Uy!Wt6s2lWw|3KpHJhngdTOo{-bjLp0OS;{R6P(A QhyVZp07*qoM6N<$f<{aXK>z>% diff --git a/files/en-us/web/mathml/element/mpadded/index.md b/files/en-us/web/mathml/element/mpadded/index.md index 9a85f74acb80755..0cd0955b24cb202 100644 --- a/files/en-us/web/mathml/element/mpadded/index.md +++ b/files/en-us/web/mathml/element/mpadded/index.md @@ -35,8 +35,9 @@ It is possible to use the keywords `"depth`", `"height"`, and `"width"` as a pse ## Examples ```html - - + + x + y @@ -44,6 +45,8 @@ It is possible to use the keywords `"depth`", `"height"`, and `"width"` as a pse ``` +{{ EmbedLiveSample('mover_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mphantom/index.md b/files/en-us/web/mathml/element/mphantom/index.md index ac5c87e18c3d1ec..362b207934798cb 100644 --- a/files/en-us/web/mathml/element/mphantom/index.md +++ b/files/en-us/web/mathml/element/mphantom/index.md @@ -19,12 +19,8 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples -Sample rendering: ![x+ z](mphantom.png) - -Rendering in your browser: x+y+z - ```html - + x + @@ -37,6 +33,8 @@ Rendering in your browser: x+y< ``` +{{ EmbedLiveSample('mphantom_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mphantom/mphantom.png b/files/en-us/web/mathml/element/mphantom/mphantom.png deleted file mode 100644 index ec1d2d3ccf8e30542f4b48e724593a8fc64fb53f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 749 zcmVPx#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>Fb2F>)bTZ~y=Te@R3^R7l5T z_)ih|`(j<3sd?tX&;N%IU}2yL{Qvdx%ITAQ@BcCkA;84Iz`(%p=f#0pP1)Y6T#Vd~ zGw=UqVEFs?V3Vs9E1%P>2Y(obD){?&mKh@|kWSnC0UFQDB9@7@_8~?u6@1su-1aoa zWmn}gw&21%wf|cDOheVn|39AJ^T)Te*GpZ1or&?^`(ra!iB0Ks5@2LNO6UJxt#o2$ z;Be_`&F(q-RJUzWn_UPd?9H|6pKXdGX-hJzj)4to%|k!t9I#9M5bj!BG&_ zuRHT=_S&~iRA-0!0vUWc7%#-YV72J^UmRigahn$#VcSHKk9-+4(f#ksnU0vseQ*C_ zFSma_IeY611H;uF*S^I{@L=-|mr?EN)d@f0@%-=2&eE*8TqO&d&A1TdB9DqD#~{hn z|K9Cyoyb%)-9ZScTtWoM_bdI8nY{(73=E1@7k>~Jh=Vyl|NsC0_mfrGDRb}qL=}bm z{@cYV9k0?_(?T7^81C;n@#^oN=X;kPfA^1J=z^a&=hPl^Yl&Az%Z@Bh*JP!w;IP+! zcakAzfxRI2dv8;YSz9~nT5dA2g-vi8x;543Q%w==PrW;zfBY*h#Ec?$XNm(i1B*(` zqPvjf{O|3qR0Sqh#qc>dzYpEC{rC0u6ltgrrDE1R{r&&{&wI#JM0od fk`7tfu2QT3W~t38l?gk100000NkvXXu0mjfHxPS0 diff --git a/files/en-us/web/mathml/element/mroot/index.md b/files/en-us/web/mathml/element/mroot/index.md index d0f314abdbd9998..804e5d4fb04820d 100644 --- a/files/en-us/web/mathml/element/mroot/index.md +++ b/files/en-us/web/mathml/element/mroot/index.md @@ -19,12 +19,15 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples -Sample Rendering: ![x](mroot.png) - -Rendering in your browser: x 3 +```html hidden + +``` ```html - + x 3 @@ -32,6 +35,8 @@ Rendering in your browser: x 3 ``` +{{ EmbedLiveSample('mroot_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mroot/mroot.png b/files/en-us/web/mathml/element/mroot/mroot.png deleted file mode 100644 index 1b3dac3d468c616b9b73db6307c5e17c6f9296d4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1029 zcmV+g1p51lP)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>Fh0C~>0U+5i9pmq|oHR7l6I zm1|5>XBfx-GN?{$5h@@=97Vh_V}=`RnAzqU$P$q#!^~`=FdZgbMzqsJ2Z@SI23zMA zaSXF~Md#wYOy{y-g_1?6Qxfn-jR*#z)Iq7VrI&Mh&a)5Qx~`mB+;~2oy!pL(|Ci^0 zo^@RMA2+@Y|3gG@9~{(FWG;}3FiDzHc)FK)3X{37dPyt~4CNkQD&2ANu7%@9u2&?B zqVung`eiz9mdy=IJ2}8T?J*!C#&GA6jVB@^d)wB;7YbVaLPuMR;%2PAG|W>VsAqV~ zjnCE;pXp=$oqp1=HY)bRW=jCs;o)_j-Sh5(5Qya;|6*_np5^~IlMyc4)@G-1LWy{n zeMt9fRc0il>zm9%w)Y)+UGn1IPA82Y>K^X#DMi>~RoB=6FkSnS#qw_+vVl_<yyaM{*2oA)=?!SKBCVzwAauIaJr>hd>L)>bPEt9}~> z5fN)pmn{ti5=uK9g0>%iLy}Z+*C~{;9~94FN?P@&MPIa8|JDYa>6$7d@-Km7KhlmZ z6WjIG67j1CdIVp==qeWin4@g5{3AE|FCYE6(`0H_EfoQf<~I69)NyO)Jc*)S@2Bn7 z=G+M2wPW7fz@w?PwKx{Qv@9QoN3WI4mS*|2-J$z3RRn~+f5jpcen&@X0sv9^_Xe*^ zN7U=0V>W2a!btn=eeV^hHqQlQpLp5f)hOm(^&$Y1QV;gJJhq?943AgdunDiM_Rn*6 zG!0v>Zi)h4sq1yIdUbt^k^5Io*@v}q09dTL?~bag|Hzw?g?oH#XZubUEYIFjRi67! zxz@}RZ~Q4^3XqVuOSxgM*3A2KpBt!GgaAm~dCNgW?1QhDh*N5OZD+b_mW3iXG3VF= z_ltRBLw4Pd*cS9D{~JoymckeS)6$hIqGskbnTaL+< zG*M7udk&-kFYoVWY2u*74K~;8*9>z1kx737nfMNcl?>%^00000NkvXXu0mjf?I!K! diff --git a/files/en-us/web/mathml/element/mrow/index.md b/files/en-us/web/mathml/element/mrow/index.md index b4c1ba9d085c6e4..0eb7847eb712fdb 100644 --- a/files/en-us/web/mathml/element/mrow/index.md +++ b/files/en-us/web/mathml/element/mrow/index.md @@ -25,25 +25,35 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples ```html - - - 1 - + - 1 - - - - ( + + + + + 1 + + + K + - x - , - y + + 3 + + + ( + + + x + + + y + + ) + - ) - + ``` +{{ EmbedLiveSample('mrow_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/ms/index.md b/files/en-us/web/mathml/element/ms/index.md index afa9e8c9194cd5c..0157c92a702e08b 100644 --- a/files/en-us/web/mathml/element/ms/index.md +++ b/files/en-us/web/mathml/element/ms/index.md @@ -26,13 +26,13 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples ```html - - - abc - + + abc ``` +{{ EmbedLiveSample('ms_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mspace/index.md b/files/en-us/web/mathml/element/mspace/index.md index 138f571c4228e52..1b853ec7845f559 100644 --- a/files/en-us/web/mathml/element/mspace/index.md +++ b/files/en-us/web/mathml/element/mspace/index.md @@ -29,13 +29,16 @@ Note that some common attributes like `mathcolor`, `mathvariant` or `dir` have n ## Examples ```html - - - - + + 1 + + 2 ``` +{{ EmbedLiveSample('mspace_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msqrt/index.md b/files/en-us/web/mathml/element/msqrt/index.md index 68c1a9fbbf99350..a4b9960b396d118 100644 --- a/files/en-us/web/mathml/element/msqrt/index.md +++ b/files/en-us/web/mathml/element/msqrt/index.md @@ -19,18 +19,23 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa ## Examples -Sample rendering: ![root-x](msqrt.png) - -Rendering in your browser: x +```html hidden + +``` ```html - + x ``` +{{ EmbedLiveSample('mspace_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msqrt/msqrt.png b/files/en-us/web/mathml/element/msqrt/msqrt.png deleted file mode 100644 index 34f37885754fc0ffc6d8425aaf33315f385c8070..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 846 zcmV-U1F`&xP)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>FhP2SIann*aa;;7LS5R7l6I zm1{_oQ5eUcO2yJmrlw6&oOwZuNXx{evM~wNC^Lv^p=k+Xd?ueVm@g~(@wpjxuzdw&* zuuiq<5Oq+)$nEX)^~F7UL>(0GFAt`LT^}M4bx^GHoWB$2!P45TglZ(2o-XmV3KCHV zovG)#Gm}lV6Jw3S!t`k0m9Q%E#vqQ6VNzVkVcO7k31#z8Y*_TTL2kKWISeyIBX!~qMBxf@sFGmLsek_ z02}#z_?-69yF2ND=gqVeBTv(!<8w-j680BKlq4b*uVd^1d=d+INyQQ+X%>FtSPk12 z0DSYiFoX~>a4m!uDlpfM_X{E&z{ZzbJuvrTQc;)Uz1)^{@K&$R!bFjiul70sz}oCj zTBPqT2%xj?%Z=9lI19#fR>Wlhfa@{wxFpNVdEc8!68$$6shiW80N@zKi*;L**r-H^ z0w~h8pJvU?muJprEusdB^wN?b0Dyp^uX;ok6cMt@P=L)9g9M@uii{IYf(r43@gJG! Y2S@6J?uS~4OaK4?07*qoM6N<$f_3zX^8f$< diff --git a/files/en-us/web/mathml/element/mstyle/index.md b/files/en-us/web/mathml/element/mstyle/index.md index ac526beedd8dc2a..0c40da01db30bf7 100644 --- a/files/en-us/web/mathml/element/mstyle/index.md +++ b/files/en-us/web/mathml/element/mstyle/index.md @@ -36,11 +36,20 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples +### Attributes mapped to CSS + The following example uses [global attributes](/en-US/docs/Web/MathML/Global_attributes) `displaystyle` and `mathcolor` to respectively override the [`math-style`](/en-US/docs/Web/CSS/math-style) and [`color`](/en-US/docs/Web/CSS/color) of the `` and `` children: +```html hidden + +``` + ```html - - + + ∑ I @@ -58,10 +67,14 @@ The following example uses [global attributes](/en-US/docs/Web/MathML/Global_att ``` +{{ EmbedLiveSample('mstyle_example1', 700, 200, "", "") }} + +### Legacy script attributes + The following example shows a formula with [`font-size`](/en-US/docs/Web/CSS/font-size) set to `128pt`. It contains numbers that are placed in nested superscripts as well as an `` element with legacy attributes `scriptsizemultiplier` and `scriptminsize`. The `font-size` is multiplied by `0.5` when entering each superscript as long as that does not make it smaller than `16pt`. ```html - + 2 @@ -86,6 +99,8 @@ The following example shows a formula with [`font-size`](/en-US/docs/Web/CSS/fon ``` +{{ EmbedLiveSample('mstyle_example2', 700, 400, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msub/index.md b/files/en-us/web/mathml/element/msub/index.md index 0a84bfeca6dc34c..494400dda05e60c 100644 --- a/files/en-us/web/mathml/element/msub/index.md +++ b/files/en-us/web/mathml/element/msub/index.md @@ -21,12 +21,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples -Sample rendering: ![x1](msub.png) - -Rendering in your browser: X 1 - ```html - + X 1 @@ -34,6 +30,8 @@ Rendering in your browser: X 1 ``` +{{ EmbedLiveSample('msub_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msub/msub.png b/files/en-us/web/mathml/element/msub/msub.png deleted file mode 100644 index 6db4212feda3281529bbd93bd3e2fe5463d2e5e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 605 zcmV-j0;2tiP)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>ORu7c4~3Bme*b?@2^KR5;6} z(_KhYVHgMSe}2HEFA&lYn>qrMu_nZ#yI~NC89{m_5lWv#i8o!?s1ephSoA?P7!-`e zKoSE{Xb~bLR2NY+(56eRwn*csYmDR0dEb8*BlMhFb?ATf^6>uPd3bn0l4N?K_d<)? zhHT2~+iyNiXrx$r^Wgl!N&tY(eIzus%+81~k_StB%I zQhn=l0Lb@-;v!oS^TWrgN*nLRewAj-%=;@&0N5Fr(MYP3fjuSLIz|*h{vA`BzT*J^ z*VU-H`24K1WcRHJmAPWV)Z-y<0f4HbzWrqtZG&HR@}Du~+@ppf0Lb6b^*SX?U3mtq&kY@~t~nL{_VcSYbJqi4&92}_{f}5IjQKsbjZKCLGn3s; z0I2DTs5$ZMfN!520AO$S-yi*=kyNLLgO}Reh1nY`tvhk~;k%^F*|vqO!g=_QSjUut r00^MK5|qj4=;J`oxJ>Aw-mvWltE~Fg{iZ?S00000NkvXXu0mjfVZR&| diff --git a/files/en-us/web/mathml/element/msubsup/index.md b/files/en-us/web/mathml/element/msubsup/index.md index 942930377ed3e95..af555f0ac466a79 100644 --- a/files/en-us/web/mathml/element/msubsup/index.md +++ b/files/en-us/web/mathml/element/msubsup/index.md @@ -21,12 +21,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples -Sample rendering: ![x1](msubsup.png) - -Rendering in your browser: ∫01 - ```html - + ∫ 0 @@ -35,6 +31,8 @@ Rendering in your browser: ∫01 ``` +{{ EmbedLiveSample('msubsup_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msubsup/msubsup.png b/files/en-us/web/mathml/element/msubsup/msubsup.png deleted file mode 100644 index 7d9cb797293b88bb612d315e38743624febfbcac..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 850 zcmV-Y1FigtP)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>OS401-YSf&c&lfn9%5=`Io<74JSPM|9?7J?_gd3*2eDp#{R15SH5FY zgxme!&bCB0KM6Tn?Z&#Sv_C)9mK+Q!-*fPCIPxUSWW-;_df#z!+)Iq|9Nlsp|=d$ekKBp z7|G|;t%Dn;FS-8j*`I~Wc5z_!|DT7`jTsme%FloQPY7Uh|NoEYHeO-iw{lbFAefx6 z>Hl_Z^O>J4#{SqnPf-8Q`@0XlVbJn35o9Ds|KC@~w%=ipbF-BqCT}odrrPrxFEQ|0 zdZ=^Zbw7+mCz@($f@VW?*1oU|^RqQDVBY>ClV6Si|q*`HdGD zc&xnC;GX~W=FV#dUU6PnD6#N~@i4r+`RW%o{a-GxJ^G#7InI<1F2u;lgc6O6jEoEn z49GPO6T`m`mo}~3|K#WAbBngVl}V~_5<+NU6;l&q`11M-%)Ng;zxm1_sw##QxnGZ_ zi7{~bEIrU|EufUS>&;)32>G}tT9Dad{!@tP&#R4UjPhmYkctI{KhL+6c$ix``KC`e z`0_VK`SATxqn@DctcSn<|NsBva)YLT!;JgLsu&5@pT8b&tSegjRmVv1>B&0^`4h_> cM41t?06t0n17q;`#sB~S07*qoM6N<$g5;yPGXMYp diff --git a/files/en-us/web/mathml/element/msup/index.md b/files/en-us/web/mathml/element/msup/index.md index 2a88f0d48803de2..fa09c947a840d7d 100644 --- a/files/en-us/web/mathml/element/msup/index.md +++ b/files/en-us/web/mathml/element/msup/index.md @@ -21,12 +21,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples -Sample rendering: ![x1](msup.png) - -Rendering in your browser: X 2 +```html hidden + +``` ```html - + X 2 @@ -34,6 +37,8 @@ Rendering in your browser: X 2 ``` +{{ EmbedLiveSample('msup_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/msup/msup.png b/files/en-us/web/mathml/element/msup/msup.png deleted file mode 100644 index 0d451ba33b3bde2b1a445d39f92e67730f87e6e7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 687 zcmV;g0#N;lP)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>OR;IwM)000002K}keGR5;6> z(p^ZCVH5}Oe@tN#7Oa{QHb00`maT}1cf%qQTPP(28sSJ&BEl|&aM*%Z2Vp@)H5gQ^ z^{I`Ju~AA5B`J1MRvXP}O^q!#YvyL_-QJI+3^QYHtm}OE(&cgv=+*0iEnV;E3?RmL_gw#HHrepO2Ya$maVx<6 zfnuI}XB!k^B&(qM)a9W7LkPDpX6`yz1ON~#j+rLogb;q2jXE0FNe&N1QYYfWgH0O% zVEd&{%<}8}(*_A-O?}gG!FcfxJv+B`IDZH-qTgyu0Ekp3KbL&r=IkxSdFmSd7p-)Z_0guPFhb{DPPM z{-Q%J-F?MF3zfLfLg{V(-vO{R%?h^0`c0}V0L9JP0~-r9)*vfT64U*sHG2CSx7+P@ zyT(S$I_mj1Ua)>X^r$8W07Sc}*NeR18fUF7g-9uB^GNhxcf^OSwW|T-w~a2QabN-{ zK55*y1^^&A`fMRnh>yJL+)<#u+IMmjfZTdpn9l@a1C}Et@^(jk;%8fVxQL)`qRPAOh{ zC?%1^M6VnG$|x7TB53-tcE1b&AgkBi9R9)(LTI1e*sW1yC+{S$s + X = @@ -78,6 +76,8 @@ Rendering: ![](mtable-1.png) ``` +{{ EmbedLiveSample('mtable_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/mtable/mtable-1.png b/files/en-us/web/mathml/element/mtable/mtable-1.png deleted file mode 100644 index cc03b7c03f2ae5bcfcb176a3b4b1309043682383..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1666 zcmV-|27UR7P)002n{0{{R3LRc%)00004XF*Lt006O% z3;baP00001b5ch_0Itp)=>Px#32;bRa{vGf6951U69E94oEQKA0{~D=R7C&)0R8{} z`~Uy<|NsB~?f?J$>HYuz|Ns8~|NsB^0RS8S`rH5i{{Q*c|Ns3I00#f@ycYlhH30ws z04o3g`||()|Nis!|NsB|=Ku{=#P$F5!(y;Z3Ge>@&-eZS0yP2v3sw*S4gdfEB76V< zB-Hu;4_LYN$Zh}g!nW@JWLZdpB>(^cF#r7H|Mkxr0000KUjPZQ zW+?>=JyfaPt7_u7snDr;cvnLlAudWxUOa)c{`A>=pT?u-{Zf#>>&c*cwcunxCzs9e zF~TL1+tSaN$k3IGK~sv&8!cAdTr5Icp>^#1hPwQ@6)!stCpX>6UmR;T2t z-}sw207Qz`2nReC0~`PK$0K^rzi%XWAONs%k8y8n?&I%UOf~f9=j_wamD&20QC3Hv z<)+l~>&vPJNwS(W09_>j>(|_OtIxNTSuFqn|M}F{uX#04ll%Vq+?it1OQJL> zA{dL3??V5X*;|zCIfyrl?^RQ-qzR@9o@TCEp6Y*pzmecBjTdr-!r7QAZ0dx6Tm5Mg zB_ZsMUN>-9@K<1}(6CbzW%;Gjz(KTGJedz;tzRltF=MDu7X*gX5AzyPqRryoUk-Fa z;$c~I1)S;f^*{sl&BTc{OT>L6&_%jOl;zMB@Y*V?vU7itFCjL(#Cm$Cdb6{H1$fMK zMwMUbrKIw<@$t^8nS@Hn}P>M4H7S1FIT2(3=x7lA7RJlFOJ#v$iA}NMTnXptuCoD$(2S?@Odv z8g`~R*cDg^hJqSD>iTN3M4F|$0b*@?D_X0`C|xHWu8~lbyOc9nhqwc_}Si9yM#UejGK66tj#{jxyYNEOuJR zZ!RM?v&2#=8LkvqTWy+ws+IN7MTQFn*1I>?BD+gnzlvGp>KQj2?qbO@09LasJ5)IkF-kZf}VJ~2pR}R$%%?(_}h(4bsSB6&Eb@b{HSl5Q!iYzN)LNhD6 zQn& + Theorem of Pythagoras + + /* comment here */ ``` +{{ EmbedLiveSample('mtext_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/munder/index.md b/files/en-us/web/mathml/element/munder/index.md index 0835b63892a584a..fb80a1591559e01 100644 --- a/files/en-us/web/mathml/element/munder/index.md +++ b/files/en-us/web/mathml/element/munder/index.md @@ -23,12 +23,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web ## Examples -Sample rendering: ![x+y+z](munder.png) - -Rendering in your browser: x+y+z⏟ +```html hidden + +``` ```html - + x @@ -42,6 +45,8 @@ Rendering in your browser: x ``` +{{ EmbedLiveSample('munder_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/munder/munder.png b/files/en-us/web/mathml/element/munder/munder.png deleted file mode 100644 index 0d64cc7d1692687b6ee790fc2c4b5d733c12408d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1544 zcmV+j2KV`iP)Px&08mU+MgRZ*;+Hc2|Nq_H-r3pN002O+@c#e+05~`} z|Ns7~s;d9|=>Pxs{{R2~|NQv>|L^|)JOBXy|N8v@|LOhzN(Tb;{{H{~E99$bG5`So z{_X$(HQoCE2LJ)LWFGbZ|LU(>00bBm0095+xBv9Z-Q3#zXN;Jl$FZyF;ND?vuG9Aa`P!Mm^Z$QmOf@%Y2{?&FRBf5Q-+^;xB?|z+ zVHJ4C@{7Xj&Gr8iIb_@J`c#_NDisCf{Qti0{co+~8%A~g^V$63m^TUlLK*-78E6Us z2mk-{!-6W9(A}0}9dw|oiq7>CQ?3C33RH#600=wkw`v^#08S48(TiGL6##$I`0~PL zav%Wt*o*PEQFy)XL!{;?0000FSBNPC4OO}6v2*6BR5CG7ca@fZcbnXlK)U7ncYU@D zOR#!-k3pH=bDr4Z<>~JB{3k9mJ17_T@aktlI5;>%=HuYn+}}7iG*LS^=H}*NX?6t@ zA7*fTOjBIP&eLF5Pp_Yl=heaMxO!wXHzheuUY6LMo}RkR;MlpDF->*V+3KF0jlsCB z+pMLCTzS;c$G{EmP}GJn121=Ue8c_a zp2}_-P`K`rZJj85rKy+4od5s=rb$FWR7l5TV890W6g=D*@B<>0psHtNWurie&|Y`n zt1=n~&02(Uspr{#Bs5KgLI0Ac3vMH$CE0->E*!|@JTCP}TJOrqeF4I_)!!;))nw3+ zlh(wkgi~Rm!@R|_{dplggY+lQ#PIrx&p@`6m%;FbE>0yvOI;X*BGD;j z;#0z)vMe0VE{Z8vhq1XGxqu*9JOxNv8^eQ_=a0Ca;XfICN~AWV!d-0m_M=Wdp%hXa z|F^1y7mpGliEXfeWJt&@DNuUKeM11RkKgr;;)zujmcoJTxGQ_k+ANw5U#cQNW z;b(tdJVvT)TC)<$tdF;lVUUv33E{`@aqfF*B6z|^LynzYYopNGR(|4h+tEXs_>^!j z+PXT%bA?}%0P(qgR)jDiHBsv)H8&7nkf=3^Fi;Wj+1J$888J}R$Z9hS>Y6xAfy4s= zY8uCro54`5rA|#F4J%$VXp5E#Q_n=sg6A(868!F8ePUAdwf*l12N+Q^bbG95nR4)tMJ7tm7u`8kI3%Y=aX`wyqd~p~F z0+H9j5twi$7R_p8BNcaf%cF(F%o#q@Z8<=o$FiFP2KsIG1C@(M0E0;XAxP)s4!9hL zrOgB|Z98>}!+a8QjL^lKvFtiug}H%MLD1=7Dy25=@7d+w3}m$e_^DW8W|e)(`58{t u!iDDtd!`∫0∞ +```html hidden + +``` ```html - + - ∫ - 0 - ∞ + ∑ + + n + = + 1 + + + + + ∞ + ``` +{{ EmbedLiveSample('munderover_example', 700, 200, "", "") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/mathml/element/munderover/munderover.png b/files/en-us/web/mathml/element/munderover/munderover.png deleted file mode 100644 index 2e6cb529b4f51754cedb1ddd05a4a3f0158192d5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 907 zcmV;619bd}P)Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RV3>Fa)7?Pp_ssI239Z5t%R7l6| zmT5>-VHAend%eymddrz|G8}2LGDcI;Y#Xf1%Ce%MXfZ1K(*luY6eaB|MHEG}&{bDO)Ie%z#HwB=VA`2M`#1K&CC`MBq0h)D6+?q9k0 zPKmRO8=0u%06=W0C@HZz`Lx{JbVDcre6=0R8$4?E!a3P-06${e6PM(Av^FCQn#gbf znn9b&+zJtjr&v~7eMF?VtviQ>fgiD8M%LWp&zogZysu77>8iCHsg(%x5^{`|^kJ7?r=Nu9MAS5cz5M$DFz}0D; z5iulx|C#ee`wB)U3|W7(Xm$+Pr2GqZpX{mJGilO(o1X}h^WLU$CJn&ok|uAxQ!fz- z)n}Iuj|~MEoj88otxqBm5ksWj`3JH1JN*kzaam6m&dAP4PPRpqH04PXu4Oy}0KL{!3Pcpl`K*QU06+Cslkj3krk*#?zuF+T=6vM^MgZpRul<1sf%Pd( zFCTvZ5YZ(fQ|i(!?fdhbZ{Nq-*G~1SuFrVN^hQRkM*(PQQ-i5 zO+KY#ZXMkJ&;4?_2XTs|0MJHif4^rGq1gw(m=>#T&B@N&8>i>a+Fjw1-L*AtAbIBK zSgzGRBiH2|4#41}_UdC<8W`u7e365p7wiJHp_cqY;#Zl| za?G!MY417bhfkv8+UDh_niEs`y7G_7t9CES=*$NArv{SB&8a%e0lP>eM5lYHcsJ_xdU!IKK#QuRnC@Q_MOwj%bY;@vQCggHLi$AO6oa zC-`oBOSN1lLnP{7H~51%hG7FH!7xnFV^q0NLxKSwr>Er}$^F@j=ss!^|A`BW&&kv^ zR=shlzh%FpqFU-PCNqX>!!^6 hY02J|S` element is rendered while ## Example ```html - + @@ -80,6 +80,8 @@ By default, only the first child of the `` element is rendered while ``` +{{ EmbedLiveSample('semantics_example', 700, 200, "", "") }} + ## Specifications {{Specifications}}