| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| @font-face { |
| font-family: stretchy; |
| src: url("stretchy.woff"); |
| } |
| math { |
| font-family: stretchy; |
| font-size: 10px; |
| } |
| div { |
| width: 700px; |
| height: 100px; |
| background-color:#eeeeee; |
| } |
| </style> |
| <body> |
| <div id="mathContainer"> |
| <math display='block'> |
| <mrow> |
| <mmultiscripts> |
| <mi>C</mi> |
| <none/> |
| <mi>16</mi> |
| <mprescripts/> |
| <mi>5</mi> |
| <mi>10</mi> |
| </mmultiscripts> |
| </mrow> |
| <mspace width="0.5em"/> |
| <mrow> |
| <mn>2</mn> |
| <mo>⁢</mo> |
| <msub> |
| <mi>H</mi> |
| <mn>2</mn> |
| </msub> |
| <mo>+</mo> |
| <msub> |
| <mi>O</mi> |
| <mn>2</mn> |
| </msub> |
| </mrow> |
| <mover> |
| <mo>→</mo> |
| <mrow> |
| <mi>m</mi> |
| <mo>,</mo> |
| <mi>n</mi> |
| </mrow> |
| </mover> |
| <mrow> |
| <mn>2</mn> |
| <mo>⁢</mo> |
| <msub> |
| <mi>H</mi> |
| <mn>2</mn> |
| </msub> |
| <mo>⁢</mo> |
| <mi>O</mi> |
| </mrow> |
| <mspace width="0.5em"/> |
| <mrow> |
| <mi>A</mi> |
| </mrow> |
| <munderover> |
| <mo>↔</mo> |
| <mi>b</mi> |
| <mn>a</mn> |
| </munderover> |
| <mrow> |
| <mi>B</mi> |
| </mrow> |
| <mspace width="0.5em"/> |
| <mrow> |
| <mi>A</mi> |
| </mrow> |
| <munderover> |
| <mo>⇄</mo> |
| <mi>0</mi> |
| <mn>a</mn> |
| </munderover> |
| <mrow> |
| <mi>B</mi> |
| </mrow> |
| <mspace width="0.5em"/> |
| <mrow> |
| <mi>A</mi> |
| </mrow> |
| <munderover> |
| <mo>⇄</mo> |
| <mn>0°C</mn> |
| <mn>100°C</mn> |
| </munderover> |
| <mrow> |
| <mi>B</mi> |
| </mrow> |
| </math> |
| </div> |
| <script> |
| var mathDiv = document.getElementById("mathContainer"); |
| |
| mathDiv.style.width = "300px"; |
| document.body.offsetWidth; // forces layout |
| |
| mathDiv.style.width = "500px"; |
| document.body.offsetWidth; // forces layout |
| |
| mathDiv.style.width = "700px"; |
| document.body.offsetWidth; // forces layout |
| </script> |
| </body> |
| </html> |
