Web Design

Building a Bilingual Urdu-English Website: Pitfalls Most Agencies Miss

By Zain Ul Abideen · · 11 min read

If you run a business that talks to customers in both Urdu and English — a clinic in Lahore, a property firm in Karachi, a government-facing service, an e-commerce store selling to small-town buyers — you have probably been told a bilingual Urdu English website is “easy, we’ll just add a translate button.” It is not easy, and that button is exactly how these projects go wrong. This guide is for owners and marketing leads who want a bilingual site that actually reads well, ranks, and doesn’t break the moment you switch to Urdu. I’ve been building and fixing these for Pakistani clients since 2009, and the same handful of mistakes shows up again and again.

Why a bilingual Urdu English website is harder than agencies admit

English flows left to right. Urdu flows right to left, in a connected Nastaliq script where the same letter changes shape depending on what sits beside it. The moment you put both on one page, you are not “adding a language” — you are running two opposite layout systems, two font stacks, and two reading directions inside the same templates. Most agencies quote it like a translation job. It is a layout and typography job that happens to involve translation.

Here is the honest part: a proper bilingual site costs more than a single-language one, usually in the range of PKR 60,000 to PKR 250,000+ depending on page count and whether you need true Nastaliq rendering. If someone quotes you the same price as an English-only site, they are planning to bolt on Google Translate and walk away. That is the cheapest way to look unprofessional to the exact Urdu-speaking audience you were trying to reach.

RTL website design: the layout breaks nobody tests for

RTL website design is where most builds quietly fall apart. When you flip a page to Urdu, the entire layout should mirror — navigation moves to the right, the logo flips sides, list bullets sit on the right, the back/next arrows reverse. Theme developers who only ever tested in English leave dozens of these unmirrored.

What actually breaks in RTL

  • Icons and arrows. A “next” chevron pointing right in English must point left in Urdu. Carousels, breadcrumbs, and “read more” arrows are the usual offenders.
  • Padding and margins. CSS written with hardcoded margin-left and padding-left doesn’t flip. The fix is logical properties (margin-inline-start) or a proper RTL stylesheet — not eyeballing each element.
  • Forms and inputs. Phone-number fields, currency prefixes (Rs.), and form labels need to align right. A JazzCash/Easypaisa checkout where the amount field is left-aligned in an otherwise right-aligned page looks broken to users.
  • Mixed-direction text. An Urdu sentence containing an English brand name or a number (“iPhone 15 ابھی دستیاب ہے”) will scramble its order unless you handle bidirectional text correctly with the right Unicode handling and dir="auto" in the right spots.
  • Tables and date pickers. Column order, calendar widgets, and sliders almost always need manual RTL attention.

The practical rule: set dir="rtl" and lang="ur" on the Urdu pages at the HTML level, lean on CSS logical properties, then test every single template in Urdu before launch — not just the homepage. The bugs hide on product pages, checkout, and forms, which is precisely where they cost you money. This is core web design and development discipline, and it’s the part rushed builds skip.

Urdu font web rendering and Nastaliq web typography

This is the section that separates a site that looks Pakistani-professional from one that looks like a school project. There are two broad styles of Urdu type on the web: Naskh (the squarer, simpler Arabic-style script) and Nastaliq (the flowing, diagonal, calligraphic style that Urdu readers actually associate with their language).

Why Nastaliq is the hard, correct choice

Most quick builds default to a Naskh font like Noto Naskh Arabic because it’s lightweight and renders predictably. It’s legible — but to a native Urdu reader it feels foreign, like reading English in a font designed for German. Real Urdu font web work means serving a proper Nastaliq web typography stack, and the standard answer here is Noto Nastaliq Urdu (free, open-licensed, Google-hosted). It renders the connected, descending letterforms Urdu readers expect.

The catch with Nastaliq:

  • File size. Nastaliq fonts are heavy because of the enormous number of ligatures and contextual glyphs. On the mid-range Androids most Pakistani users carry, a fat font file on a 3G/patchy-4G connection is a real performance hit. Subset the font to the glyph ranges you need and use font-display: swap so text isn’t invisible while it loads.
  • Line height. Nastaliq letters descend diagonally and stack. The default line height that looks fine in English will clip Urdu. Urdu text typically needs noticeably more line-height and vertical spacing, or the bottoms of words collide with the line below.
  • Font size. At the same pixel size, Nastaliq reads smaller and denser. Bump Urdu up a step so it’s comfortable.
  • Rendering inconsistency. Older Android WebViews and some in-app browsers render Nastaliq imperfectly. Always specify a Naskh fallback in the stack so nobody gets boxes (tofu) if the primary font fails.

Do not, under any circumstances, ship Urdu as an image to “guarantee” the font. It kills your SEO, accessibility, and copy-paste, and it’s the laziest shortcut in the book. Render real text with a real font.

SEO hreflang: how to not get the two languages confused by Google

Two languages means Google needs to know which page is which, and which to show to whom. Get this wrong and your Urdu pages cannibalize your English ones, or neither ranks. The mechanism is hreflang.

Getting the structure right

  • Separate URLs per language. Use /en/ and /ur/ path prefixes (or subdomains). Do not swap languages with a cookie or JavaScript on the same URL — Google can’t index two versions of one URL, so half your content becomes invisible.
  • hreflang annotations. Each page declares its counterpart: the English page points to the Urdu page with hreflang="ur" and vice versa, plus an x-default. These must be reciprocal — if A points to B, B must point back to A, or Google ignores them.
  • Correct language codes. Use ur for Urdu and en for English. If you genuinely serve Roman Urdu as a third variant, that’s a separate decision — and usually it’s better handled as content choice than as a formal language tag.
  • One XML sitemap with both. Submit both language versions so they get crawled together.

