Noto Nastaliq Urdu test page


Originally written: November 10, 2014
Last updated: December 4, 2014

Update: Blog post about this font on Google Developers Blog: "I can get another if I break it": Announcing Noto Nastaliq Urdu

Introduction

Nastaliq is a calligraphic style of writing the Perso-Arabic script commonly used for writing Urdu, Punjabi, Kashmiri, and Persian, among others. Nastaliq is the preferred style for body text in Urdu, and is used to typeset newspapers to this day. While in Persian, Nastaliq is used, for the most part, as a display / titling face.

There have been Nastaliq OpenType fonts (both Urdu- and Persian-style) available on the internet for quite a few years. Recently, at Google we released a draft version of the “Noto Nastaliq Urdu” font as part of the expansion of the Noto fonts project. This page showcases the Noto Nastaliq Urdu Draft font.

Here is a verse of poetry from Ghalib using the webfont:

اور بازار سے لے آئے اگر ٹوٹ گیا
ساغرِ جم سے مرا جامِ سفال اچّھا ہے

Where to get

The draft version of the font can be downloaded from the Noto homepage or directly from the Noto repository. It is also available as a webfont on Google Fonts Early Access.

I will update this page when the final version of the font is released. Please report any issues you might find with the font at https://code.google.com/p/noto/issues/entry. The list of currently known issues is at the Noto issue tracker.

Compatibility

This section is currently up to date as of November 10, 2014.

The font should render correctly on most modern browsers. Older versions of all browsers might be broken, and there is not much that can be done about them. This includes the old Android Browser (as opposed to Chrome on Android).

Google Chrome

Recent versions of Chrome should not have any problems on platforms other than OS X. Chrome Mac 39 and earlier suffer from severe positioning issues that make the font practically unusable. This has been fixed in Chrome 40 already, and should get out to users over time. In the mean time, you can try the Chrome Mac Dev channel. Chrome on iOS might suffer from the same problems as Safari (see below), I have not tested that.

Firefox

Firefox 33 and earlier render correctly but freeze for a few seconds when loading the font. That bug is fixed in Firefox 34 Beta, to be released as stable on November 25, 2014.

Internet Explorer

IE 11 works just fine in my testing. I have not tested other versions.

Safari

Safari suffers from the same positioning issues that Chrome Mac used to (discussed above). This bug is being tracked here, but I expect it to take a while to get fixed and delivered to users.

Typesetting poetry for the web

I have been interested in typesetting Persian poetry on the web since at least 2002. In Urdu and Persian classical poetry, Nastaliq is the preferred style, and poems are set in two columns of justified text with the same column widths.

In the rest of this section I'm using a full sonnet from Ghalib, available from Wikisource.

Center-aligned

The easiest way to set a two-column poem is to center-align each column. This is how it would look like:
حسنِ مہ گرچہ بہ ہنگامِ کمال اچّھا ہے اس سے میرا مہِ خورشید جمال اچّھا ہے
بوسہ دیتے نہیں اور دل پہ ہے ہر لحظہ نگاہ جی میں کہتے ہیں کہ مفت آئے تو مال اچّھا ہے
اور بازار سے لے آئے اگر ٹوٹ گیا ساغرِ جم سے مرا جامِ سفال اچّھا ہے
بے طلب دیں تو مزہ اس میں سوا ملتا ہے وہ گدا جس کو نہ ہو خوۓ سوال اچّھا ہے
ان کے دیکھے سے جو آ جاتی ہے منہ پر رونق وہ سمجھتے ہیں کہ بیمار کا حال اچّھا ہے
دیکھیے پاتے ہیں عشّاق بتوں سے کیا فیض اک برہمن نے کہا ہے کہ یہ سال اچّھا ہے
ہم سخن تیشے نے فرہاد کو شیریں سے کیا جس طرح کا کہ کسی میں ہو کمال اچّھا ہے
قطرہ دریا میں جو مل جائے تو دریا ہو جائے کام اچّھا ہے وہ، جس کا کہ مآل اچّھا ہے
خضر سلطاں کو رکھے خالقِ اکبر سر سبز شاہ کے باغ میں یہ تازہ نہال اچّھا ہے
ہم کو معلوم ہے جنّت کی حقیقت لیکن دل کے خوش رکھنے کو غالب یہ خیال اچّھا ہے

