The font size appears significantly smaller than expected when using wkhtmltoimage to render

Question

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac.

Below is a snippet from my Test.html file:

<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>

You can find more information about Flowtype here.

Although this setup works in the browser, it does not render correctly through wkhtmltoimage.

When I use the command line below:

wkhtmltoimage --width 300 --height 100 Test.html Test.png

The text appears too small in the resulting image. Could this be related to the window size?

I have also tried using wkhtmltopdf to create a PDF, but encountered similar issues.

Any suggestions or ideas to resolve this problem?

javascript html css wkhtmltopdf wkhtmltoimage

Answer 1

Answer №1

If you are using `wkhtmltoimage` and the text appears too small, you can adjust the `fontRatio` setting to make it bigger. Another option is to increase the `--width` parameter to match a standard browser window size, for example, 1200px.

The issue here is that with a width of only 300px, FlowType aims for 45-75 characters per line by default. With each line being around 60 characters long, your characters end up being just 5px wide, hence the text looks tiny. Try resizing your browser window to 300px to see how the text matches what `wkhtmltoimage` produces.

To modify the font size basis in FlowType, use the `fontRatio` argument like this. Lower values will result in larger text:

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

The default value for `fontRatio` is 30, so experimenting with smaller values like 15 can help increase the text size.

For a practical demonstration, here is an example showcasing the impact of different `fontRatio` values on an element with a width of `300px`.

Screenshot:

https://i.sstatic.net/gRmxr.png

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>

Answer 2

If you are using `wkhtmltoimage` and the text appears too small, you can adjust the `fontRatio` setting to make it bigger. Another option is to increase the `--width` parameter to match a standard browser window size, for example, 1200px.

The issue here is that with a width of only 300px, FlowType aims for 45-75 characters per line by default. With each line being around 60 characters long, your characters end up being just 5px wide, hence the text looks tiny. Try resizing your browser window to 300px to see how the text matches what `wkhtmltoimage` produces.

To modify the font size basis in FlowType, use the `fontRatio` argument like this. Lower values will result in larger text:

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

The default value for `fontRatio` is 30, so experimenting with smaller values like 15 can help increase the text size.

For a practical demonstration, here is an example showcasing the impact of different `fontRatio` values on an element with a width of `300px`.

Screenshot:

https://i.sstatic.net/gRmxr.png

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>

The font size appears significantly smaller than expected when using wkhtmltoimage to render

Answer №1

Similar questions

How to use jQuery to delete specific table rows while keeping the first row safe from removal

Display movie details in a responsive column layout that condenses into a single column

Navigating the ropes of push-pull functionality in Bootstrap 5

A guide on retrieving and resetting the value of a radio button within a table

How can I streamline a kendo UI MVC project by eliminating unnecessary components?

After clicking in the Firefox browser, the Window.open function is unexpectedly showing [object Window]

NextJs getStaticPaths function is failing to render the correct page, resulting in a 404 error message being displayed

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

Converting a base64 string to a PNG format for uploading to an S3 bucket from the frontend

Change the rectangle's position by rotating another rectangle

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

CSS - Overlapping elements on smaller screens due to being stacked

Adjusting input height with CSS in Google Chrome

Issues with location forecasts and .getPlace() when utilizing the Google Maps loader for Place Autocomplete in Vue are causing functionality problems

Steps for resetting the ng-multiselect-dropdown

`The best way to access a JavaScript variable from PHP`

Issue with Masonry layout not adjusting to change in window size

Merging two distinct arrays of objects in JavaScript can be achieved by utilizing various methods and

Oops! Issue: The mat-form-field is missing a MatFormFieldControl when referencing the API guide

Break up the JavaScript code into modules to avoid duplicating blocks of code detected by