Generate Hindi Social Media Cards from HTML for Instagram

To generate a Hindi social media card from HTML, write the copy in Unicode Devanagari, use a font that contains the glyphs you need, render the page in a browser, and inspect the exported image for shaping, line breaks, and clipping. The HTML source can look correct while the final raster image still has a missing glyph or a cropped vowel mark, so review the actual image before uploading.

This guide uses a local HTML file and Playwright to create a PNG. It does not assume a particular Instagram pixel size or aspect ratio: verify current feed guidance before choosing your final canvas dimensions.

1. Build the card in HTML and CSS

Save this as card.html. The sample uses Unicode Hindi text, a system font fallback stack, and a fixed canvas that you can change to match the dimensions you have verified for your use case. For consistent output across machines, choose and install a Devanagari-capable font, then name it explicitly in font-family.

<!doctype html>
<html lang="hi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hindi social card</title>
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      background: #e9e5dc;
      font-family: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
    }
    .card {
      width: 1080px;
      height: 1080px;
      padding: 96px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #172321;
      background: #f8f5ed;
    }
    .eyebrow { font-size: 28px; color: #42675d; }
    h1 {
      max-width: 850px;
      margin: 40px 0;
      font-size: 76px;
      line-height: 1.28;
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .supporting { max-width: 820px; font-size: 34px; line-height: 1.55; }
    .footer { font-size: 24px; color: #42675d; }
  </style>
</head>
<body>
  <main class="card">
    <div class="eyebrow">डिजिटल नोट्स</div>
    <div>
      <h1>छोटे कदम, बेहतर आदतें</h1>
      <p class="supporting">हर दिन थोड़ा समय अपने सबसे ज़रूरी काम को दें।</p>
    </div>
    <div class="footer">आपका नाम · example.com</div>
  </main>
</body>
</html>

The text above includes vowel signs and punctuation, but it is only a starter sample. Test with the actual copy you intend to publish, including conjuncts, numerals, Latin URLs, and any punctuation used in your design. Devanagari is an abugida with combining marks and conjunct forms; shaping and segmentation deserve visual review. The W3C’s Devanagari layout material is a work in progress, not a guarantee that every font or rendering path behaves identically: Devanagari Layout Requirements and Devanagari Script Resources.

2. Install a browser renderer

Use Node.js and Playwright to open the file in Chromium and save the card element as a PNG. In a new project directory, run:

npm init -y
npm install --save-dev playwright
npx playwright install chromium

Create render.mjs:

import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
import { resolve } from 'node:path';

const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({
    viewport: { width: 1080, height: 1080 },
    deviceScaleFactor: 1
  });
  await page.goto(pathToFileURL(resolve('card.html')).href, { waitUntil: 'load' });
  await page.evaluate(() => document.fonts.ready);
  const card = page.locator('.card');
  await card.screenshot({ path: 'card.png', type: 'png' });
  console.log('Wrote card.png');
} finally {
  await browser.close();
}

Run it with node render.mjs. The page waits for web fonts known to the browser before capture. If you use local font files, define them with @font-face and confirm they load; the browser cannot shape a glyph that the selected font does not provide.

3. Check the exported raster image

1. Open card.png itself. Do not rely only on the browser preview or DOM inspection.
2. Check that every Hindi glyph appears, conjuncts join as intended, and vowel signs are attached and not clipped.
3. Review line breaks, spacing, and text segmentation in the actual final copy. A long word or URL may overflow even if the sample fits.
4. Inspect the image at the display size your audience is likely to see, as well as at full size. This can reveal text that technically renders but is hard to read when reduced.
5. Check all edges and corners for content outside the canvas. Adjust padding, font size, line height, or copy length and render again.
6. Repeat the review after changing browser, operating system, font, or export scale. These can change the resulting pixels.

If text is cut off, first reduce the heading size or line length, increase the card’s inner padding, or adjust its line height. If marks appear broken or missing, verify the chosen font has the required Devanagari glyphs and that the font loaded before capture.

4. Choose dimensions and format deliberately

The example uses a square 1080 by 1080 canvas as a configurable design choice, not as a claim about Instagram’s current recommended dimensions. Confirm the current platform guidance before publishing, then update the card’s CSS width and height and the Playwright viewport to match. Keep them in sync so the screenshot does not capture an unintended viewport around the card.

PNG is a practical default for crisp text and flat graphics. If file size matters, you can convert the rendered image to JPEG or WebP with an image tool, then inspect the converted result for compression artifacts around text. The screenshot step here produces PNG; conversion is a separate step.

5. Troubleshooting

Symptom	Likely cause	Fix
Boxes or blank spaces instead of Hindi characters	The active font lacks one or more glyphs, or the intended font did not load.	Install or bundle a Devanagari-capable font, set it explicitly, wait for document.fonts.ready, and inspect the browser’s loaded fonts.
Vowel marks or conjuncts look wrong	Font shaping support, fallback behavior, or a rendering difference may be involved.	Try another font with Devanagari coverage, render in the target browser environment, and verify the final PNG at full size.
Text is clipped at the bottom or sides	The text takes more space than the card layout allows, or line height/padding is too small.	Increase the card’s usable area, reduce font size, adjust line height, or edit the copy. Render and inspect again.
Layout differs between a laptop and CI	Different fonts, browser builds, device scale factors, or viewport sizes can change layout.	Pin the browser environment, provide the font with the project, and set viewport and device scale explicitly.
Screenshot is blank or captures the wrong region	The page did not load as expected, the selector is wrong, or capture started before required assets were ready.	Check the file path and selector, wait for the relevant assets, and capture the card element rather than the whole page.
Latin text or URLs wrap awkwardly	Unbroken strings can exceed the available line width.	Use a deliberate break or a CSS wrapping rule, then make sure it does not create poor Hindi line breaks.

6. Automate batches reliably

For repeated cards, keep the card template fixed and pass content as data rather than concatenating untrusted text into HTML. Escape or safely encode values, and validate that required fields are present. Reuse a browser process for a batch instead of launching Chromium for every card. Capture each card into a temporary file, check that the output exists and has nonzero size, then move it into the publish directory only after visual review.

For repeatable output, keep the HTML, font files, browser version, viewport, and device scale factor stable. If the card includes remote images or fonts, network delays and availability can make output inconsistent; bundle assets locally where licensing and project constraints allow, or wait for the specific assets before capture. Treat a successful screenshot call as evidence that an image was produced, not proof that Hindi shaping or layout is correct.

Or skip the browser setup

ScreenshotNeo renders HTML/CSS to an image through a single API request. See the ScreenshotNeo API documentation for the supported parameters and output options. The following runnable cURL example assumes the HTML is publicly available at the URL you want to capture:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/hindi-card -o card.webp

Python:

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/hindi-card"}, timeout=90)
open("card.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/hindi-card' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Before sending a request, publish the card page somewhere the API can reach, and make sure its fonts and other assets load from that page. ScreenshotNeo removes cookie banners, popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed; its MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Sign up for the free plan.

Publishing and rights notes

Describe the design as a card made for Instagram without suggesting Meta or Instagram sponsored, partnered with, or endorsed it. Follow Instagram’s brand guidance if you use its name or brand assets. Verify current image dimensions against current platform guidance before choosing the export canvas.

FAQ

Can I use Hindi text directly in HTML?

Yes. Use Unicode Devanagari in a UTF-8 document and a font that supports the characters in your copy. Then inspect the rendered image.

Does a correct browser preview guarantee a correct image?

No. The exported raster is the deliverable, so inspect it directly for glyph shaping, line breaks, and clipping.

Can I capture an Instagram embed the same way as a custom card?

An embed-specific guide is not a universal recipe for custom designs. HTML/CSS to Image documents an Instagram embed example using the .instagram-media-rendered selector and a 1750 ms delay for that example; test settings against your own page: Instagram embed rendering guide.

Where can I find Devanagari layout guidance?

See the W3C Devanagari Layout Requirements. It describes script behavior and layout considerations; it does not certify a particular font or browser output.