It is not very pleasing, but easiest to set. At least, if you are lucky, the font works.

Side-aligned

A slight improvement would be to align the sides:
حسنِ مہ گرچہ بہ ہنگامِ کمال اچّھا ہے اس سے میرا مہِ خورشید جمال اچّھا ہے
بوسہ دیتے نہیں اور دل پہ ہے ہر لحظہ نگاہ جی میں کہتے ہیں کہ مفت آئے تو مال اچّھا ہے
اور بازار سے لے آئے اگر ٹوٹ گیا ساغرِ جم سے مرا جامِ سفال اچّھا ہے
بے طلب دیں تو مزہ اس میں سوا ملتا ہے وہ گدا جس کو نہ ہو خوۓ سوال اچّھا ہے
ان کے دیکھے سے جو آ جاتی ہے منہ پر رونق وہ سمجھتے ہیں کہ بیمار کا حال اچّھا ہے
دیکھیے پاتے ہیں عشّاق بتوں سے کیا فیض اک برہمن نے کہا ہے کہ یہ سال اچّھا ہے
ہم سخن تیشے نے فرہاد کو شیریں سے کیا جس طرح کا کہ کسی میں ہو کمال اچّھا ہے
قطرہ دریا میں جو مل جائے تو دریا ہو جائے کام اچّھا ہے وہ، جس کا کہ مآل اچّھا ہے
خضر سلطاں کو رکھے خالقِ اکبر سر سبز شاہ کے باغ میں یہ تازہ نہال اچّھا ہے
ہم کو معلوم ہے جنّت کی حقیقت لیکن دل کے خوش رکھنے کو غالب یہ خیال اچّھا ہے

I personally find it hard to call this an improvement, especially with this font. But it is a valid approach, and documented here for the sake of completeness and visual comparison.

text-align-last

The more natural way to justify poetry is to use the CSS text-align-last, which for all we care about, is designed exactly to do this. Unfortunately its support across browsers and CSS versions has been flaky.

It started IE-only and was added to CSS 3 draft years ago. These days looks like Firefox supports it prefixed, I could not get Chrome or Safari to work, even though they are supposed to support it to differing extents. IE works, but only when text-align:justify is used. This caught me by surprise, but apparently that is exactly what CSS 3 says.

