Arabic Font Ellipsis issue in IE11

Question

i am facing an issue with the ellipsis while using arabic font "Droid Arabic Kufi" on IE. This error occurs only on IE , however i fixed the issue on IE9, but the same code is not working on IE 11.

The error is when the page is rendered in IE11, instead of displaying the ellipsis dots (...) it is displaying boxes.

Please check the following JSFIDDLE example.

http://jsfiddle.net/qLrg92tb/1/

body{
    font-family : "Droid Arabic Kufi";
}
p{
    width:50px;
    text-overflow : ellipsis;
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
}

p:before{
 content : " ";
 font-family : "Arial";
}

p:after{
    content : " ";
     font-family : "Arial";
}

Waiting for any help.

Thanks

Answer 1

TypoThe Droid Arabic Kufi font does not contain the period “.” character (or any other Ascii characters for that matter, except the space), so when browsers implement text-overflow: ellipsis, they have to take the period from another font. Apparently some versions of IE fail to do that properly, possibly because they interpret the font information incorrectly (as if the font contained “.”).

A workaround is to put some suitable font before it in the the font-family list, so that “.” will be taken from it, e.g.

font-family : Verdana, "Droid Arabic Kufi";

This font should not contain Arabic characters, since the font takes precedence over anything mentioned later in the list. The font should also be available in all systems where IE is used. There is no absolute guarantee of this, but Verdana should be on all Windows systems unless it has been deliberately removed.

Technically this also means that the space character will be taken from that font, not from Droid Arabic Kufi. This may matter in spacing. In Droid Arabic Kufi, the advance width of the space is 696 units, in Verdana it is 700 units, so there should be no practical difference.