How to get the "text-justify:kashida" css property effect on to the arabic text excluding IE browsers

Question

I am using <p> tag for inserting Arabic text into the html page, and giving the CSS property text-align: justify; with particular width and height in pixels.

With this, there would be the paragraph including inconsistent space between the paragraph words; how can we use the same with proper word-stretching (with proper tatweel/kashida) inside the word?

I have tried it with the text-justify: kashida CSS property, but it's only working with IE, not for any other browser! As per the image shows, it is clear that the text-justify: kashida is not supported by Mozilla, and other browsers expect the IE.

How can I get the same behaviour in all browsers, to display the same as Internet Explorer?

Answer 1

Unfortunately seems kashida is dropped from CSS3 text and deferred for CSS4 text, so if you want justify your text with Kashida, you should try porting harfbuzz-old adding kashida algorithm (that its algorithm is removed from newer generation of harfbuzz, ref) which is based on a Microsoft specification that is archived here. Here is Microsoft's kashida insertion priority table that you should try to implement somehow:

ّAdding Kashida («ـ») for text styling on HTML itself is not a good idea (because if user copy the text it will contains added Kashidas and it will make problem for browsers find-in-page) however as current webkit^bug/blink^bug (Safari/Chrome) versions do not support joining cursive script characters (like Arabic/Persian) during inline (pseudo)elements there seems there is not any chance you get this type of justification without inserting Kashida (or you should handle oncopy event by your own that has its own problems).

It is also interesting that Microsoft is extended IE Kashida justification implementation to support more interesting things like text-kashida-space (configure ratio of kashida to white space expansion while text justifying). Seems we must wait another decade to these get implemented across all major browsers.

Answer 2

The text-justify property was implemented in IE, and it is not part of any completed CSS specification. It exists in the Working Draft CSS Text Module Level 3, but even there, it is marked as being at risk: “The following features are at risk and may be cut from the spec during its CR period if there are no (correct) implementations: [...] the ‘text-justify’ property, particularly its ‘kashida’ value”.

From the authoring perspective, the best you can do is to hope that other browsers will catch up. The styling requested is relatively complicated and probably not anything you can imitate with JavaScript in the same sense as you can “polyfill” CSS properties