Set Urdu’s language and right-to-left direction in the HTML, wait for the page’s fonts to finish loading, and then capture it with Puppeteer. For a full-document image, use fullPage: true.
Set Urdu’s language and direction in the HTML
For a page written primarily in Urdu, put lang="ur" and dir="rtl" on the <html> element. The language identifies the document as Urdu; the direction establishes right-to-left text flow. Direction does not choose or install a font.
As an Amazon Associate I earn from qualifying purchases.
For a page that is mostly in another language, set direction only on the Urdu section or container instead. MDN recommends using the HTML dir attribute where possible rather than setting the CSS direction property: MDN: direction. Its writing-mode guide identifies Urdu as a horizontal right-to-left language: MDN: writing mode systems.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Runnable Puppeteer example for Urdu HTML
This ES module loads a complete HTML document, waits for used fonts, and saves a full-page PNG. Install Puppeteer in your project with npm install puppeteer, then save the example as an .mjs file and run it with Node.js.
#1 Best Overall
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setContent(`<!doctype html>
<html lang="ur" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
.english { direction: ltr; }
</style>
</head>
<body>
<main>
<h1>اردو متن</h1>
<p>یہ دائیں سے بائیں لکھی جانے والی مثال ہے۔</p>
<p>English fragment: <span class="english" dir="ltr">Puppeteer screenshot</span></p>
</main>
</body>
</html>`);
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'urdu.png', fullPage: true });
} finally {
await browser.close();
}page.setContent(html) assigns the supplied markup to the page. Puppeteer’s screenshot method captures the rendered page; with a path ending in .png, the output is PNG. The fullPage option requests the full document rather than only the viewport. See Puppeteer: Page.setContent(), Puppeteer: Page.screenshot(), and Puppeteer: ScreenshotOptions.
Handle mixed Urdu and English text
Urdu sentences can contain English phrases, identifiers, URLs, or code. Mark a distinct English fragment as left-to-right when its internal ordering needs to remain LTR; the example uses both dir="ltr" and a matching CSS rule.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Mixed-direction text is handled by the Unicode bidirectional algorithm. Avoid applying unicode-bidi: bidi-override to the whole page as a general fix: it forces ordering based on sequence and can suppress normal bidi behavior. MDN notes that this property is generally intended for DTD designers. See MDN: unicode-bidi.
Free tools Windows power users keep installed
One-click scans. No signup required.
Make sure the intended Urdu font is ready
Choose a font stack that includes a font with the glyphs and design you want, and ensure that font is available to Chromium—through the page’s CSS and successful font loading, or through the browser environment. No single Urdu font is universally required.
Rank #3
document.fonts.ready fulfills when used fonts have finished loading and layout operations are complete. Awaiting it reduces the chance of capturing fallback glyphs before the intended font is ready. It does not guarantee that a font the page cannot access will become available. See MDN: Document.fonts.
Choose the screenshot area and readiness condition
Capture the whole document
Use fullPage: true when the image should include content beyond the current viewport. Without it, the screenshot uses the viewport-sized capture by default.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Capture only the viewport or a region
Omit fullPage for a viewport capture. Puppeteer’s screenshot options also support a clip region and capturing beyond the viewport; consult the ScreenshotOptions reference for the available fields and constraints.
Wait for application content, not just fonts
If the page populates content asynchronously, wait for the application’s own completion condition before taking the screenshot—for example, a selector that appears when rendering is complete. Font readiness and network idleness alone do not prove that application data is finished loading. For an actual URL, use page.goto() and wait for the required assets and application state before capture; Page.screenshot() captures the state currently rendered.
Troubleshoot common Urdu screenshot problems
- Text starts or aligns on the wrong side: check that
dir="rtl"is on the document or intended container, and look for a later CSS rule that resets direction. Direction affects inline base direction, alignment, and the flow direction of table or grid cells. - English punctuation or identifiers appear reordered: isolate the LTR fragment and mark it with
dir="ltr". Do not apply a blanket bidi override to the document. - Urdu characters use an unexpected fallback font: verify that the intended font is referenced and accessible to Chromium, then await
document.fonts.ready. - The image is cropped: use
fullPage: truefor the full document, or choose a clip when only a specific region is needed. - The page changes after the screenshot: wait for the application-specific signal that content is ready. A screenshot records the current rendered state; capture does not determine whether the application has finished loading its data.
Or skip the browser setup
ScreenshotNeo can capture a URL with one API request. For a public page, replace the URL below with the page you want. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Does Puppeteer’s right-to-left setting install an Urdu font?
No. HTML direction controls text flow, not font selection. Make the desired font available to Chromium and wait for used fonts to load before capture.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →How can I screenshot a mostly English page with one Urdu section?
Apply dir="rtl" to that section or its container instead of the whole document.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
