arabic characters are displayed separately in google chrome

问题

I am developing a web app where I am displaying arabic words in a jquery ui combobox, It's working perfectly in IE and firefox,but chrome is displaying the words in separate way !

you can see the difference between the two sony in the combobox and the dropdown list

here is my meta

<meta http-equiv="content-type" content="text/html";charset="utf-8" />

and The data is stored in sql server using collate

回答1:

Looking at the page you mention in a comment, http://jqueryui.com/demos/autocomplete/#combobox in Chrome F12 editor, it seems that in this browser, a jQuery-generated dropdown list element like foo appears so that each character is inside a separate strong element: <strong>f</strong><strong>o</strong><strong>o</strong>. In Firefox, I see a generated select element instead, with <option>foo</option>. I suppose this depends on jQuery, which tries to accommodate for browser differences.

In any case, markup like <strong>f</strong><strong>o</strong><strong>o</strong>, though mostly harmless for texts in the Latin alphabet, may mess up Arabic text badly, since it may make browsers treat each letter as independent and use the independent glyph form for it. Cf. to the question Partially colored arabic word in HTML.

I hope someone who knows jQuery well can come up with a suggestion to fix this. All that woule be needed is to avoid separating the letters as in <strong>f</strong><strong>o</strong><strong>o</strong>, using just <strong>foo</strong> (if simple foo won’t do).

回答2:

I did't ;) in the jquery ui combobox javascript you will have this function

if (this.value && (!request.term || matcher.test(text))) return {
                                        label: text.replace(
                                        new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +       $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span></span>"),
                                        value: text,
                                        option: this
                                    };

I've just removed the "gi" so the code is

if (this.value && (!request.term || matcher.test(text))) return {
                                        label: text.replace(
                                        new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +       $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", ""), "<span></span>"),
                                        value: text,
                                        option: this
                                    };

and it's working just fine now :D

回答3:

That depends on the used font, not on the character set.

As one can see from your screenshot even the latin variants of "Sony" differ slightly (mind the Y). Try to use the same font in both cases.

来源：https://stackoverflow.com/questions/11689144/arabic-characters-are-displayed-separately-in-google-chrome