How To Use Arabic Font In Illustrator

[Paulette Dzurilla]

Arabictext doesn't show properly in Adobe Illustrator. Even with a font that supports Arabic text (e.g. Arial), the text is back to front (left to right, not right to left) and the letters don't join up properly. To an Arabic speaker, it's gibberish.

Edit: Thanks to Supamike in this question about this problem in Photoshop there's what looks like a simpler solution that also works in Illustrator for point text (it screws up if you have area text that spans more than one line, so you need to use point text then manually put line breaks in and re-order the lines of text, else the first line is at the bottom and the last is at the top).

Type or copy your text into the top box on -keyboard.org/photoshop-arabic/, then copy and paste the output text in the bottom box into Illustrator, and it seems to keep the joins correctly applied and the text appears the correct way round.

Note that illustrator still treats it like it's left-to-right text, so while it looks correct, editing it will feel strange if you normally type in Arabic. So, if you need to edit the Arabic text, I'd recommend doing the edits in a separate word processor, then copy into the above site, then copy into Illustrator.

You'll also need to set it to right-align. Basically, it seems to forcibly replace the characters with their appropriate joined ligatures. The software doesn't treat it as Arabic text, but the characters you are pasting are the correct joined forms of the characters.

Here's a side-by-side comparison of the Arabic word for Arabic (العربية), copied and pasted into a variety of applications with default settings, with suggested best approach at the end. Here's the original from Wikipedia as a screenshot image for comparison:

So it seems like the best, most reliable low/no cost solution to Alex's problem is to have a copy of Inkscape handy. When an issue like this comes up, write and style the text in Inkscape as you would do in Illustrator (Inkscape's interface seems weird when used to illustrator, lettering options like tracking, kerning, line height etc seem to be controlled through keyboard shortcuts, but comparable features are there), then copy and paste the Inkscape text object directly into Illustrator when it is ready. For me (on Windows) copying and pasting translates it into vector paths maintaining the correct lettering. Here's how it looks pasted in to Illustrator and selected (next to Illustrator's earlier attempt for comparison):

If keeping a copy of Inkscape installed just for occasional things like this sounds like a pain, those open source guys have thought of that: there's a portable version which you can run off a pen drive. I've never used it so I won't recommend a place to download it that I haven't tried, but it seems to exist and work.

TaDa! You can now edit the arabic text and shift the font etc. You can even copy/paste it flawlessly, as long as your Illustrator was able to load the original PSD file (try also other types of files, like EPS files generated with a Illustrator ME version maybe? I didn't try that). Just look for free PSD files containing arabic text (generated with a ME version) on the web and use them. Or use the one I included in step 2 if it's still available. Hope it will work for you!

Thanks for the tips! The PC trick sort of helped me. I opened up an old (ME version) InDesign file with editable Arabic text in it on my Mac's non-ME version InDesign CS6, and copied the Arabic text I needed from TextEdit/email straight into the Arabic text box in the ME InDesign Arabic file, and it showed perfectly right and editable as well. Thankfully I had Arabic fonts installed already so the text didn't appear funny or broken.

You may have a look at this plug in ScribeDOOR :ScribeDOOR allows you to edit and work in one or several of the following languages at the same time: Arabic, Azeri, Bengali, Farsi, Georgian, Greek, Gujarati, Hebrew, Hindi, Kannada, Kazakh, Khmer/Cambodian, Lao, Marathi, Punjabi, Tamil, Thai, Urdu, Vietnamese.

I just pasted the text into fontbook using the font "Baghdad" then took a screenshot and used image trace to get the curves of the Arabic word I needed. Worked like a charm! Word would not copy correctly for me. I am using CS6.

It does not look as it suppose to look like and also it adds some symbols that are not suppose to be there.

When I upload the same font file to other design tool (Pitch) it looks as it shown online of the font specimen page. What could be the problem here?

Hi, I've similar issue, same fonts are working in previous versions (Illustrator 2021) but 2022 can't read 90% of arabic fonts. It Shows the font and preview but when you select a font either its some boxes or just the same characters....

AXT (Arabic Xtension) fonts were created for QuarkXpress in the 1980s, they're bad enough to use in a publication as they're not searchable in a PDF. Adobe announced back in 2014 that they will stop supporting these fonts. I know AXT fonts are widely used in the Arab World because these fonts are bastards as no one owns them now.

Please I am from an Arab country most of my work is based on Arabic Fonts (Right to Left fonts) so I find a difficulty in Affinity Designer because it doesn't support tight to left fonts. I have to right it in Adobe illustrator export it as a png then import to to my Affinity Designer project as a png image. You see how it is difficult!

attached file/ with arabic font/ if i plot to my ploter its ok ./ if i plot vea outocade pdf pc3 the letters not conected/ there is no glue btween them // why ?plz try it / i checked the difrence btween confegration of my ploter ant aut-pdf ploter /and some thing missing / i red a pit about it/it seems conected to these 2 / how can i install them in aut pdf plooter ??? is it posseple .

I have found that the Capture fonts options does work with some SHX files but not all. I have logged this issue with the team in the past. The Product Feedback page as suggested by @WarrenGeissler is a great way to bring additional attention to the issue.

the text u sugest is true the only arab text ploted wright in the pdf ploter .but its so bad .the leters grafecs (the midle leters and the end leters ) not good . check plz the end leter in the word ... its not the same .. and if want to change it need to do shift all the time i hate it its bad font not easly readable ........ im sorry about my inglesh.

Every Arabic letter can have multiple forms (i.e., isolated, initial, medial, final, some with all, some with a few). I am ignoring the diacritics for now as the early Quran from these images above didn't use them.

What I've noticed in Arabic font rendering (and I don't know much about Arabic), is that the cursive letters change shape significantly when used in different places in a word. Maybe that's all defined by the initial/medial/final business. I'm not sure.

