My goal is to render text into an image. I'd like the layout and size to be static and the font size to adjust to how much text is to be rendered. My tool of choice is wkhtmltoimage 0.12.5, the idea being that this way I can make use of the many css styling options. I am on a Mac btw.
Here is my Test.html
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="flowtype.js"></script>
</head>
<body>
<div>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div>
<script type="text/javascript">
$('body').flowtype();
</script>
</body>
</html>
Flowtype: http://simplefocus.com/flowtype/
That works in the browser, but not when rendering through wkhtmltoimage.
My commandline call is
wkhtmltoimage --width 300 --height 100 Test.html Test.png
The text appears ridiculously small. Something wrong with the window size?
I'd also be happy to use wkhtmltopdf and render to a pdf, but I couldn't get it to work there either.
Ideas?
In this case
wkhtmltoimageis working properly, you just need to adjust itsfontRatiosetting to make the text bigger. Alternatively, you can increase the--widththat you are rendering at so that it's more in line with a standard browser window, e.g. 1200px.The issue is that 300px is a very small width, and FlowType targets 45-75 characters per line by default. If we assume each line is 60 characters long for instance, that means each of your characters is only 5px wide, so that's why the text looks too small. If you size your browser window down to 300px, you will see that the text is the same size as it renders in
wkhtmltoimage.To increase FlowType's font size basis, use the
fontRatioargument like this. Smaller values produce larger text:The default
fontRatiois 30, so try a smaller like 15 to increase your text size.Here is a runnable example that shows the difference between the different fontRatio values for an element of width
300px.Screenshot:
Code Snippet: