Inserting HTML Tag in The Middle of Arabic Word Breaks Word Connection (Cursive)

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.

Making a letter bold in cursive scripts like Arabic script

There is no predefined way for the browser/OS to connect Normal س to a Bold ی. It's somehow similar to have س and ی in different font sizes.

One workaround is to use Kashida before and after the letters:

ســیـب

Another workaround is to use Zero-width joiner:

س‍‍ی‍ب

Avoid incorrect wrapping of some words in RTL languages (Farsi, Arabic)

You are looking for a non-breaking space character. In MS Word, ctrl+shift+space inserts a non-breaking space character. To do that in HTML use this   instead of the normal white-space. Check out the JSFiddler: https://jsfiddle.net/6k0p9h5k/

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.

How to modify how TinyMCE format text

I totaly understand your need for a word-joiner.
Depending on the browser you might be able to insert this character using a css-pseudo element - in this case before: http://www.w3schools.com/cssref/sel_before.asp

Your tinymce content css (use the tinymce init setting content_css) should contain the following:

body span:before {
    content:'\2060'; // use '\00b6' to get something visible for testing
}

UPDATE: Approch2:

You can do this check to enter your word joiners:

var ed = tinymce.get('content') || tinymce.editors[0];

var span = $(ed.getBody()).find('span:not(.has_word_joiner)').each(function(index) {
  ed.selection.select(this);
  ed.execCommand('mceInsertContent', false, '\u2060<span class="has_word_joiner">'+this.innerHTML+'</span>'); // you might want to add the formerspan attributes too, but that is a minor issue
});

You might need to call this using an own plugin on special events.

---

Related Topics