Browse Source

Reformat math with CSS

paulmasson 9 years ago
parent
commit
868b3ec447
1 changed files with 226 additions and 10 deletions
  1. 226 10
      examples/webgl_multiple_elements_with_text.html

+ 226 - 10
examples/webgl_multiple_elements_with_text.html

@@ -48,6 +48,47 @@
 				color: #0080ff;
 			}
 
+			.math {
+
+				text-align: center;
+
+			}
+
+			.math-frac {
+
+				display: inline-block;
+				vertical-align: middle;
+
+			}
+
+			.math-num {
+
+				display: block;
+
+			}
+
+			.math-denom {
+
+				display: block;
+				border-top: 1px solid;
+
+			}
+
+			.math-sqrt {
+
+				display: inline-block;
+				transform: scale(1, 1.3);
+
+			}
+
+			.math-sqrt-stem {
+
+				display: inline-block;
+				border-top: 1px solid;
+				margin-top: 5px;
+
+			}
+
 		</style>
 	</head>
 	<body>
@@ -57,11 +98,9 @@
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple elements with text - webgl</div>
 
 		<script src="../build/three.min.js"></script>
-		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/Detector.js"></script>
-		
-		<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
 
 		<script>
 
@@ -234,13 +273,52 @@
 
 		<p>Sound waves whose geometry is determined by a single dimension, plane waves, obey the wave equation</p>
 
-		\[ \frac{ \partial^2 u }{ \partial r^2 } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
+		<!-- css math formatting inspired by http://mathquill.com/mathquill/mathquill.css -->
+
+		<div class="math">
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>r</i><sup>2</sup>
+				</span>
+			</span>
+
+			&minus;
+
+			<span class="math-frac">
+				<span class="math-num">
+					1<sup></sup> <!-- sup for vertical alignment -->
+				</span>
+				<span class="math-denom">
+					<i>c</i><sup>2</sup>
+				</span>
+			</span>
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>t</i><sup>2</sup>
+				</span>
+			</span>
+
+			=&nbsp;0
+
+		</div>
 
 		<p>where <i>c</i> designates the speed of sound in the medium. The monochromatic solution for plane waves will be taken to be</p>
 
-		\[ u(r,t) = \sin( k r \pm &omega; t )  \]
+		<div class="math">
+
+			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=&nbsp;sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
+
+		</div>
 
-		<p>where &omega; is the frequency and \( k = &omega; / c \) is the wave number. The sign chosen in the argument determines the direction of movement of the waves.</p>
+		<p>where &omega; is the frequency and <i>k</i>=&omega;/<i>c</i> is the wave number. The sign chosen in the argument determines the direction of movement of the waves.</p>
 
 		<p>Here is a plane wave moving on a three-dimensional lattice of atoms:</p>
 
@@ -284,11 +362,83 @@
 
 		<p>Sound waves whose geometry is determined by two dimensions, cylindrical waves, obey the wave equation</p>
 
-		\[ \frac{ \partial^2 u }{ \partial r^2 } + \frac{ 1 }{ r } \frac{ \partial u }{ \partial r } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
+		<div class="math">
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>r</i><sup>2</sup>
+				</span>
+			</span>
+
+			&plus;
+
+			<span class="math-frac">
+				<span class="math-num">
+					1
+				</span>
+				<span class="math-denom">
+					<i>r</i>
+				</span>
+			</span>
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>r</i>
+				</span>
+			</span>
+
+			&minus;
+
+			<span class="math-frac">
+				<span class="math-num">
+					1<sup></sup> <!-- sup for vertical alignment -->
+				</span>
+				<span class="math-denom">
+					<i>c</i><sup>2</sup>
+				</span>
+			</span>
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>t</i><sup>2</sup>
+				</span>
+			</span>
+
+			=&nbsp;0
+
+		</div>
 
 		<p>The monochromatic solution for cylindrical sound waves will be taken to be</p>
 
-		\[ u(r,t) = \frac{ \sin( k r \pm &omega; t ) }{ \sqrt{ r } } \]
+		<div class="math">
+
+			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=
+
+			<span class="math-frac">
+				<span class="math-num">
+					sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
+				</span>
+				<span class="math-denom">
+					<span class="math-sqrt">&radic;</span><span class="math-sqrt-stem"><i>r</i>
+				</span>
+			</span>
+
+		</div>
+
+		<div class="math">
+
+</span>
+
+		</div>
 
 		<p>Here is a cylindrical wave moving on a three-dimensional lattice of atoms:</p>
 
@@ -354,11 +504,77 @@
 
 		<p>Sound waves whose geometry is determined by three dimensions, spherical waves, obey the wave equation</p>
 
-		\[ \frac{ \partial^2 u }{ \partial r^2 } + \frac{ 2 }{ r } \frac{ \partial u }{ \partial r } - \frac{ 1 }{ c^2 } \frac{ \partial^2 u }{ \partial t^2 } = 0 \]
+		<div class="math">
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>r</i><sup>2</sup>
+				</span>
+			</span>
+
+			&plus;
+
+			<span class="math-frac">
+				<span class="math-num">
+					2
+				</span>
+				<span class="math-denom">
+					<i>r</i>
+				</span>
+			</span>
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>r</i>
+				</span>
+			</span>
+
+			&minus;
+
+			<span class="math-frac">
+				<span class="math-num">
+					1<sup></sup> <!-- sup for vertical alignment -->
+				</span>
+				<span class="math-denom">
+					<i>c</i><sup>2</sup>
+				</span>
+			</span>
+
+			<span class="math-frac">
+				<span class="math-num">
+					&part;<sup>2</sup><i>u</i>
+				</span>
+				<span class="math-denom">
+					&part;<i>t</i><sup>2</sup>
+				</span>
+			</span>
+
+			=&nbsp;0
+
+		</div>
 
 		<p>The monochromatic solution for spherical sound waves will be taken to be</p>
 
-		\[ u(r,t) = \frac{ \sin( k r \pm &omega; t ) }{ r } \]
+		<div class="math">
+
+			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=
+
+			<span class="math-frac">
+				<span class="math-num">
+					sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
+				</span>
+				<span class="math-denom">
+					<i>r</i>
+				</span>
+			</span>
+
+		</div>
 
 		<p>Here is a spherical wave moving on a three-dimensional lattice of atoms:</p>