If all it is is that each letter can have 2-4 forms, and I am ignoring the diacritics, and there are let's say 28 characters in the alphabet (even less if you remove all diacritics), then in SVG I should see 2-4 * 28 glyphs, correct?

Then for the rules of the layout. If I draw an SVG path per glyph, is there anything special I need to do to connect the edges of the glyphs, so it forms continuous cursive? Do I need to test every combination of letters? Or is it somehow constructed, so I work on each letter variant on its own, and somehow because of the positioning of the strokes, everything will "connect"?

It is why I would like a brief overview of how the font rendering engine renders Arabic text. What is going on under the hood that would help me better understand how to do this project? How is it making the seamless connections between letters? How is it picking the variant (is it simply, "if it's in the middle, use medial, otherwise at the end, use final, otherwise at the beginning use initial, otherwise use isolated" type thing?)

What I did was convert a font to SVG, manually copy-paste out the glyphs into JavaScript. Import each one individually into Illustrator, export with alignment in right place (and Illustrator export produces completely different SVG paths than what you provide somehow). Take the Illustrator export put it into this lifesaving SVG path editor; convert each path to absolute coordinates. If the SVG for the glyph looked like it would horizontally stretch easily, I stretched it in Illustrator, exported again, pasted into SVG path editor, and got absolute coordinates for that. Compared coordinates of stretched and unstretched SVG paths to find the moving parts, and converted the JavaScript SVG glyph into a template string with the variable parts parameterized by a scale factor.

That got me to the point of having scalable glyphs. Then I just sized the characters without stretching up to the point where the next word would go over the line, then took all the stretchable characters within that line and stretched them in random order to fill the space. Tons could be done here to optimize the design and placement of each stretched glyph, but that would take a lot of time to figure out probably, a research paper in itself.

I went through and added some slight adjustments for different characters so they merged appropriately without awkward gaps, but overall I didn't have to do too much tinkering with the glyphs themselves. They still don't look perfect but it's good enough for a first draft.

What I learned was that in Arabic script, in the browser, you are dealing with statically sized vector paths like with SVG (like with any other font, English, Hebrew, Chinese, etc.). The SVG was marked with "initial", "medial", "final", etc. on the glyphs, so somehow the font engines are looking for these specific features for this specific language. I didn't need to look for this, but I still don't know how it works. But basically, you just check if it's isolated/initial/medial/final and pick the glyph from that set, or fallback to isolated. The glyphs don't magically glue together like drops of water, they are just aligned properly in the fontfile (or SVG) so given the right letter spacing they will seem to "merge". It's just static glyphs, nothing fancy.

3a8082e126