CODEWITHSUNDEEP
htmljquery-uigoogle-chromearabic
Ahmed Kato
Ahmed Kato

Reputation: 1707

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 !

screen shot from google chrome

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

Upvotes: 2

Views: 4380

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

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).

Upvotes: 3

Ahmed Kato
Ahmed Kato

Reputation: 1707

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

Upvotes: 1

feeela
feeela

Reputation: 29932

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.

Upvotes: 0

Related Questions