Why Do Arabic Characters Behave as Separate Characters When Styling Single Arabic Character

Partially colored Arabic word in HTML

Insert a zero-width joiner (e.g. using the entity reference ‍) at the end of the span element content: <span>ش‍</span>س.

More generally, the zero-width joiners at the start and end of each span element as well as (just to be more sure) before and after each span element, in situations where the text should have cursive (joining) behavior and span may break it.

The issue is discussed and illustrated on the Bidirectional text page by Andreas Prilop.

Update: Unfortunately, it seems that even ‍ does not help on current versions of WebKit browsers. They seem to treat HTML markup as breaking joining behavior, no matter what.

Update 2: As described in @NasserAl-Wohaibi’s comment, the new problem can be solved by using ‍ twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even ش‍س wrong whereas without the joiner, it shows شس correctly.

Highlighting the word in arabic

Although the question is different from Partially colored Arabic word in HTML, the basic answer is the same: use the ZERO WIDTH JOINER (ZWJ) character to request for cursive joining, which might not otherwise take place across element boundaries. Using ZWJ multiple times is the safest bet:

ك‍<span style="color:blue">‍َ‍</span>‍تَبَ 

This seems to fix the issue in Chrome. In firefox, the problem does not seem to exist, but there is the problem that the diacritic is not colored. For some odd reason, the ZWJ code fixes this, too. On IE 11, the situation is the same but the ZWJ code does not fix the color issue.

Why does adding formatting to Arabic/Persian text in TextBlock break combining characters in XAML

I'm afraid if there a complete solution, but as a workaround you can use 2 special Unicode characters. Use ARABIC TATWEEL character after ح and use ZERO WIDTH JOINER character after ا.

In HTML you should try this:

حـ<strong>ا‍</strong>ل

You can try it here. For more info refer to Iranian national standards ISIRI 6219 and ISIRI 9147. You can also try asking question in Persian Computing Community.

Swift - Split text based on arabic combined characters

Use the below code:

let a = "أكل الولد التفاحة".split(separator: " ")

FOP Arabic letter spacing

Thanks to the very valuable comments received, I was able to solve the problem by :

1. Upgrading to FOP 2.5
2. Switching to another Font (Traditional Arabic instead of Deja Vu)
3. And, as FOP 2.5 does not require a font metrics file, removing the font metrics.

In the meanwhile I saw that embedding the fonts in my application was more difficult in FOP 2.5 than in FOP 1.1 because it is harder to set relative URLs in FOP font configuration. I was able to solve this with this other answer.

Stroke Effect on Arabic Text At Junctions

Your problem is probably that you draw the stroked version on top of the filled one.

Do the inverse and everything will look as you wanted :

var ctx = c.getContext('2d');ctx.font = "200px Al Tharikh, Arial"var txt = 'مثال';
ctx.textBaseline = 'top';
// change the stroke stylectx.strokeStyle = 'red';ctx.lineWidth = 5;
// first draw the strokectx.strokeText(txt , 100, 0);
// then draw the fillctx.fillText(txt , 100, 0); 

<canvas id="c" height="200" width="500"></canvas>

---

Related Topics