Font awesome support for PDF #36
Comments
|
I write via a base64 encoded stream to avoid writing a temporary file when supporting people who just want PDF output (which is probably most users). If doing this causes problems I would consider writing a temporary file. But I would like to reproduce this bug first, and see if there's an alternative. I tried just dumping into resume.md and running So, could you please share exact steps to reproduce, i.e. a minimal resume.md file and, if necessary, a resume.css file, and the version of Chrome and OS you are using? |
|
@mikepqr I just tried this and I get the same result when I put the raw SVG content into the .md file (the icon shows up in both HTML and PDF). If nothing else that should be a workaround for now, but I'll do some more digging and see if I can figure out what's going on. If you want to reproduce the issue:
|
|
Ah. I assume Chrome's headless print rendering refuses to execute remote js on security grounds (probably quite rightly). If that's the case then your original idea (writing out the HTML to a file, rather than passing it as encoded input) will not help. If you can figure out a way around this (e.g. a command line switch) then I'll happily take a look, but given the use case of resume.py (render a boring resume) it's going to be a hard sell. Your best bet is either the workaround you suggested (i.e. inline the SVG) or use FA without the js. You can do the latter by adding e.g. |
|
Unfortunately, using the CSS approach instead of JS resulted in the same issue for me (no icons in the PDF). The (quite hacky) workaround I've found for now is this:
.svg-inline--fa {
display: var(--fa-display,inline-block);
height: 1em;
overflow: visible;
vertical-align: -.125em;
}
The CSS content is necessary to properly size and position the icons in the PDF file (otherwise they take up the entire page). It appears the Font Awesome JavaScript produces SVG and CSS content, but does not place them in the HTML file itself so we have to get the content using Chrome's inspect function. Again, quite a hacky solution, but maybe there is a more automated way to extract this SVG and CSS content? |
|
I confirm that embedding the font via CSS doesn't work, i.e. the icons appear in the HTML output, but do not appear in the PDF output. I suspect this is a limitation of Chrome rather than font-awesome (or resume.py, which essentially just calls |
|
Does embedding the content of the font awesome JavaScript file solve the problem? |
First of all, thanks for this repo! I really like this workflow. I did run into one issue when I inserted Font Awesome icons via a Font Awesome kit. The icons show up fine on the HTML version of the resume, but they do not show up in the PDF.
However, if I manually use my Chrome browser to print the HTML resume to PDF then the icons do show up in the saved PDF. This makes me think the base64 HTML encoding step might be causing an issue with the Font Awesome icons. Do you know if there is a different way I can encode the HTML content so that the Font Awesome icons will be preserved?
For reference below is the HTML content for a Font Awesome icon (you can set the kit to use either the web font or the SVG version).
Web font (default):
SVG:
The text was updated successfully, but these errors were encountered: