Move WebKitSite to Websites
[WebKit-https.git] / Websites / webkit.org / demos / mathml / MathMLDemo.xhtml
1 <html xmlns='http://www.w3.org/1999/xhtml'>
2 <head>
3 <title>WebKit MathML Demo</title>
4 <style>
5 h2 {
6     color:purple;
7     text-align:center;
8 }
9
10 p {
11     text-align:center;
12 }
13
14 p.float {
15
16 }
17 </style>
18 </head>
19 <body>
20
21 <div>
22 <h2>Riemann's Zeta Function</h2>
23 <p>
24 <math xmlns='http://www.w3.org/1998/Math/MathML'>
25     <mi>ζ</mi>
26     <mo stretchy="false">(</mo>
27     <mi>n</mi>
28     <mo stretchy="false">)</mo>
29     <mo>=</mo>
30     <mrow>
31     <munderover>
32         <mo mathsize='big'>&#x2211;</mo>
33         <mrow><mi>k</mi><mo>=</mo><mi>1</mi></mrow>
34         <mrow><mi>∞</mi></mrow>
35     </munderover>
36     </mrow>
37     <mrow>
38     <mfrac>
39         <mn>1</mn>
40         <msup><mi>k</mi><mi>n</mi></msup>
41     </mfrac>
42     </mrow>
43 </math>
44 </p>
45 </div>
46
47 <div>
48 <h2>Fundamental Theorem of Calculus for Ordinary Integrals</h2>
49 <p>
50 <math xmlns='http://www.w3.org/1998/Math/MathML'>
51       <mrow>
52         <msubsup>
53           <mo maxsize="1">&#x222B;</mo>
54           <mrow>
55             <mi>x</mi>
56             <mo>=</mo>
57             <mi>a</mi>
58           </mrow>
59           <mi>y</mi>
60         </msubsup>
61         <mrow>
62           <mfrac>
63             <mrow>
64               <mi>d</mi>
65               <mi>f</mi>
66               <mo stretchy="false">(</mo>
67               <mi>x</mi>
68               <mo stretchy="false">)</mo>
69             </mrow>
70             <mrow>
71               <mi>d</mi>
72               <mi>x</mi>
73             </mrow>
74           </mfrac>
75           <mi>d</mi>
76           <mi>x</mi>
77         </mrow>
78       </mrow>
79       <mo>=</mo>
80       <mi>f</mi>
81       <mo stretchy="false">(</mo>
82       <mi>y</mi>
83       <mo stretchy="false">)</mo>
84       <mo>&#x2212;</mo>
85       <mi>f</mi>
86       <mo stretchy="false">(</mo>
87       <mi>a</mi>
88       <mo stretchy="false">)</mo>
89 </math>
90 <br/><br/>
91 <a href="http://math.mit.edu/classes/18.013A/MathML/chapter21/section01.xhtml">source</a>
92 </p>
93 </div>
94
95 <div>
96 <h2>The Area Under a Curve</h2>
97 <p>
98 <math xmlns='http://www.w3.org/1998/Math/MathML'>
99     <mrow>
100       <mrow>
101         <msubsup>
102           <mo maxsize="1">&#x222B;</mo>
103           <mrow>
104             <mi>x</mi>
105             <mo>=</mo>
106             <mi>a</mi>
107           </mrow>
108           <mrow>
109             <mi>x</mi>
110             <mo>=</mo>
111             <mi>b</mi>
112           </mrow>
113         </msubsup>
114         <mrow>
115           <mi>f</mi>
116           <mo stretchy="false">(</mo>
117           <mi>x</mi>
118           <mo stretchy="false">)</mo>
119           <mi>d</mi>
120           <mi>x</mi>
121         </mrow>
122       </mrow>
123     </mrow>
124 </math>
125 <br/><br/>
126 <a href="http://math.mit.edu/classes/18.013A/MathML/chapter20/section01.xhtml">source</a>
127 </p>
128 </div>
129
130 <div>
131 <h2>De Moivre's Theorem</h2>
132 <p>
133 <math xmlns='http://www.w3.org/1998/Math/MathML'>
134 <mrow>
135       <msup>
136         <mi>e</mi>
137         <mrow>
138             <mi>i</mi>
139             <mi>&#x03B8; </mi>
140         </mrow>
141       </msup>
142       <mo>=</mo>
143       <mi> cos</mi>
144       <mo>&#x2061;</mo>
145       <mi>&#x03B8; </mi>
146       <mo>+</mo>
147       <mi> i </mi>
148       <mi>sin</mi>
149       <mo>&#x2061;</mo>
150       <mi>&#x03B8;</mi>
151     </mrow>
152 </math>
153 <br/><br/>
154 <a href="http://en.wikipedia.org/wiki/De_Moivre's_formula">source</a>
155 </p>
156 </div>
157
158 <div>
159 <h2>Math in Normal Flow</h2>
160 <p class="float">
161 I am a paragraph of text <math xmlns='http://www.w3.org/1998/Math/MathML'><mi>x</mi><mo>+</mo><mn>1</mn></math> with math inline.
162 </p>
163 </div>
164 <div>
165 <h2>Fractions</h2>
166 <p class="float"> 
167 <math xmlns='http://www.w3.org/1998/Math/MathML'><mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac></math>
168 </p>
169 <p class="float">
170 <math xmlns='http://www.w3.org/1998/Math/MathML'><mi>x</mi><mo>+</mo><mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac></math>
171 </p>
172 <p class="float">
173 <math xmlns='http://www.w3.org/1998/Math/MathML'>
174 <mfrac>
175 <mi>B</mi>
176 <mi>C</mi>
177 </mfrac><mo> + </mo>
178 <mfrac>
179 <mrow><mi>B</mi><mo> + </mo>
180 <mfrac>
181 <mi>D</mi>
182 <mi>E</mi>
183 </mfrac></mrow>
184 <mi>C</mi>
185 </mfrac><mo> + </mo>
186 <mfrac>
187 <mrow><mi>B</mi><mo> + </mo>
188 <mfrac>
189 <mrow><mi>D</mi><mo> + </mo>
190 <mfrac>
191 <mi>F</mi>
192 <mi>G</mi>
193 </mfrac></mrow>
194 <mi>E</mi>
195 </mfrac></mrow>
196 <mi>C</mi>
197 </mfrac><mo> + </mo>
198 <mfrac>
199 <mi>B</mi>
200 <mrow><mi>C</mi><mo> + </mo>
201 <mfrac>
202 <mi>D</mi>
203 <mrow><mi>E</mi><mo> + </mo>
204 <mfrac>
205 <mi>F</mi>
206 <mi>G</mi>
207 </mfrac></mrow>
208 </mfrac></mrow>
209 </mfrac>
210 </math>
211 </p>
212 </div>
213 <div>
214 <h2>Operator Stretching</h2>
215 <p class="float">
216 <math xmlns='http://www.w3.org/1998/Math/MathML'><mo>(</mo><mi>x</mi><mo>+</mo><mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac><mo>)</mo></math>
217 </p>
218 <p class="float">
219 <math xmlns='http://www.w3.org/1998/Math/MathML'>
220 <mi>y</mi>
221 <mo>(</mo>
222 <munder>
223 <mi>&#x220f;</mi>
224 <mi>x</mi>
225 </munder>
226 <mfrac>
227 <mrow><mi>x</mi><mo>+</mo>
228       <mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac>
229 </mrow>
230 <mrow><mi>x</mi><mo>+</mo>
231       <mfrac><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac>
232 </mrow>
233 </mfrac>
234 <mo>)</mo>
235 </math>
236 </p>
237 <p class="float">
238 <math xmlns='http://www.w3.org/1998/Math/MathML'>
239 <mo>[</mo>
240 <mtable>
241 <mtr>
242 <mtd><msub><mi>a</mi><mn>11</mn></msub></mtd>
243 <mtd><msub><mi>a</mi><mn>12</mn></msub></mtd>
244 <mtd><msub><mi>a</mi><mn>13</mn></msub></mtd>
245 </mtr>
246 <mtr>
247 <mtd><msub><mi>b</mi><mn>21</mn></msub></mtd>
248 <mtd><msub><mi>b</mi><mn>22</mn></msub></mtd>
249 <mtd><msub><mi>b</mi><mn>23</mn></msub></mtd>
250 </mtr>
251 <mtr>
252 <mtd><msub><mi>c</mi><mn>31</mn></msub></mtd>
253 <mtd><msub><mi>c</mi><mn>32</mn></msub></mtd>
254 <mtd><msub><mi>c</mi><mn>33</mn></msub></mtd>
255 </mtr>
256 </mtable>
257 <mo>]</mo>
258 </math>
259 </p>
260 </div>
261 <div>
262 <h2>Square Roots</h2>
263 <p class="float">
264 <math xmlns='http://www.w3.org/1998/Math/MathML'>
265 <msqrt><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow></msqrt>
266 </math>
267 </p>
268 <p class="float">
269 <math xmlns='http://www.w3.org/1998/Math/MathML'>
270 <msqrt>
271 <mfrac>
272 <mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>
273 <mrow><mi>x</mi><mo>+</mo><mn>2</mn></mrow>
274 </mfrac>
275 </msqrt>
276 </math>
277 </p>
278 </div>
279
280 </body>
281 </html>