Highlighting the word in arabic

Question

I want to highlight the the arabic diacretics with but it changes the form of the word,

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

and this turns into

كَ تَبَ

but it should be like this:

كَتَبَ

Is there's any way of doing this

You forgot to explain in what way the "form of the word" is changed and how you attempt to change it. — arkascha, Jul 18 '14 at 15:42
possible duplicate of [Why do Arabic characters behave as separate characters when styling single Arabic character?](http://stackoverflow.com/questions/12886663/why-do-arabic-characters-behave-as-separate-characters-when-styling-single-arabi) — Andy, Jul 18 '14 at 15:51
Please see http://stackoverflow.com/questions/11155849/partially-colored-arabic-word-in-html?rq=1 it might help — Onimusha, Jul 18 '14 at 15:51
Or here: http://stackoverflow.com/questions/7069247/inserting-html-tag-in-the-middle-of-arabic-word-breaks-word-connection-cursive?rq=1 — Andy, Jul 18 '14 at 15:52
This does not look like a duplicate of previous question (though it has some connections). This is about coloring a diacritic mark. — Jukka K. Korpela, Jul 18 '14 at 17:42

score 3 · Accepted Answer · edited May 23 '17 at 11:52

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:

ك&zwj;<span style="color:blue">&zwj;َ&zwj;</span>&zwj;تَبَ

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.

Highlighting the word in arabic

1 Answers1