For a symfony project, i am using the snappy bundle, that used wkhtmltopdf to convert the webpage into a pdf. I am using google fonts to use different font faces. The font shows up fine on the web page, but after converting to a pdf, any sections that use font faces have bad spacing between letters. Is there any way to fix the spacing on the letters?
Image of PDF: (using google font, EB Garamond)
pdf example image
html code:
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
Normal Text: qwertyuiopasdfghjklzxcvbnm<br>
<div style="font-family: 'EB Garamond', serif;">
google EB Garamond: qwertyuiopasdfghjklzxcvbnm<br>
google EB Garamond: workstation ergonomic evaluations.</div><br>
Normal Text: workstation ergonomic evaluations.
I have also tried using other fonts from other soruces, like adobe typekit and still have the same problem.
Try adding the '--dpi 96' switch to the wkhtmltopdf command line.
I had an issue with letters getting joined together and using --dpi 96 in combination with letter-spacing:0.09em; solved it
We faced the same problem. As setting the DPI to only 96 (print usually uses at least 300) resulted in blurry images, we tried to use SVG font files, which did the trick.
Related
I am struggling to convert my PCL file to PDF using GhostScript. The conversion itself is not issue, but it appears that Cyrillic is problem. As you can see on attached picture, it considers only the colon and period symbol.
I tried different fonts and symbol sets, but I never got correct result.
I was also trying to convert cyrillic TTF to soft font via PCL Paraphernalia but I was not successfull with using the font in my PCL.
Using following command:
gpcl6win64.exe -dNOPAUSE -sDEVICE=pdfwrite -dNOCACHE -dRENDERTTNOTDEF -sOutputFile=output.pdf CYR.prn
My file:
PDF output:
Please advise.
Thank you
At a guess, you have not supplied the font, or the font you are using does not contain Cyrillic glyphs. Colon and period are obviously going to be present in any Latin font, Cyrillic glyphs generally are not. Any glyphs not present in the font will be replaced by the /.notdef glyph, which is usually a non-marking glyph (except for TrueType fonts where it's usually a hollow square).
If that's your entire PCL file then I can't say I'm surprised it doesn't work as you expect, you haven't downloaded a font. I don't know PCL well enough to say exactly what that minimal file is doing but here's a thought: try using gpclwin64 to render the PCL to the display. If that doesn't work then there's no way it's going to result in a PDF file which works.
Basically you're going to have to download a soft font containing the glyphs you want to use encoded at the character codes you want to use.
NB: I'd strongly advise against using -dNOCACHE because that will hurt performance on large text-heavy files.
I'm facing an ennoying problem.
When I create a PDF from HTML, using the CSS property "letter-spacing" on some divs, browser (Firefox) and PDF (Gecko) renderings are different.
Actually, it appears that ABCPdf is adding somehow a constant to my value.
For example, if I declare a 1.1px letter-spacing, ABCPdf renders a 0.8px. This "constant" depends on the font-size (here 12px).
I'm using a monospace font : Courier New, Courier, monospace
What should I check ? I'm already using FontEmbed = true, in order to have a better quality.
I can't ugrapde my version of ABCPdf.
Thanks for reading :)
I think you are better off using a style for print media like #media print {} to adjust font spacing accordingly.
ABCPdf is using Gecko 21 which is quite a bit behind current Firefox. That's probably what is causing the difference.
I'm writing my thesis in Sublime Text 3 but can't seem to work out how to resize the images that I need to insert. Or how to wrap the text around the images. Any ideas?
This is how I'm inserting images:
I want to make the images a little smaller.
I also want to know how to align the picture to the left/centre/right, and then wrap my text around it....
This question is actually unrelated to Sublime Text. You are writing a markdown document which could be written in any text editor; the particular editor has no control over how your document is rendered to HTML (and the sizing of images is part of this rendering). This is instead decided by the markdown interpreter and the content of the document.
There are several widely used versions of the Markdown interpreter that support different features. Most do not support special syntax for resizing images, but MultiMarkdown does. Adapted from the docs:
This is a formatted ![image][] and a [link][] with attributes.
...more text...
[image]: http://path.to/image "Image title" width=40px height=400px
[link]: http://path.to/link.html "Some Link" class=external
style="border: solid black 1px;"
Note that this syntax lets you insert arbitrary HTML attributes for images and links.
On another note, one of the great things about Markdown (all versions of the interpreter) is that you can just use HTML when you need to. So, if you don't use MultiMarkdown, in place of your current markdown image syntax you could put this to make a 200 by 200 image:
<img src="/path/to/your/image.jpg" style="width: 200px;height: 200px"/>
Finally, you can resize the images before insertion using a program like imagemagick.
I've got wkhtmltopdf working with a header and footer image, and everything spaced well. But the task is to use a full page background image which looks like a sort of frame, with the page text in the center. I thought I could place this in the header, but it doesn't work - maybe the use of a full page header doesn't make sense here.
(These are multi-page documents, which could be of any length).
Any ideas of how to do this?
Thanks in advance.
John
I have a similar problem, this is what I understood so far:
It's not possible to center the text vertically on the page simply via CSS+wkhtmltopdf on a multi-page document (might find some complex javascript stuff, but it wasn't worth in my case);
since wkhtmltopdf uses webkit, and webkit doesn't support #page rules, it's not possible to define a "paged" background via CSS
Hence what? You will need a little hack and use pdftk
1. In your CSS define:
body {
background: white;
}
(if you have a body tag in your header.html and footer.html make sure that rule applies to them as well)
2. Create a one-page pdf with your background image (using the same page size as your final pdf)
3. Install pdftk and from command line:
$ pdftk yourfile.pdf background background.pdf output yourfile_b.pdf
4. Enjoy :)
You can use a solution BASED on webkit, like HTM2PDF - you'll be able to add a feature called 'stationary' where you can integrate any image as a full page background.
more info at the documentation from the API page
I have a png image with text I cant identify, is there any way maybe though adobe photoshop or any other means to recognize font-family on an image.
there are a few web sites that can find the font face for you, like http://new.myfonts.com/WhatTheFont/
Photoshop now has a built-in font recognition feature as of CC 2015.5 called Match Font.
Simply go to the Type menu and select Match Font and then crop the area to the font you'd like to try to recognize.
Additionally here are other resources to help you identify a font. (I pulled this list from a Graphic Design Stack Exchange Meta Post)
WhatTheFont!
Identifont
Serif Font Identification Guide
What Font is
Fontspring Matcherator
There is a free Photoshop plugin Font Detector that uses WhatTheFont service to recognize fonts on an image inside a selection.