2

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

Rob W
  • 341,306
  • 83
  • 791
  • 678
Ahmed Kato
  • 1,697
  • 4
  • 29
  • 53
  • Testing on Chrome 21beta (Win 7) with the word سوني, both in normal content and in `select` element, using Arial, I can see it displayed properly, with adequate contextual forms for the letters. Can you please provide more information, such as self-containing document that demonstrates the issue? – Jukka K. Korpela Jul 27 '12 at 15:00
  • I think the error is from my chrome,I edited the combobox (using chrome F12 editor) in the jquery ui demos http://jqueryui.com/demos/autocomplete/#combobox and the same error with separate characters !! If you can do it and tell me your result , will be grate =) – Ahmed Kato Jul 27 '12 at 15:24
  • I am sorry .. I am still a stackoverflow noob :$ Thank you for your advice – Ahmed Kato Jul 28 '12 at 14:42

3 Answers3

3

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

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • you are right in the combobox javascript here is a function '(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1"), value: text, option: this };' if we can change $1 to another element that join every character it will work unfortunately the &zwj did't work – Ahmed Kato Jul 28 '12 at 12:02
1

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

Ahmed Kato
  • 1,697
  • 4
  • 29
  • 53
0

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.

feeela
  • 29,399
  • 7
  • 59
  • 71
  • I am using the same font "arial " in .ui-autocomplete-input and .ui-autocomplete the difference is the input is bold I don't know how to change the font I just use css but I can't change the code in jquery ui library – Ahmed Kato Jul 27 '12 at 14:26