-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmathml.html
More file actions
86 lines (86 loc) · 12.9 KB
/
Copy pathmathml.html
File metadata and controls
86 lines (86 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LatteX — MathML</title>
<style>
:root { color-scheme: light; }
body { font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; background: #f4f6f6; color: #1a1f21; }
main { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem; }
.eyebrow { font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .18em;
text-transform: uppercase; color: #1f7d72; margin: 0 0 .5rem; }
h1 { margin: 0 0 .5rem; font-size: 1.6rem; }
p.lede { color: #55635f; margin: 0 0 2rem; max-width: 60ch; }
.card { background: #fff; border: 1px solid #e3e8e7; border-radius: 14px;
padding: 1.5rem 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); margin-bottom: 1.5rem; }
.src { font-family: ui-monospace, monospace; font-size: .9rem; color: #3a4749;
background: #eef2f1; border: 1px solid #e0e6e4; border-radius: 7px; padding: .4rem .8rem; display: inline-block; }
.render { margin: 1.1rem 0; }
.render svg { height: 64px; width: auto; }
pre { background: #1e2427; color: #dfe7e5; border-radius: 8px; padding: 1rem;
overflow-x: auto; font-size: 12px; white-space: pre-wrap; margin: 0; }
.lbl { font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .08em;
text-transform: uppercase; color: #8a9896; margin: 1rem 0 .35rem; }
</style>
</head>
<body>
<main>
<p class="eyebrow">LatteX · toMathML</p>
<h1>Same tree, two products</h1>
<p class="lede">LatteX.toMathML(latex) serializes the SAME parse tree the renderer lays out
into Presentation-MathML — navigable structure for assistive technology and an
interop surface, still zero-dependency and pure Java. Each card below shows a formula's
SVG render and its MathML, from one parse.</p>
<div class="card">
<span class="src">x^2 + 1</span>
<div class="lbl">SVG</div><div class="render"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.08 -34.432 102.3178 38.032" width="102.3178" height="38.032" role="img" aria-label="x squared + 1">
<g fill="currentColor">
<path d="M482 0 L273 0 L273 29 Q299 29 309 33 Q320 38 320 51 Q320 61 313 72 L250 169 L230 204 L226 204 L144 86 Q137 74 128 62 Q120 50 120 44 Q120 36 130 32 Q140 29 165 29 L165 0 L-2 0 L-2 29 Q24 29 41 39 Q58 50 83 79 L203 235 L99 384 Q82 409 70 422 Q58 435 45 439 Q32 444 11 444 L11 473 L226 473 L226 445 Q178 445 178 422 Q178 410 191 390 Q205 371 230 329 L254 285 L258 285 L305 353 Q325 381 333 395 Q341 409 341 421 Q341 432 332 438 Q324 445 300 445 L300 473 L465 473 L465 444 Q440 444 421 431 Q402 419 385 397 L279 261 L402 87 Q423 57 438 43 Q454 29 482 29 L482 0 Z" transform="translate(0 0) scale(0.04 -0.04)"/>
<path d="M464 160 L432 0 L38 0 L38 34 L190 186 Q240 237 273 278 Q306 320 322 362 Q339 404 339 456 Q339 512 305 545 Q272 579 214 579 Q165 579 130 558 Q96 537 68 481 L44 491 Q67 564 117 604 Q167 644 240 644 Q297 644 340 622 Q383 601 407 562 Q432 524 432 471 Q432 427 413 386 Q395 346 358 303 Q322 260 269 206 L137 81 L137 76 L207 79 L346 79 Q386 79 402 97 Q418 115 435 160 L464 160 Z" transform="translate(19.16 -14.4) scale(0.028 -0.028)"/>
<path d="M658 225 L396 225 L396 -40 L324 -40 L324 225 L62 225 L62 293 L324 293 L324 558 L396 558 L396 293 L658 293 L658 225 Z" transform="translate(43.5089 0) scale(0.04 -0.04)"/>
<path d="M426 0 L80 0 L80 28 Q151 28 180 43 Q209 58 209 95 L209 518 Q209 544 202 555 Q195 567 176 567 Q161 567 129 563 Q97 559 74 551 L74 584 L268 639 L297 639 L297 95 Q297 58 327 43 Q357 28 426 28 L426 0 Z" transform="translate(81.1978 0) scale(0.04 -0.04)"/>
</g>
</svg></div>
<div class="lbl">MathML</div><pre><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></math></pre>
</div>
<div class="card">
<span class="src">\frac{-b \pm \sqrt{b^2-4ac}}{2a}</span>
<div class="lbl">SVG</div><div class="render"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -68.32 239.3756 96.2" width="239.3756" height="96.2" role="img" aria-label="the fraction - b ± the square root of b squared - 4 a c over 2 a">
<g fill="currentColor">
<path d="M270 218 L45 218 L45 283 L270 283 L270 218 Z" transform="translate(0 -25.6) scale(0.04 -0.04)"/>
<path d="M163 706 L163 400 L166 400 Q192 432 231 458 Q270 485 320 485 Q370 485 407 456 Q445 428 466 378 Q487 328 487 263 Q487 174 456 113 Q425 52 371 21 Q317 -10 247 -10 Q183 -10 140 5 Q98 20 80 30 L80 592 Q80 626 72 635 Q65 645 36 645 Q24 645 16 644 Q8 643 8 643 L8 671 L137 706 L163 706 Z M163 356 L163 78 Q177 61 201 46 Q225 31 265 31 Q313 31 341 58 Q370 85 383 130 Q396 176 396 231 Q396 279 386 321 Q376 364 350 390 Q324 417 276 417 Q238 417 207 395 Q177 374 163 356 Z" transform="translate(12.6 -25.6) scale(0.04 -0.04)"/>
<path d="M658 306 L394 306 L394 92 L326 92 L326 306 L62 306 L62 373 L326 373 L326 576 L394 576 L394 373 L658 373 L658 306 Z M658 -31 L62 -31 L62 36 L658 36 L658 -31 Z" transform="translate(42.3689 -25.6) scale(0.04 -0.04)"/>
<path d="M667 922 L829 922 L829 854 L713 854 L413 -265 L371 -265 L138 319 L34 279 L18 307 L177 417 L197 417 L395 -93 L399 -93 L667 922 Z" transform="translate(80.0578 -29.44) scale(0.04 -0.04)"/>
<path d="M163 706 L163 400 L166 400 Q192 432 231 458 Q270 485 320 485 Q370 485 407 456 Q445 428 466 378 Q487 328 487 263 Q487 174 456 113 Q425 52 371 21 Q317 -10 247 -10 Q183 -10 140 5 Q98 20 80 30 L80 592 Q80 626 72 635 Q65 645 36 645 Q24 645 16 644 Q8 643 8 643 L8 671 L137 706 L163 706 Z M163 356 L163 78 Q177 61 201 46 Q225 31 265 31 Q313 31 341 58 Q370 85 383 130 Q396 176 396 231 Q396 279 386 321 Q376 364 350 390 Q324 417 276 417 Q238 417 207 395 Q177 374 163 356 Z" transform="translate(111.8178 -25.6) scale(0.04 -0.04)"/>
<path d="M464 160 L432 0 L38 0 L38 34 L190 186 Q240 237 273 278 Q306 320 322 362 Q339 404 339 456 Q339 512 305 545 Q272 579 214 579 Q165 579 130 558 Q96 537 68 481 L44 491 Q67 564 117 604 Q167 644 240 644 Q297 644 340 622 Q383 601 407 562 Q432 524 432 471 Q432 427 413 386 Q395 346 358 303 Q322 260 269 206 L137 81 L137 76 L207 79 L346 79 Q386 79 402 97 Q418 115 435 160 L464 160 Z" transform="translate(132.6978 -35.68) scale(0.028 -0.028)"/>
<path d="M270 218 L45 218 L45 283 L270 283 L270 218 Z" transform="translate(157.0467 -25.6) scale(0.04 -0.04)"/>
<path d="M481 158 L379 158 L379 0 L290 0 L290 158 L13 158 L13 221 L318 645 L379 645 L379 227 L481 227 L481 158 Z M290 227 L290 536 L286 536 L68 231 L68 227 L290 227 Z" transform="translate(178.5356 -25.6) scale(0.04 -0.04)"/>
<path d="M308 62 L304 62 Q269 31 237 12 Q205 -7 157 -7 Q99 -7 68 25 Q38 57 38 105 Q38 145 56 172 Q75 200 105 219 Q136 238 171 251 Q207 264 241 273 Q275 282 301 290 L301 334 Q301 399 278 426 Q256 454 211 454 Q168 454 156 436 Q144 418 144 373 Q144 327 100 327 Q85 327 71 338 Q58 350 58 375 Q58 403 79 428 Q101 453 140 469 Q180 485 234 485 Q316 485 350 447 Q384 409 384 331 L384 104 Q384 73 391 64 Q398 55 414 55 Q428 55 439 62 Q451 69 461 80 L476 64 Q451 28 428 11 Q406 -5 368 -5 Q335 -5 324 12 Q313 29 308 62 Z M301 92 L301 257 Q256 246 216 231 Q176 216 151 192 Q126 168 126 129 Q126 92 146 70 Q166 48 198 48 Q248 48 301 92 Z" transform="translate(198.3356 -25.6) scale(0.04 -0.04)"/>
<path d="M408 148 L427 134 Q408 94 383 61 Q359 28 323 9 Q287 -10 233 -10 Q171 -10 126 20 Q81 50 57 103 Q33 157 33 226 Q33 344 92 414 Q151 485 259 485 Q330 485 370 454 Q411 423 411 379 Q411 334 369 334 Q347 334 335 345 Q324 357 317 374 Q310 391 302 408 Q295 425 281 436 Q268 448 242 448 Q181 448 146 403 Q112 359 112 273 Q112 182 149 123 Q187 65 264 65 Q313 65 343 85 Q374 105 408 148 Z" transform="translate(217.5356 -25.6) scale(0.04 -0.04)"/>
<path d="M464 160 L432 0 L38 0 L38 34 L190 186 Q240 237 273 278 Q306 320 322 362 Q339 404 339 456 Q339 512 305 545 Q272 579 214 579 Q165 579 130 558 Q96 537 68 481 L44 491 Q67 564 117 604 Q167 644 240 644 Q297 644 340 622 Q383 601 407 562 Q432 524 432 471 Q432 427 413 386 Q395 346 358 303 Q322 260 269 206 L137 81 L137 76 L207 79 L346 79 Q386 79 402 97 Q418 115 435 160 L464 160 Z" transform="translate(98.1878 25.6) scale(0.04 -0.04)"/>
<path d="M308 62 L304 62 Q269 31 237 12 Q205 -7 157 -7 Q99 -7 68 25 Q38 57 38 105 Q38 145 56 172 Q75 200 105 219 Q136 238 171 251 Q207 264 241 273 Q275 282 301 290 L301 334 Q301 399 278 426 Q256 454 211 454 Q168 454 156 436 Q144 418 144 373 Q144 327 100 327 Q85 327 71 338 Q58 350 58 375 Q58 403 79 428 Q101 453 140 469 Q180 485 234 485 Q316 485 350 447 Q384 409 384 331 L384 104 Q384 73 391 64 Q398 55 414 55 Q428 55 439 62 Q451 69 461 80 L476 64 Q451 28 428 11 Q406 -5 368 -5 Q335 -5 324 12 Q313 29 308 62 Z M301 92 L301 257 Q256 246 216 231 Q176 216 151 192 Q126 168 126 129 Q126 92 146 70 Q166 48 198 48 Q248 48 301 92 Z" transform="translate(117.9878 25.6) scale(0.04 -0.04)"/>
<rect x="111.8178" y="-66.32" width="123.5578" height="2.72"/>
<rect x="0" y="-11.68" width="235.3756" height="2.72"/>
</g>
</svg></div>
<div class="lbl">MathML</div><pre><math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math></pre>
</div>
<div class="card">
<span class="src">\sum_{i=1}^n i^2</span>
<div class="lbl">SVG</div><div class="render"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.4 -64.4 78.9387 109.38" width="78.9387" height="109.38" role="img" aria-label="the sum from i = 1 to n of i squared">
<g fill="currentColor">
<path d="M1047 0 L968 -406 L15 -406 L15 -380 L526 280 L29 888 L29 919 L990 919 L1004 596 L959 596 Q949 682 929 733 Q909 785 875 811 Q842 838 791 847 Q740 856 666 856 L224 856 L224 851 L639 336 L639 316 L183 -278 L183 -284 L754 -284 Q811 -284 848 -266 Q886 -249 912 -214 Q938 -179 957 -125 Q977 -72 998 0 L1047 0 Z" transform="translate(0 -0.06) scale(0.04 -0.04)"/>
<path d="M481 307 L481 101 Q481 73 485 57 Q490 41 506 34 Q522 28 555 28 L555 0 L324 0 L324 28 Q360 28 375 34 Q391 41 394 57 Q398 73 398 101 L398 282 Q398 342 384 372 Q371 402 350 411 Q329 421 306 421 Q266 421 237 399 Q208 378 185 358 L185 101 Q185 73 189 57 Q193 41 209 34 Q225 28 261 28 L261 0 L32 0 L32 28 Q66 28 80 34 Q95 41 98 57 Q102 73 102 101 L102 382 Q102 409 91 417 Q80 426 60 426 Q47 426 40 425 Q33 424 33 424 L33 453 L160 482 L183 482 L182 401 L186 401 Q227 437 263 461 Q300 485 347 485 Q415 485 448 439 Q481 393 481 307 Z" transform="translate(14.176 -48.82) scale(0.028 -0.028)"/>
<path d="M257 28 L257 0 L32 0 L32 28 Q66 28 80 34 Q95 41 98 57 Q102 73 102 101 L102 380 Q102 412 91 419 Q80 427 58 427 Q48 427 40 426 Q33 425 33 425 L33 454 L159 482 L185 482 L185 101 Q185 72 189 56 Q193 40 208 34 Q224 28 257 28 Z M145 673 Q171 673 186 656 Q202 640 202 617 Q202 594 186 577 Q171 560 145 560 Q120 560 104 577 Q88 594 88 617 Q88 640 103 656 Q119 673 145 673 Z" transform="translate(1.24 42.98) scale(0.028 -0.028)"/>
<path d="M658 327 L62 327 L62 395 L658 395 L658 327 Z M658 123 L62 123 L62 190 L658 190 L658 123 Z" transform="translate(9.22 42.98) scale(0.028 -0.028)"/>
<path d="M426 0 L80 0 L80 28 Q151 28 180 43 Q209 58 209 95 L209 518 Q209 544 202 555 Q195 567 176 567 Q161 567 129 563 Q97 559 74 551 L74 584 L268 639 L297 639 L297 95 Q297 58 327 43 Q357 28 426 28 L426 0 Z" transform="translate(29.38 42.98) scale(0.028 -0.028)"/>
<path d="M257 28 L257 0 L32 0 L32 28 Q66 28 80 34 Q95 41 98 57 Q102 73 102 101 L102 380 Q102 412 91 419 Q80 427 58 427 Q48 427 40 426 Q33 425 33 425 L33 454 L159 482 L185 482 L185 101 Q185 72 189 56 Q193 40 208 34 Q224 28 257 28 Z M145 673 Q171 673 186 656 Q202 640 202 617 Q202 594 186 577 Q171 560 145 560 Q120 560 104 577 Q88 594 88 617 Q88 640 103 656 Q119 673 145 673 Z" transform="translate(51.1467 0) scale(0.04 -0.04)"/>
<path d="M464 160 L432 0 L38 0 L38 34 L190 186 Q240 237 273 278 Q306 320 322 362 Q339 404 339 456 Q339 512 305 545 Q272 579 214 579 Q165 579 130 558 Q96 537 68 481 L44 491 Q67 564 117 604 Q167 644 240 644 Q297 644 340 622 Q383 601 407 562 Q432 524 432 471 Q432 427 413 386 Q395 346 358 303 Q322 260 269 206 L137 81 L137 76 L207 79 L346 79 Q386 79 402 97 Q418 115 435 160 L464 160 Z" transform="translate(62.5467 -14.4) scale(0.028 -0.028)"/>
</g>
</svg></div>
<div class="lbl">MathML</div><pre><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msup><mi>i</mi><mn>2</mn></msup></mrow></math></pre>
</div>
</main>
</body>
</html>