I don’t speak Arabic, but I need specific support for Arabic on our web. I need parts of Arabic words to be in a <span> with a different style than the rest of word. When I type two characters ش and س, they are composed into word شس, but when I use HTML markup
<span>ش</span>س
these letters are not concatenated right in the output.

In the picture, desired output is on second line, actual output is on first line.
EDIT: It works on Firefox, but does not work in Chrome/Safari.
Insert a zero-width joiner (e.g. using the entity reference
‍) at the end of thespanelement content:<span>ش‍</span>س.More generally, the zero-width joiners at the start and end of each
spanelement as well as (just to be more sure) before and after eachspanelement, in situations where the text should have cursive (joining) behavior andspanmay 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.