Partially Colored Arabic Word in HTML

Partially colored Arabic word in HTML

Insert a zero-width joiner (e.g. using the entity reference ‍) at the end of the span element content: <span>ش‍</span>س.

More generally, the zero-width joiners at the start and end of each span element as well as (just to be more sure) before and after each span element, in situations where the text should have cursive (joining) behavior and span may break it.

The issue is discussed and illustrated on the Bidirectional text page by Andreas Prilop.

Update: Unfortunately, it seems that even ‍ does not help on current versions of WebKit browsers. They seem to treat HTML markup as breaking joining behavior, no matter what.

Update 2: As described in @NasserAl-Wohaibi’s comment, the new problem can be solved by using ‍ twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even ش‍س wrong whereas without the joiner, it shows شس correctly.

Highlighting the word in arabic

Although the question is different from Partially colored Arabic word in HTML, the basic answer is the same: use the ZERO WIDTH JOINER (ZWJ) character to request for cursive joining, which might not otherwise take place across element boundaries. Using ZWJ multiple times is the safest bet:

ك‍<span style="color:blue">‍َ‍</span>‍تَبَ 

This seems to fix the issue in Chrome. In firefox, the problem does not seem to exist, but there is the problem that the diacritic is not colored. For some odd reason, the ZWJ code fixes this, too. On IE 11, the situation is the same but the ZWJ code does not fix the color issue.

Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)

I'm not sure if there's any HTML way to do it, but you can fix it by adding a zero-width joiner Unicode character before the opening span tag:

<p>كت‍<span style="color: Red;">ب</span></p>

You can use the actual Unicode character instead of the HTML character entity, of course, but that wouldn't be visible here. Or you can use the prettier ‍ entity.

Here it is in action (using an invisible <b> tag, since I can't do color here), without the joiner:

كتب

and with the joiner:

كت‍ب

It's supposed to work without the joiner as far as I understand it, though, and it does in some browsers, but clearly not all of them.

arabic characters are displayed separately in google chrome

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

Highlight Match Words of Two Arabic String (Javascript)

I found solution for my problem. I duplicate the keywords into another layer on top of search result and align them using CSS. With this, not only I can highlight the match words+diacritic but also show the missing diacritic:

Here's the code:

for(var b=0; b<source.length; b++) {
    for(var c=0; c<keyword.length; c++) {
        if(removeDhabt(keyword[c])==removeDhabt(source[b])) {
            source[b] = '<m0><m1>'+keyword[c]+'</m1>'+source[b]+'</m0>';
        }
    }
}

Here's the css:

m0 {
    color: #3498DB;
}
m0 m1 {
    color: #CC425B;
    position: absolute;
    top: 0;
    right: 0;
}

Here's the result:

---

Related Topics