HTML formatting Arabic text letters

Question

I want to color some letters in an Arabic text, for instance this text:

إذا ماطمحت إلى غاية

that gives me this normal text:

So I put some letters in tags to color them:

HTML:

إذا <b>م</b>اط<b>م</b>حت إلى <b>غ</b>اية

CSS:

b {
    color: #e74c3c;
}

and this gave me:

But I want it to give a normal readable Arabic text like that:

I tried changing font but it seems to be the same problem with all fonts so the issue is not in fonts.

Answer 1

Try adding a zero-width joiner Unicode character before the opening span tag. You should check this in all browsers, as it is an issue that some can't cope with.

Answer 2

I have a test here, but I find small cuts between red color letters and following letter:

إذا <b>م&zwj;</b>ا ط<b>م&zwj;</b>حت إلى <b>غ&zwj;</b>اية

https://jsfiddle.net