Forum Feature requests

Improved support for KaTeX (Possible bug?)

theadventmaster
Hello,

We have a DocRaptor customer who's provided a sample document using KaTeX that renders inline fractions with additional offsets from the top vs alignment being perfect in web browsers.

They've been kind enough to provide a minimal example below. (Since we use PhantomJS to process most JavaScript documents in DocRaptor, I'm attaching the JS-pre-processed HTML and PDF as well.)

<!DOCTYPE html>
<html>
    <head>
		<!-- This tells Prince what character set we are using. Don't remove it! -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>KATEX TEST</title>
        <meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" media="all">
		<script src="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js"></script>
		<script>
			var finishedProcessing = false;

			function runKatexPostProcessing() {
				var eles = document.querySelectorAll(".katex-eq:not(.katex-rendered)");

				for (idx = 0; idx < eles.length; idx++) {
					var ele = eles[idx];
					ele.classList.add("katex-rendered");

					try {
						katex.render(
							ele.textContent,
							ele,
							{
								displayMode: ele.getAttribute("data-katex-display") === 'true',
								throwOnError: false
							}
						);
					} catch (n) {
						ele.style.color = "red";
						ele.textContent = n.message;
					}
				}

				setTimeout(function() {
					finishedProcessing = true;
				}, 3500);
			}

			function docraptorJavaScriptFinished() {
				return finishedProcessing;
			}

			document.addEventListener("DOMContentLoaded", runKatexPostProcessing);
		</script>
		<style type="text/css">
			/* Katex Overrides */
			.katex-eq {
				display: block;
				margin-bottom: 1.5rem;
			}
		</style>
    </head>
    <body>
		<span class="katex-eq" data-katex-display="false">Writes\ per\ second= \left[ ~\frac{A}{2} \times \sin sin~ \left( ~\frac{2 \pi x}{f}~- \frac{ \pi }{2}~ \right) +b+ \frac{A}{2}~ \right] \times R_{ \sigma =0.5}^{ \mu =1} \times 0.3</span>
		
		<span class="katex-eq" data-katex-display="false">Reads\ per\ second=  \left[ ~\frac{A}{2}  \times \sin sin~ \left( ~\frac{2 \pi x}{f}~-  \frac{ \pi }{2}~ \right)  +b+ \frac{A}{2}~ \right]   \times  R_{ \sigma =0.5}^{ \mu =1}</span>
    </body>
</html>


We've added a timeout just in case KaTeX needed more time for layout passes (MathJax does sometimes), but that doesn't seem to be the case here.

I was wondering if there was a solution to this anyone can think of (other than the manual overrides we're doing now) or if there's some CSS or other rendering changes that would be needed on the PrinceXML side to render this the same way as is done in web browsers.

Best,
Alex
DocRaptor Support
  1. katex_example.html2.1 kB
  2. katex_example.pdf20.7 kB
  3. katex_example_js_processed.html21.0 kB
    JS-pre-processed file
  4. katex_example_js_processed.pdf20.7 kB
    JS-pre-processed PDF
mikeday
Thanks we will investigate this issue.