This is exactly where an SEO-aware build pays for itself. If you’re investing in a multilingual website Pakistan project to win local search, loop in the people doing your SEO and search ranking work before the URL structure is locked — retrofitting hreflang after launch is painful and you’ll lose rankings during the migration.

Why machine-translated Urdu fails (and what to do instead)

This is the pitfall I argue about most. Google Translate has improved a lot for English-to-Urdu, but it is still wrong in ways that matter for a business:

  • It mistranslates tone. Urdu has formality registers (آپ vs تم). Machine translation picks one inconsistently, so your site lurches between respectful and oddly casual in the same paragraph. To an Urdu reader this signals “foreigner wrote this.”
  • It butchers your product and brand terms. Industry vocabulary, service names, and culturally specific phrases come out literal and nonsensical.
  • It produces stiff, textbook Urdu that nobody actually speaks, while many of your customers think and search in Roman Urdu (“plumber near me” typed as “plumber Lahore” or in mixed script).
  • It can’t localize the offer. “Pay with your card” should become “JazzCash, Easypaisa, ya card” — that’s localization, not translation, and a machine won’t do it.

The right approach

Get a human who actually writes Urdu — ideally a native speaker who understands your industry — to translate and, more importantly, transcreate your key pages: homepage, services, contact, and anything tied to conversion. For long-tail blog content where budget is tight, a sensible middle path is machine translation followed by a human edit pass, never raw machine output published live. If content is central to your strategy, a team that handles bilingual content and copy properly will save you from sounding like a robot to half your audience.

A practical build checklist for bilingual site development

If you’re scoping a bilingual site development project, walk through this before you sign anything:

  1. URL structure decided (path prefix vs subdomain) and committed before development starts.
  2. Reciprocal hreflang + x-default on every page, validated with a crawler.
  3. Full RTL stylesheet tested on every template, not just the homepage — checkout and forms especially.
  4. Nastaliq font (Noto Nastaliq Urdu or licensed equivalent), subsetted, with a Naskh fallback and tuned line-height.
  5. Human-translated conversion pages; no raw machine Urdu live.
  6. Bidirectional text handled for mixed Urdu-English-numbers strings.
  7. A clear, obvious language switcher that remembers the choice and keeps the user on the equivalent page (not dumping them back to the homepage).
  8. Performance tested on a mid-range Android over a throttled connection — that’s your real audience, not your designer’s MacBook.
  9. Analytics split by language so you can actually see which side converts.

If you’re also serving multiple cities or regions, the same discipline extends to your location pages, where language and locality interact in search.

Frequently Asked Questions

Should my whole website be in Urdu, or just key pages?

It depends on your audience. If most customers are comfortable in English but Urdu builds trust, translate the high-intent pages (home, services, contact, pricing) properly and leave a clear switcher. If you’re selling to a primarily Urdu-speaking, smaller-town audience, make Urdu the default and treat English as secondary. Don’t half-translate — a site that’s 40% Urdu feels broken.

Is Google Translate’s auto-translate widget good enough?

No, not for any page that drives revenue or trust. The auto-translate widget produces awkward Urdu, isn’t indexable as real content, and hurts your credibility with native readers. Use it as an emergency fallback at most; have a human handle your important pages.

Will having two languages hurt my Google rankings?

Not if it’s set up correctly with separate URLs and reciprocal hreflang — done right, you rank for both Urdu and English searches and reach more people. It only hurts when languages share one URL or hreflang is missing or broken, which causes duplicate-content confusion. This is a setup problem, not a fundamental limitation.

Why does my Urdu text show as boxes or broken letters?

That’s a font issue — either no Urdu web font is loaded, or the user’s device lacks a fallback. The fix is to serve a proper Nastaliq web font (like Noto Nastaliq Urdu) with the page and declare a Naskh fallback in the stack, so the text renders even on older Android browsers.

How much does a bilingual Urdu English website cost in Pakistan?

Realistically PKR 60,000 to PKR 250,000+ depending on page count, whether you need true Nastaliq rendering, and how much human translation is involved. Be suspicious of quotes identical to an English-only site — that’s a sign someone’s planning to bolt on machine translation rather than build it properly.

Can you add Urdu to my existing English site, or do I need a rebuild?

Often we can add it to an existing site, but it depends on how the theme was built. Themes that hardcode left-padding everywhere and ignore logical CSS properties are painful to retrofit for RTL — sometimes a clean rebuild is cheaper than fighting the old code. A quick audit tells us which path is right for you.

Talk to One Source Soft about your bilingual site

A bilingual Urdu English website done properly is one of the most effective trust-builders you can have with a Pakistani audience — and one of the most embarrassing things you can ship if it’s done lazily. We’ve handled the RTL layout breaks, the Nastaliq rendering headaches, and the hreflang setup enough times to do it without the usual surprises, and our Google reviews reflect clients who came to us after a cheaper build let them down.

If you’re planning a new site or fixing a botched bilingual one, get in touch for a free audit and consultation. We’ll look at your current setup, tell you honestly whether it needs a retrofit or a rebuild, and give you a realistic scope and price — no inflated quotes. Start with our web design and development service, or just contact us and tell us who your customers are. We’ll take it from there.

Related reading

Keep reading