7

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

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

that gives me this normal text:

enter image description here

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:

enter image description here

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

enter image description here

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

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Burawi
  • 451
  • 4
  • 16

2 Answers2

11

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.

David Glickman
  • 713
  • 1
  • 11
  • 18
  • 1
    thanks that works but instead of adding it before the opening tag I added it inside the tag. – Burawi Feb 02 '16 at 11:10
4

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

Basheer
  • 328
  • 1
  • 2
  • 10
  • 1
    you should add the symbol before and after every letter you want to make in joined form so in this code you have to join ا (alif) with the م (mim) before it, ط (ta) with م (mim) after it, ح (ha) with the same م (mim) that is before it and the ا (alif) with the غ (ghayn) before it... And this is the code: ` إذا م‍‍ا ط‍م‍‍حت إلى غ‍‍اية ` – Burawi Feb 03 '16 at 10:37
  • I got spaces between two character, why ? – Noor Hossain Sep 28 '21 at 11:04