Why does an Arabic font have multiple glyphs of the same shape but slightly different heights?

Question

Here is a Kufi-like Arabic script font, and here are most of the main glyphs:

Notice how some of them are extremely similar, only differing by height. Also you'll note that some are similar but differ slightly because they appear at the beginning/middle/end. I am not concerned with the latter, but I am not sure what the former are used for (the ones differing only by height). See these for example:

Those two sets have glyphs differing only by height it seems. The second has 3 which slant upwards, and 3 which are flat. Are these different characters? I have asked some Arabic speakers and they said no, they are not different characters (I am somewhat familiar with the Arabic alphabet). Instead they say it is for "aesthetic purposes". But they didn't explain how the font chooses which one out of the 3? How does the font decide (roughly speaking) which one to choose, if it's purely aesthetic?

Then this next image has a vertical line, one which is straight, and one which is slightly curved. Is this the same situation here?

My goal is to take these SVGs and turn them into JavaScript, so I can stretch the horizontal aspects of some of the letters dynamically (by scaling the SVG path definition). So I am not sure how I should make use of the 3 glyphs in the set, for these examples. Do I just keep 1 and throw out the other 2, or somehow algorithmically decide (or aesthetically but programmatically decide) when to use which variant?

Any help would be appreciated in understanding what the purpose of these seemingly aesthetic variants are, and how to take advantage of them.

If it is purely an aesthetic thing, I don't understand how you would select between the aesthetic variants. How does that work in a font even?

Answer 1

I assume that its because of ligatures. As I understand the arabic written language is a flowing type. The letters need to be connected even on screen writing. So probably are there different versions of each letter because of the different sizes the glyph needs to be in connection to the letter before and after.

Similar to ligatures in latin letters (like ft, fi in serif fonts, Or sometimes the Q which stroke underlines the next letters only when the next letter has no decender (i.e. g,y,p))

As you can see, the letters vary depending on the letter next to it.

So if you open the glyphs in most arabic fonts, there should also be some variations as well.

But I'm only assuming, I have no idea how the arabic language works.

To your question of "how" the font decides which glyphe to take, well, thats programmed into the font. The same looking characters share the unicode but have different glyph ids. Like with fi, the font creator "told" that if (unicode) U+0066 (f) and U+0069 (i) are used immediatly next to each other, it should be replace by tha glyph-id 385. I imagine this to be a bit more work for arabic fonts than latin.

You can read more about that here

Answer 2

One idea is to look online for a forum dedicated to Arabic typography, and open to questions submitted in English.

Since you are not shy to look at code, you could look inside your fonts with a pro font editor. I understand there are some you can test for a few days for free.

You can see where the "chosing" happens, in some very lenghty tables, for example depending on context; look for an inbuilt tool or section called something like OpenType Designer or OpenType Features or search the help for "Substitutions", "Variants" or "Alternates" and "Context".

Also you will probably see that the typeface creator has grouped all the glyphs into sections like Letters, Base, Separators, Other etc. or might have assigned tags like initial form, medial form.

So you would browse to your characters of interest and could use these tags and sections to spy after your question: What are the differences for.

Not a full answer but you seem to be a person who likes to dig and find out.