116 lines
2.0 KiB
HTML
116 lines
2.0 KiB
HTML
<!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>
|