Update: Chrome supports it if run with --enable-experimental-web-platform-features (or enabled at chrome://flags/#enable-experimental-web-platform-features; you can copy/paste that URL into your Chrome.) Looks like it will be enabled by default in Chrome 41 or 42.

Here it is in action:
حسنِ مہ گرچہ بہ ہنگامِ کمال اچّھا ہے اس سے میرا مہِ خورشید جمال اچّھا ہے
بوسہ دیتے نہیں اور دل پہ ہے ہر لحظہ نگاہ جی میں کہتے ہیں کہ مفت آئے تو مال اچّھا ہے
اور بازار سے لے آئے اگر ٹوٹ گیا ساغرِ جم سے مرا جامِ سفال اچّھا ہے
بے طلب دیں تو مزہ اس میں سوا ملتا ہے وہ گدا جس کو نہ ہو خوۓ سوال اچّھا ہے
ان کے دیکھے سے جو آ جاتی ہے منہ پر رونق وہ سمجھتے ہیں کہ بیمار کا حال اچّھا ہے
دیکھیے پاتے ہیں عشّاق بتوں سے کیا فیض اک برہمن نے کہا ہے کہ یہ سال اچّھا ہے
ہم سخن تیشے نے فرہاد کو شیریں سے کیا جس طرح کا کہ کسی میں ہو کمال اچّھا ہے
قطرہ دریا میں جو مل جائے تو دریا ہو جائے کام اچّھا ہے وہ، جس کا کہ مآل اچّھا ہے
خضر سلطاں کو رکھے خالقِ اکبر سر سبز شاہ کے باغ میں یہ تازہ نہال اچّھا ہے
ہم کو معلوم ہے جنّت کی حقیقت لیکن دل کے خوش رکھنے کو غالب یہ خیال اچّھا ہے

Polyfill

Given that text-justify-last does not quite work, many people have tried to achieve the same effect using CSS2 and CSS3. I did just that over ten years ago on RiRa.

Back then, the ::after pseudo-element was not widely supported, if defined at all. My solution involved adding a span at the end of each verse, and thus making sure this span had to be layed out to a new line by forcing padding-right: 100%, causing the first line to be justified in the process.

Times have changed since, and I found a much cleaner implementation of the same idea that does not involve modifying the HTML. And it seems to work very well across recent versions of Chrome, Firefox, and IE. Here it is:
حسنِ مہ گرچہ بہ ہنگامِ کمال اچّھا ہے اس سے میرا مہِ خورشید جمال اچّھا ہے
بوسہ دیتے نہیں اور دل پہ ہے ہر لحظہ نگاہ جی میں کہتے ہیں کہ مفت آئے تو مال اچّھا ہے
اور بازار سے لے آئے اگر ٹوٹ گیا ساغرِ جم سے مرا جامِ سفال اچّھا ہے
بے طلب دیں تو مزہ اس میں سوا ملتا ہے وہ گدا جس کو نہ ہو خوۓ سوال اچّھا ہے
ان کے دیکھے سے جو آ جاتی ہے منہ پر رونق وہ سمجھتے ہیں کہ بیمار کا حال اچّھا ہے
دیکھیے پاتے ہیں عشّاق بتوں سے کیا فیض اک برہمن نے کہا ہے کہ یہ سال اچّھا ہے
ہم سخن تیشے نے فرہاد کو شیریں سے کیا جس طرح کا کہ کسی میں ہو کمال اچّھا ہے
قطرہ دریا میں جو مل جائے تو دریا ہو جائے کام اچّھا ہے وہ، جس کا کہ مآل اچّھا ہے
خضر سلطاں کو رکھے خالقِ اکبر سر سبز شاہ کے باغ میں یہ تازہ نہال اچّھا ہے
ہم کو معلوم ہے جنّت کی حقیقت لیکن دل کے خوش رکھنے کو غالب یہ خیال اچّھا ہے

This one looks gorgeous on every browser that supports the font properly. This can be combined with the text-align-last for good measure and forward compatibility, but that is left as an exercise to the developer.

Single-column

One problem left unsolved in the previous section is that the two columns do not necessarily have the same width. One way I fixed this in RiRa before was to add a small JavaScript snippet to take the maximum of the two column widths and apply it to both. That's a valid hack (short of CSS adding such constructs) but left out here because I do not want to be the one promoting it.

An alternative some might prefer, specially for narrow columns or shorter poems is to just use a single column. I personally think for this test poem two columns looks much better. So for this test case I cut it off at eight lines for illustration purposes.
حسنِ مہ گرچہ بہ ہنگامِ کمال اچّھا ہے
اس سے میرا مہِ خورشید جمال اچّھا ہے
بوسہ دیتے نہیں اور دل پہ ہے ہر لحظہ نگاہ
جی میں کہتے ہیں کہ مفت آئے تو مال اچّھا ہے
اور بازار سے لے آئے اگر ٹوٹ گیا
ساغرِ جم سے مرا جامِ سفال اچّھا ہے
بے طلب دیں تو مزہ اس میں سوا ملتا ہے
وہ گدا جس کو نہ ہو خوۓ سوال اچّھا ہے

Conclusions

I hope you agree that this font looks great for typesetting Urdu poetry. I cannot wait until a high-quality Persian-style Nastaliq font becomes available for the web to enjoy. But until then, I hope web authors enjoy our Urdu Nastaliq font.

Disclaimer

As of November 2014, the author works at the Font and Text Rendering team, Google Internationalization Engineering.

Revision history

2014-12-04 Updated the status of text-align-last support in Chrome.
2014-11-26 Add link to blog post.
2014-11-11 Fix text-align-last vs text-align:justify relationship and link to CSS 3 text module.
2014-11-10 Initial release.