使用 mPDF 将 MathJax 方程输出到 PDF 时未正确对齐
Posted
技术标签:
【中文标题】使用 mPDF 将 MathJax 方程输出到 PDF 时未正确对齐【英文标题】：MathJax equations incorrectly aligned when it is output to PDF using mPDF 【发布时间】：2020-05-14 06:37:58 【问题描述】：我正在尝试使用 mPDF (v7.0) 将一组工作表从我的网站打印到 PDF。在浏览器中，我想要的是 MathJax 方程的对齐方式： Correct alignment
但是，当我清理 (following mPDF documentation) 并将 html 发送到 mPDF 时，输出变为：Incorrect Alignment
我正在使用 CDN 访问 MathJax v2.7.5（托管在 cdnjs.com 上）。我还尝试调整 SVG output processor 并调整 SVG 标记和 MathJax_SVG 类的 CSS 属性，但似乎无法解决对齐问题。
关于如何解决此问题的任何想法？谢谢！
这是从浏览器捕获并发送到 mPDF 的 HTML：
<style>
div.question
page-break-inside: avoid;
position: relative;
margin: 20px;
text-align: justify;
vertical-align: text-top;
line-height: 2.5em;
font-weight: bold;
</style>
<div class='question'>
<p>1) Use a calculator to evaluate <span class="MathJax_Preview" style="color: inherit;"></span><span
class="MathJax_SVG" id="MathJax-Element-1-Frame" tabindex="0" style="font-size: 100%; "
data-mathml="<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mrow><mn>7</mn><mfrac><mn>1</mn><mn>7</mn></mfrac><mo>+</mo><mo stretchy="false">(</mo><mn>3</mn><mfrac><mn>1</mn><mn>2</mn></mfrac><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow><mrow><mo stretchy="false">(</mo><mo>&#x2212;</mo><mn>2</mn><mfrac><mn>2</mn><mn>3</mn></mfrac><mo>&#x2212;</mo><mn>5</mn><msup><mo stretchy="false">)</mo><mn>3</mn></msup></mrow></mfrac><mo>,</mo></math>"
role="presentation"><svg viewBox="0 -1452.3 3989.1 2406"
aria-hidden="true">
<defs id="MathJax_SVG_glyphs">
<path stroke- id="MJMAIN-37"
d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z">
</path>
<path stroke- id="MJMAIN-31"
d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z">
</path>
<path stroke- id="MJMAIN-2B"
d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z">
</path>
<path stroke- id="MJMAIN-28"
d="M94 250Q94 319 104 381T127 488T164 576T202 643T244 695T277 729T302 750H315H319Q333 750 333 741Q333 738 316 720T275 667T226 581T184 443T167 250T184 58T225 -81T274 -167T316 -220T333 -241Q333 -250 318 -250H315H302L274 -226Q180 -141 137 -14T94 250Z">
</path>
<path stroke- id="MJMAIN-33"
d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z">
</path>
<path stroke- id="MJMAIN-32"
d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z">
</path>
<path stroke- id="MJMAIN-29"
d="M60 749L64 750Q69 750 74 750H86L114 726Q208 641 251 514T294 250Q294 182 284 119T261 12T224 -76T186 -143T145 -194T113 -227T90 -246Q87 -249 86 -250H74Q66 -250 63 -250T58 -247T55 -238Q56 -237 66 -225Q221 -64 221 250T66 725Q56 737 55 738Q55 746 60 749Z">
</path>
<path stroke- id="MJMAIN-2212"
d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path>
<path stroke- id="MJMAIN-35"
d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z">
</path>
<path stroke- id="MJMAIN-2C"
d="M78 35T78 60T94 103T137 121Q165 121 187 96T210 8Q210 -27 201 -60T180 -117T154 -158T130 -185T117 -194Q113 -194 104 -185T95 -172Q95 -168 106 -156T131 -126T157 -76T173 -3V9L172 8Q170 7 167 6T161 3T152 1T140 0Q113 0 96 17Z">
</path>
<path stroke- id="MJMAIN-34"
d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z">
</path>
<path stroke- id="MJMAIN-2E"
d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z">
</path>
<path stroke- id="MJMAIN-30"
d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z">
</path>
<path stroke- id="MJMAIN-36"
d="M42 313Q42 476 123 571T303 666Q372 666 402 630T432 550Q432 525 418 510T379 495Q356 495 341 509T326 548Q326 592 373 601Q351 623 311 626Q240 626 194 566Q147 500 147 364L148 360Q153 366 156 373Q197 433 263 433H267Q313 433 348 414Q372 400 396 374T435 317Q456 268 456 210V192Q456 169 451 149Q440 90 387 34T253 -22Q225 -22 199 -14T143 16T92 75T56 172T42 313ZM257 397Q227 397 205 380T171 335T154 278T148 216Q148 133 160 97T198 39Q222 21 251 21Q302 21 329 59Q342 77 347 104T352 209Q352 289 347 316T329 361Q302 397 257 397Z">
</path>
<path stroke- id="MJMAIN-38"
d="M70 417T70 494T124 618T248 666Q319 666 374 624T429 515Q429 485 418 459T392 417T361 389T335 371T324 363L338 354Q352 344 366 334T382 323Q457 264 457 174Q457 95 399 37T249 -22Q159 -22 101 29T43 155Q43 263 172 335L154 348Q133 361 127 368Q70 417 70 494ZM286 386L292 390Q298 394 301 396T311 403T323 413T334 425T345 438T355 454T364 471T369 491T371 513Q371 556 342 586T275 624Q268 625 242 625Q201 625 165 599T128 534Q128 511 141 492T167 463T217 431Q224 426 228 424L286 386ZM250 21Q308 21 350 55T392 137Q392 154 387 169T375 194T353 216T330 234T301 253T274 270Q260 279 244 289T218 306L210 311Q204 311 181 294T133 239T107 157Q107 98 150 60T250 21Z">
</path>
<path stroke- id="MJMAIN-39"
d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z">
</path>
<path stroke- id="MJMAIN-5D" d="M22 710V750H159V-250H22V-210H119V710H22Z"></path>
<path stroke- id="MJMAIN-D7"
d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z">
</path>
</defs>
<g stroke="#000" fill="#000" stroke- transform="matrix(1 0 0 -1 0 0)">
<g transform="translate(120,0)">
<rect stroke="none" x="0" y="220"></rect>
<g transform="translate(60,713)">
<use transform="scale(0.707)" xlink:href="#MJMAIN-37" x="0" y="0"></use>
<g transform="translate(353,0)">
<g transform="translate(120,0)">
<rect stroke="none" x="0" y="146"></rect>
<use transform="scale(0.5)" xlink:href="#MJMAIN-31" x="119" y="644"></use>
<use transform="scale(0.5)" xlink:href="#MJMAIN-37" x="119" y="-614"></use>
</g>
</g>
<use transform="scale(0.707)" xlink:href="#MJMAIN-2B" x="1363" y="0"></use>
<use transform="scale(0.707)" xlink:href="#MJMAIN-28" x="2142" y="0"></use>
<use transform="scale(0.707)" xlink:href="#MJMAIN-33" x="2531" y="0"></use>
<g transform="translate(2143,0)">
<g transform="translate(120,0)">
<rect stroke="none" x="0" y="146"></rect>
<use transform="scale(0.5)" xlink:href="#MJMAIN-31" x="119" y="644"></use>
<use transform="scale(0.5)" xlink:href="#MJMAIN-32" x="119" y="-604"></use>
</g>
</g>
<g transform="translate(2754,0)">
<use transform="scale(0.707)" xlink:href="#MJMAIN-29" x="0" y="0"></use>
<use transform="scale(0.5)" xlink:href="#MJMAIN-32" x="550" y="675"></use>
</g>
</g>
<g transform="translate(89,-566)">
<use transform="scale(0.707)" xlink:href="#MJMAIN-28" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#MJMAIN-2212" x="389" y="0"></use>
<use transform="scale(0.707)" xlink:href="#MJMAIN-32" x="1168" y="0"></use>
<g transform="translate(1179,0)">
<g transform="translate(120,0)">
<rect stroke="none" x="0" y="146"></rect>
<use transform="scale(0.5)" xlink:href="#MJMAIN-32" x="119" y="644"></use>
<use transform="scale(0.5)" xlink:href="#MJMAIN-33" x="119" y="-603"></use>
</g>
</g>
<use transform="scale(0.707)" xlink:href="#MJMAIN-2212" x="2531" y="0"></use>
<use transform="scale(0.707)" xlink:href="#MJMAIN-35" x="3310" y="0"></use>
<g transform="translate(2694,0)">
<use transform="scale(0.707)" xlink:href="#MJMAIN-29" x="0" y="0"></use>
<use transform="scale(0.5)" xlink:href="#MJMAIN-33" x="550" y="675"></use>
</g>
</g>
</g>
<use xlink:href="#MJMAIN-2C" x="3710" y="0"></use>
</g>
</svg> </span>
<script type="math/tex"
id="MathJax-Element-1">\frac7\frac17+(3\frac12)^2(-2\frac23-5)^3,</script> correct to 4
significant figures.
【问题讨论】：
svg 元素缺少 MathJax 为对齐（和其他内容）添加的样式属性。这可能在消毒时被剥离了。 【参考方案1】：解决了这个问题。原来我缺少mPDF documentation 中指定的样式属性。
正确的代码应该是：
<style>
div.question
page-break-inside: avoid;
position: relative;
margin: 20px;
text-align: justify;
vertical-align: text-top;
line-height: 2.5em;
font-weight: bold;
/* This helps alignment for inline equations */
img
vertical-align: middle;
</style>
【讨论】：
以上是关于使用 mPDF 将 MathJax 方程输出到 PDF 时未正确对齐的主要内容，如果未能解决你的问题，请参考以下文章
通过在没有 CSS 的情况下直接作用于 MathJax 来为方程添加彩色背景