Urdu Typesetting Utility
After running into a pesky issue with Urdu-language texts for a work project, I created this small online utility to as both an internal tool and a free resource for others facing the same problem.
⁉️ What does it do?
Being based on the Perso-Arabic script, Urdu-language fonts are rendered according to the Unicode Standard for Arabic. However, there are a number of characters which while visually indistinguishable in the Naskh script that is used most commonly among different languages frequently rendered in an Perso-Arabic alphabet which do not correctly render in Nastaliq-style fonts preferred for Urdu-language texts. While most Urdu-speakers prefer to read content in Nastaliq, the history of Arabic’s (and Urdu’s) computerization means that many websites and programs still default to rendering Urdu text in more widely-supported Naskh fonts.
The result? Sometimes when a writer has used an Arabic keyboard to input Urdu text (using a Naskh font), the resulting text cannot be properly rendered in a Nastaliq font. This utility finds and replaces Arabic-encoded characters in a given text with their proper Urdu equivalent, thereby allowing the text to be correctly rendered in a Nastaliq-style font instead of being a jumbled mishmash of different fonts!
📜 Project Features
- Text modifications are made only on the client side via a simple Vue.js app.
- If supported by the user’s browser, a “Copy to Clipboard” utility is available leveraging the VueUse composable library.
🎓 Reflections
Putting together this simple tool was a breeze, especially starting from a bootstraped Astro project template. I really am enjoying the frictionless integration of Vue-powered components in websites statically generated by Astro. It’s incredible to be able to put together and deploy a simple project like this in just a few hours and with no need to tinker around with configurations.