Font size too small when rendering with wkhtmltoimage

Question

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?

have you tried the following option? --disable-smart-shrinking (or in a config file like: disable-smart-shrinking: true) — Julesezaar, Jul 12 '19 at 07:30

Maximillian Laumeister · Answer 1 · 2018-10-09T23:03:23.450

In this case wkhtmltoimage is working properly, you just need to adjust its fontRatio setting to make the text bigger. Alternatively, you can increase the --width that 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 fontRatio argument like this. Smaller values produce larger text:

$('body').flowtype({
  fontRatio: 15
});

The default fontRatio is 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:

$('.c1').flowtype(); // Default, fontRatio = 30

$('.c2').flowtype({fontRatio: 15});

.c1, .c2 {
  width: 300px;
  border: solid red 2px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fastcdn.org/FlowType.JS/1.1/flowtype.js"></script>

<div class="c1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>
<div class="c2">Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

Your example, exactly as it is, worked fine for me, too. When I started to make adjustments though, it started to fall apart again here and there. It also made me realize, that flowtype probably isn't what I need, because I am not aiming for a certain amount of characters in a line. Nevertheless, thank you for your efforts — Sandro, Oct 15 '18 at 08:02

Font size too small when rendering with wkhtmltoimage

1 Answers1