CODEWITHSUNDEEP
htmlcssarabic
Burawi
Burawi

Reputation: 471

HTML formatting Arabic text letters

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.

Upvotes: 8

Views: 2796

Answers (2)

Basheer
Basheer

Reputation: 328

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

Upvotes: 4

David Glickman
David Glickman

Reputation: 805

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.

Upvotes: 12

Related Questions