iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Set the document’s language and direction with <html lang="ur" dir="rtl">, make sure Chromium can load the Urdu font you want, wait for fonts and any application content to be ready, then call Puppeteer’s page.screenshot(). Use fullPage: true when the image should include the whole document rather than only the viewport.
Set Urdu as the document language and direction
For a page written primarily in Urdu, put lang="ur" and dir="rtl" on the html element. The language identifies the document’s language; the direction establishes right-to-left base direction. Direction affects inline text direction and alignment, among other layout behavior. MDN recommends using the HTML dir attribute where possible rather than setting CSS direction directly. See MDN’s direction reference.
If only one part of a larger page is Urdu, put dir="rtl" on that section instead of changing the direction of the entire document. The HTML direction attribute can establish direction without a stylesheet rule.
Use a font that supports Urdu and wait for it to load
Right-to-left direction controls ordering and layout; it does not choose or install a typeface. Specify an Urdu-capable font in your CSS font stack and ensure the font is available to Chromium, either through the page or the runtime environment. The correct font depends on your design and deployment; there is no universally required font established here.
#1 Best Overall
Before capturing, await document.fonts.ready. It fulfills when fonts used by the document have finished loading and related layout operations are complete. This helps prevent a screenshot from capturing fallback glyphs before the intended font is ready. See MDN’s Document.fonts documentation.
Keep embedded English and identifiers readable
Urdu pages commonly contain English words, URLs, code, or identifiers. Bidirectional text follows the Unicode bidirectional algorithm, so punctuation and mixed-direction fragments may not appear in the order you expect. When a distinct English fragment needs to read left to right, mark that fragment with dir="ltr", for example <span dir="ltr">Puppeteer screenshot</span>.
Avoid applying unicode-bidi: bidi-override to the whole document as a generic correction. An override forces sequence-based reordering and can suppress the normal implicit bidi behavior; MDN notes it is generally intended for DTD designers. See MDN’s unicode-bidi reference.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Runnable Puppeteer example for a complete Urdu HTML page
This ES module example sets complete UTF-8 HTML, waits for fonts, saves a full-page PNG, and closes the browser even if rendering or capture fails. Install Puppeteer in your project with npm install puppeteer; run the file in a Node.js environment configured for ES modules.
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; its API is documented at Puppeteer Page.setContent(). The code uses a generic font stack intentionally: choose and load the Urdu-capable font your design requires. The example illustrates the documented APIs and markup; it is not a claim of visual testing in a particular runtime.
Capture a page loaded from a URL
If the Urdu content already lives at a URL, navigate with page.goto() rather than page.setContent(). Wait for the page’s fonts and for an application-specific signal that any asynchronously rendered content is complete before capturing. A network-idle event by itself does not prove that the desired visual state is ready.
Rank #3
const page = await browser.newPage();
await page.goto('https://example.com/urdu-page', { waitUntil: 'domcontentloaded' });
await page.evaluate(() => document.fonts.ready);
// Add a page-specific wait here if content is rendered asynchronously.
await page.screenshot({ path: 'urdu.png', fullPage: true });Replace the example address with your page URL and add a selector or other application-specific readiness condition if its content arrives after initial navigation. page.screenshot() captures the currently rendered state; it cannot determine whether your application has finished loading its data.
Choose the screenshot dimensions and format
By default, page.screenshot() captures the viewport. Set fullPage: true for the full document. The path option saves the result, and Puppeteer infers the image type from the filename extension when a path is provided. For a section or a precisely bounded region, use the screenshot API’s clip options instead of taking a full-page capture. See the Page.screenshot() API and ScreenshotOptions interface.
- Viewport image: omit
fullPagewhen the visible viewport is the intended output. - Whole document: set
fullPage: truewhen content below the fold must appear. - Specific region: supply a clip when only a bounded area is needed.
Troubleshoot common RTL screenshot problems
Text starts or aligns on the wrong side
Check that dir="rtl" is on the document or the intended Urdu container. Also inspect later CSS rules for a direction reset that overrides the expected layout.
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
English punctuation or identifiers appear reordered
Mark the distinct English fragment with dir="ltr". Avoid a blanket bidi override, which can defeat the normal handling of mixed-direction text.
Urdu glyphs use an unexpected font
Confirm the desired font is referenced and actually available to Chromium, then wait for document.fonts.ready before taking the screenshot. Direction settings do not load fonts.
The screenshot cuts off the page
Use fullPage: true for the whole document, or set a clip for a particular region. Omitting fullPage captures the viewport-sized image.
The page changes after the screenshot is taken
Wait for the condition that means your application’s content is complete, such as a page-specific selector or state. Font readiness covers font loading and related layout, not later application data or other asynchronous changes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. Its one-call endpoint accepts a URL and returns an image or PDF. For a page capture, start with this cURL request; replace the example target with your page URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/urdu-page -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Visit ScreenshotNeo or sign up free for 1,000 screenshots a month with no card.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFrequently Asked Questions
Does dir="rtl" install or select an Urdu font?
No. It establishes text direction and layout behavior; the font must be supplied separately and available to Chromium.
Should I use CSS direction: rtl instead of the HTML attribute?
For document direction, MDN recommends the HTML dir attribute where possible.
Does fullPage: true wait for all application data to load?
No. It requests a full-document capture of the current rendered page; wait separately for application-specific asynchronous content.
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.
