Слишком маленький размер шрифта при рендеринге с помощью wkhtmltoimage - PullRequest
Новая
       75

Слишком маленький размер шрифта при рендеринге с помощью wkhtmltoimage

0 голосов
/ 10 октября 2018

Моя цель - передать текст в изображение.Я хотел бы, чтобы макет и размер были статичными, а размер шрифта регулировался в зависимости от объема отображаемого текста.Мой инструмент выбора - wkhtmltoimage 0.12.5, идея в том, что таким образом я могу использовать множество опций стилей CSS.Я на Mac между прочим.

Вот мой 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>

Тип потока: http://simplefocus.com/flowtype/

Это работает в браузере, но не при рендеринге черезwkhtmltoimage.

Мой вызов командной строки: 

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

Текст выглядит смехотворно маленьким.Что-то не так с размером окна?

Я также был бы рад использовать wkhtmltopdf и выполнить рендеринг в pdf, но я также не смог заставить его работать там.

Идеи?

1 Ответ

0 голосов
/ 10 октября 2018

В этом случае wkhtmltoimage работает правильно, вам просто нужно настроить его fontRatio, чтобы сделать текст больше.В качестве альтернативы, вы можете увеличить --width, с которым вы рендеринге, чтобы оно больше соответствовало стандартному окну браузера, например, 1200px.

Проблема в том, что 300px - это очень маленькая ширина, и FlowType нацеливается на 45-75 символов в строке по умолчанию.Если мы предположим, что каждая строка имеет длину 60 символов, например, это означает, что каждый из ваших символов имеет ширину всего 5 пикселей, поэтому текст выглядит слишком маленьким.Если вы уменьшите размер окна вашего браузера до 300 пикселей, вы увидите, что текст имеет тот же размер, что и в wkhtmltoimage.

Чтобы увеличить основание размера шрифта FlowType, используйте аргумент fontRatio, подобный этому.Меньшие значения приводят к большему тексту: 

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

По умолчанию fontRatio равен 30, поэтому попробуйте уменьшить размер, например, на 15, чтобы увеличить размер текста.

Вот исполняемый пример, который показывает разницумежду различными значениями fontRatio для элемента ширины 300px.

Снимок экрана:

Font size comparison

Фрагмент кода: 

$('.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>
...