mike-ward
PDF Math Rendering Issues
Hello,
I created a MarkDown document with the following code:
I encountered and issue with the PDF rendering. It seems the PDF is rendered before the Math Equations rendering is finished hence part of the math is missing. Moreover some of the math is wrongly rendered.
Here is the PDF (See last page for the rendering issue).
I really liked the feature pasting image automatically uploads them to imgur - Amazing!
Thank You.
P. S. The HTML code and the "Preview" wasn't synced. I tried the code on MacDown and the PDF was perfectly rendered and the preview was synced. Since MacDown is open source, why not copy its preview syncing algorithm?
Thank You.
Your best bet for rendering PDF that looks exactly like the preview is to "Print" the preview to a PDF converter. There are lots of free print to PDF programs out there.
Why? Because JavaScript is being run after the rendering. It's a bit like saying my animations are not showing up in PDF. For most documents, MDE's PDF conversion will work fine, but it will fall down on documents with extensive post processing (MathJax for instance). The only way to really render a page for conversion is to Print it (that I know of).
I'll think about an option to add a, "use this printer to write PDF". In the meantime, experiment with the print to PDF programs and see if that gives you better results.
I assume the last bit is about scroll syncing. MDE actually has a more sophisticated algorithm than MacDown.
MacDown's scrollSync is a simplistic percentage of document height plus scroll. Here's the relevant code.
previewContentBounds.origin.y =
ratio * (previewDocumentView.frame.size.height
- previewContentBounds.size.height);
It's pretty much the same algorithm everyone else uses and it doesn't work on anything but short documents.
I viewed your document and indeed MDE was dead on accurate. If It even correctly accounts for image heights.
Hi Mike, That's strange, on my MDE its location got reset with each move. I will look into it again and if I reproduce what I saw I will share with you.
Regarding the PDF, well MacDown generated perfect PDF. Is that any help?
Thank you for being responsive. You built the best Windows MarkDown editor, I like it.
MacDown prints to convert to PDF.
- (IBAction)exportPdf:(id)sender
{
NSSavePanel *panel = [NSSavePanel savePanel];
panel.allowedFileTypes = @[@"pdf"];
if (self.presumedFileName)
panel.nameFieldStringValue = self.presumedFileName;
NSWindow *w = nil;
NSArray *windowControllers = self.windowControllers;
if (windowControllers.count > 0)
w = [windowControllers[0] window];
[panel beginSheetModalForWindow:w completionHandler:^(NSInteger result) {
if (result != NSFileHandlingPanelOKButton)
return;
NSDictionary *settings = @{
NSPrintJobDisposition: NSPrintSaveJob,
NSPrintJobSavingURL: panel.URL,
};
[self printDocumentWithSettings:settings showPrintPanel:NO delegate:nil
didPrintSelector:NULL contextInfo:NULL];
}];
}
Maybe there's a PDF printer by default in Macs. I don't know. Don't use Macs and never will.
Well, I want to minimize my OS X usage as well :-).
I see your point.
Thank You.
In general, I don't see a way to handle PDF printing when post processing in JavaScript occurs. The Print to PDF option is a viable workaround. Not ideal but an acceptable alternative. Feel free reopen if you have additional ideas.
When I tried to use "Print" function from MDE I had an issue. The "Links" had the "Blue" color yet they were not rendered as links.
I don't think "Print" form the HTML View is a viable solution. We need something else.
Can it be copied from StackEdit? Its PDF output is really great.
Ah, I see how they did it. I'm using the same PDF toolkit but they figured out how to wait for the font rendering. Here's the relevant code:
function waitForJavaScript() {
if(window.MathJax) {
// Amazon EC2: fix TeX font detection
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Startup",function () {
var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
HTMLCSS.Font.checkWebFont = function (check,font,callback) {
if (check.time(callback)) {
return;
}
if (check.total === 0) {
HTMLCSS.Font.testFont(font);
setTimeout(check,200);
} else {
callback(check.STATUS.OK);
}
};
});
MathJax.Hub.Queue(function () {
window.status = 'done';
});
}
else {
setTimeout(function() {
window.status = 'done';
}, 2000);
}
}
Not sure if it will work in MDE but worth a try.
This is great catch!
The lovely world of Open Source :-).
Mike, Thank you for this lovely program.
OK, I've got math rendering working. Only problem is the font for the math is stupid small. Anyone have any ideas how to configure wkhtmltopdf to handle this? I tried messing with the MathJax settings but they don't seem to effect wkhtmltopdf's rendering.
@mike-ward , It seems not all math was rendered. For example, see last line on page 4.
Thank You.
Hi Mike,
I've been messing with wkhtmltopdf and some html files (nothing created with Markdown Edit), and found the same issue with small fonts, solved it applying this CSS rule to the html:
.MathJax_CHTML {
font-size: 1em !important;
}
MathJax_CHTML is a class added by MathJax.
This is how I'm running wkhtmltopdf (command line in Windows):
start wkhtmltopdf.exe --javascript-delay 5000 test.xhtml .test.pdf
One more clue, about the example.pdf, maybe reason why it is not rendering is just a MathJax typo, check spaces surrounding $:
$v_P = n(v_Q)$ // renders
$v_P = n(v_Q) $ // doesn't render
$ v_P = n(v_Q)$ // doesn't render
$ v_P = n(v_Q) $ // doesn't render
Hope this helps,
Juan
I don't normally run Windows — it's weird to offer help on a program I've never used ;-) but I have experience with MathJax and love contributing around markdown/math — let me know if I can help.
It's possible to run a callback after all math is rendered — would that help?
If MathJax's async rendering is a pain, consider KaTeX which has fast synchronous rendering (a JS function gets formula string, returns HTML string).
How does MDE's builtin printing work?
var document = Browser.Document as IHTMLDocument2;
document?.execCommand("Print", true);
doesn't that print from the existing html view with math already rendered? or does it tell windows to print the html file?
P.S. There are also ways to produce a document that doesn't require JS. Obviously you wouldn't want to bundle LaTeX, and probably not a NodeJS runtime. But you already run JS in the preview. If you ask MathJax for CHTML or SVG output, or switch to KaTeX, you could export the DOM after rendering, and that HTML would have portable and JS-free math (still relying on some css and webfonts). IIRC KaTeX doesn't need a DOM, could run under any JS engine, if you can access one from C# (ClearScript?)...
P.S. http://markdownedit.com/markdown-edit-math-equations is 404.
Hi @cben , It's great to have you suggestions.
Just one remark, KaTeX isn't good enough yet.
It still doesn't support many environments that MathJaX supports.
Moreover MathJaX, due to its synchronous rendering, supports many features which are important if you use math in the document (Defining many things for the rendering, new commands, etc...).
It will be nice to have a choice (KaTeX or MathJaX) but if only one of them, then MathJaX.
Any recommendations assuming MathJaX is included?