mPDF Manual – What Else Can I Do

# Math with MathJax 2

1. Adapt the page in which you are testing/writing the Math formulae

• Ideally set the default output to SVG. Otherwise the user will need to select this from: Math Settings » Math Renderer » SVG
• Add code for a button to send the processed SVG to your PHP script

Example of MathJax page

<!DOCTYPE html>
<html>
<!-- This line adds MathJax to the page with default SVG output -->
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<body>
<h3>The Cauchy-Schwarz Inequality (TeX)</h3>

$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$

<h3>Standard Deviation (MathML)</h3>

<math display="block"><mrow><mi>&amp;#x03c3;</mi><mo&ge;</mo><msqrt><mrow><mfrac><mrow><mn>1</mn></mrow><mrow><mi>N</mi></mrow></mfrac><mstyle displaystyle="true"><mrow><munderover><mrow><mo>&amp;#x2211;</mo></mrow><mrow><mi>i</mi><mo&ge;</mo><mn>1</mn></mrow><mrow><mi>N</mi></mrow></munderover><mrow><msup><mrow><mo stretchy="false">(</mo><msub><mrow><mi>x</mi></mrow><mrow><mi>i</mi></mrow></msub><mo>&amp;#x2212;</mo><mi>&amp;#x03bc;</mi><mo stretchy="false">)</mo></mrow><mrow><mn>2</mn></mrow></msup></mrow></mrow></mstyle></mrow></msqrt><mo>.</mo></mrow>[/itex]

<h3>Inline equation (TeX)</h3>

Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is
also important. This expression $$\sqrt{3x-1}+(1+x)^2$$ is an example of an inline equation.  As you see, MathJax
equations can be used this way as well, without unduly disturbing the spacing between lines.

<!-- This block of code adds a button to send the processed HTML code to your script: example_test.php -->

<div id="mpdf-create">
<form autocomplete="off" action="example_test.php" method="POST" id="pdfform" onSubmit="document.getElementById('bodydata').value=encodeURIComponent(document.body.innerHTML);">
<input type="submit" value="PDF" name="submit"/>
<input type="hidden" value="" id="bodydata" name="bodydata" />
</form>
</div>
</body>
</html>


2. Now you need a PHP script (in this example: example_test.php) which processes the output code from MathJax so that it is readable by mPDF:

Example of 1st part of example_test.php

<?php
// You should include a check for unwanted external referrers to prevent
// calls on this script from external websites!
$mpdf = new \Mpdf\Mpdf('');$html = $_POST['bodydata'];$html = urldecode($html); preg_match('/<svg[^>]*>\s*(<defs.*?>.*?<\/defs>)\s*<\/svg>/',$html, $m);$defs = $m[1];$html = preg_replace('/<svg[^>]*>\s*<defs.*?<\/defs>\s*<\/svg>/', '', $html);$html = preg_replace('/(<svg[^>]*>)/', "\\1".$defs,$html);
preg_match_all('/<svg([^>]*)style="(.*?)"/', $html,$m);

for ($i = 0;$i < count($m[0]);$i++) {
$style =$m[2][$i]; preg_match('/width: (.*?);/',$style, $wr);$w = $mpdf->ConvertSize($wr[1], 0, $mpdf->FontSize) *$mpdf->dpi/25.4;

preg_match('/height: (.*?);/',$style,$hr);
$h =$mpdf->ConvertSize($hr[1], 0,$mpdf->FontSize) * $mpdf->dpi/25.4;$replace = '<svg'.$m[1][$i].' width="'.$w.'" height="'.$h.'" style="'.$m[2][$i].'"';
$html = str_replace($m[0][$i],$replace, $html); }  3. a. Finally you can create a PDF document directly based on the MathJax web page submitted: Example of 2nd part of example_test.php creating a PDF document <?php // ADD a stylesheet$stylesheet = '
/* This helps alignment for inline equations */
img {
vertical-align: middle;
}

/* This sets padding for display equations (but not in-line ones) */
.MathJax_SVG_Display {
}

/* This prevents the Create PDF button being reproduced in the PDF document */
/* Use this method to suppress other parts of the web-page from displaying */
#mpdf-create {
display: none;
}

/* Add any other CSS styling here for the rest of the document */
/* The CSS/stylesheet information from the original page is not accessible here */
';

$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);

$mpdf->Output(); exit;  b. Or you could output the prepared SVG code suitable for including directly in your PDF documents: Example of 2nd part of example_test.php to output the code to a browser <?php ... // To output SVG files (one for each formula) readable by mPDF as text output header('Content-type: text/plain'); preg_match_all('/<svg(.*?)<\/svg>/',$html, $m); for ($i=0; $i < count($m[0]); $i++) {$svg = $m[0][$i];
$svg = preg_replace('/>/',">\n",$svg);    // Just add some new lines

echo \$svg."\n\n";
}



See an example of output: https://github.com/mpdf/mpdf-examples/blob/master/MathJaxSample.htm