css - Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)

Question

From wikipedia:

Cursive (from Latin curro, currere, cucurri, cursum, to run, hasten) is any style of handwriting that is designed for writing notes and letters quickly by hand. In the Arabic, Latin, and Cyrillic writing systems, the letters in a word are connected, making a word one single complex stroke.

In the above languages when we want to format one single word with e.g. <span> tag to apply custom css style it breaks word conection, so is there any solution for this.

example this is for example normal arabic word:

???

but when we want to color last letter in other color using the span tag get this:

because first two letter are in one tag and last is in other to color it.

Is there something I can do to avoid word breaks.

Here is the full html:

<p>??<span style="color: Red;">?</span></p>

Answer 1

I'm not sure if there's any HTML way to do it, but you can fix it by adding a zero-width joiner Unicode character before the opening span tag:

<p>??&#x200d;<span style="color: Red;">?</span></p>

You can use the actual Unicode character instead of the HTML character entity, of course, but that wouldn't be visible here. Or you can use the prettier ‍ entity.

Here it is in action (using an invisible <b> tag, since I can't do color here), without the joiner:

???

and with the joiner:

??‍?

It's supposed to work without the joiner as far as I understand it, though, and it does in some browsers, but clearly not all of them.