I am converting an HTML string
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Anek Latin:wght@300;400;700&display=swap' rel='stylesheet'>
</head>
<body style="font-family: "Anek Latin","Cairo", sans-serif;line-height: 1.0;font-size: 55px;">
<!-- Start your code here -->
<section class="section content" style="padding: 24px 36px;">
<div class="row-1" style="display: flex">
<div class="tags" style="display: flex;font-size: 27px;text-transform: uppercase;line-height: normal;">
<p style="padding: 0; margin: 2px 2px; font-weight: 400;margin-left:40px;">World</p>
<p style="padding: 0; margin: 2px 2px; font-weight: 400;">></p>
<p style="padding: 0; margin: 2px 2px; font-weight: 400;">India  |</p>
</div>
 
<div class="image-credits" style="display: flex;font-size: 27px;text-transform: uppercase;line-height: normal;">
<p style="padding: 0; margin: 2px 2px">Photo Credit:</p>
<p style="padding: 0; margin: 2px 2px"></p>
</div>
</div>
<p class="title" style="color: #6d44bc;padding: 0;margin: 2px 2px;margin-left:40px;font-weight: 600;line-height: 1.0;">
बड़ी टेक कंपनियों में बड़े पैमाने पर छंटनी जारी है
</p>
<div class="summary" style="font-size: 38px;line-height:1.3;">
<ul style="margin: 4px 4px;">
<li>
<p style='font-weight: 400 !important;margin: 10px 0 !important;'>
फेसबुक, इंस्टाग्राम और व्हाट्सएप की मूल कंपनी ने अपने कार्यबल में 13 प्रतिशत की कमी की और अगले साल की पहली तिमाही तक हायरिंग फ्रीज को बढ़ा दिया।</p>
</li>
<li>
<p style='font-weight: 400 !important;margin: 10px 0 !important;'>
छंटनी विभागों और क्षेत्रों में की गई, भर्ती और व्यावसायिक टीमों जैसे क्षेत्रों में दूसरों की तुलना में अधिक प्रभावित हुए।</p>
</li>
<li>
<p style='font-weight: 400 !important;margin: 10px 0 !important;'>
फेसबुक, इंस्टाग्राम और व्हाट्सएप की मूल कंपनी ने अपने कार्यबल में 13 प्रतिशत की कमी की और अगले साल की पहली तिमाही तक हायरिंग फ्रीज को बढ़ा दिया।</p>
</li>
</ul>
</div>
<div class="image-credits footer" style="display: flex;font-size: 27px;margin-left:40px;text-transform: uppercase;line-height: normal;padding-inline-start: 40px;">
<p style="padding: 0; margin: 2px 2px"; font-weight: 400;>Content Credit:</p>
<p style="padding: 0; margin: 2px 2px"; font-weight: 400;> | </p>
</div>
</section>
</body>
</html>
I am using following code snippet to convert it to image.
options = {
"format": 'jpg',
"xvfb": "",
"zoom": 1,
"width": 964,
"height": 1000,
"quality": 100,
"encoding": "UTF-8"
}
imgkit.from_string(html_body, HTML_IMAGE_TEMP_LOCATION["full_url"], options=options)
where html_body contains the HTML string provided above and HTML_IMAGE_TEMP_LOCATION["full_url"] is the full path to temporary image file.
The resulting output is:
I've tried including different fonts that support hindi script but the response is same. Is there something I am missing on ?
