Why Nastaliq Urdu Text Breaks on the Web — and Practical Fixes for Developers

UrduNigaarOfficial — Fri, 16 Oct 2026 11:37:08 +0000

If you build websites for South Asian audiences, sooner or later Urdu text will misbehave in your layout: lines overlap, words clip at the top, or the text renders in a style your users find hard to read. Most of these problems are not bugs in your code. They come from a mismatch between how Nastaliq — the script Urdu is normally written in — works, and the Latin-first defaults baked into most web stacks.

Nastaliq is not just "Arabic, but slanted"

Urdu uses an extended Perso-Arabic character set, but its preferred style, Nastaliq, behaves differently from the Naskh style used for most Arabic text:

Words run on a steep diagonal baseline instead of a horizontal one.
A single line needs far more vertical room than a Latin or Naskh line of the same font size.
Letters change shape depending on their position in a word, and many combinations form stacked ligatures.

When a browser falls back from a Nastaliq font to a Naskh or system font, the text is still "correct" at the character level — but your users see a completely different, often less readable, presentation.

Fix 1: Load a real Nastaliq web font, and build an honest fallback stack

Serve a Nastaliq typeface (for example Noto Nastaliq Urdu) as a web font and declare fallbacks that degrade gracefully, rather than letting the browser pick at random:

.ur-text {
  font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  direction: rtl;
  text-align: right;
}

The fallback will not look the same — that is expected. The goal is that it stays legible instead of breaking.

Fix 2: Give Nastaliq lines room to breathe

The most common visible bug is clipped or overlapping lines. Nastaliq's ascenders and descenders extend well beyond what a line-height: 1.4 default assumes. In practice, Urdu body text often needs a line height around 2 or more at typical reading sizes, and headings need testing at the exact size you ship. Always test with real Urdu paragraphs, not a single short heading — stacking only appears in longer words and multi-line text.

Fix 3: Set direction and language explicitly

Add lang="ur" and dir="rtl" (or the CSS above) on Urdu containers. Without them you get punctuation on the wrong side, numbers jumping position, and mixed Urdu/English lines ordering incorrectly. These are Unicode bidirectional algorithm issues, not font issues, and no font choice will fix them.

Fix 4: Respect Unicode — never "fake" Urdu with presentation forms

Old workflows typed Urdu using Arabic Presentation Form code points (the shapes in the U+FB50–U+FEFF blocks) so that text looked joined in software without proper shaping. That text searches badly, copies badly, and breaks in modern rendering engines. Type and store standard Urdu code points (U+0600–U+06FF) and let the shaping engine do its job.

A related trap is decorative ligature characters. The Bismillah, for example, exists as a single Unicode character, U+FDFD (﷽), which renders as a complete calligraphic ligature in suitable fonts. It is useful for design, but it is one character — screen readers, search, and copy-paste all treat it differently from the spelled-out words. Resources like the Bismillah Arabic text copy-paste guide on Urdu Nigaar show the spelled-out and ligature forms side by side, which is the right way to offer both.

Fix 5: Test the paste path, not just the render path

Urdu text usually arrives in your app by copy-paste from keyboards, converters, and chat apps. Invisible characters, extra spaces, and mixed presentation-form code points ride along and quietly break search, word counts, and layout. Normalising input (removing zero-width characters and collapsing whitespace) before storage saves debugging time later.

A quick checklist

Real Nastaliq web font loaded, with a declared fallback stack.
Generous line height, tested with long real-world paragraphs.
lang and dir set on every Urdu container.
Standard Unicode code points only — no presentation-form typing.
Input cleaned of invisible characters before storage or display.

If you work with Urdu content regularly, Urdu Nigaar collects free font guides and browser-based Urdu text tools (keyboard, converter, font preview, Unicode cleaner) in one place — useful test material when you are checking how your own layouts handle the script.

DEV Community: UrduNigaarOfficial