19

I don't speak Arabic, but I need specific support for Arabic on our web. I need parts of Arabic words to be in a <span> with a different style than the rest of word. When I type two characters ش and س, they are composed into word شس, but when I use HTML markup 

<span>ش</span>س

these letters are not concatenated right in the output.

enter image description here

In the picture, desired output is on second line, actual output is on first line.

EDIT: It works on Firefox, but does not work in Chrome/Safari.

Sнаđошƒаӽ
  • 16,753
  • 12
  • 73
  • 90
Ondra
  • 3,100
  • 5
  • 37
  • 44

3 Answers3

22

Insert a zero-width joiner (e.g. using the entity reference &zwj;) at the end of the span element content: <span>ش&zwj;</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 &zwj; 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 &zwj; twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even ش&zwj;س wrong whereas without the joiner, it shows شس correctly.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    +1, a nice one. @Ondra, this seems as a more eligible candidate for the *accepted answer*, mind you. – Eliran Malka Jun 22 '12 at 13:56
  • Wow...learn something new every day. It looked like some kind of ligature issue to me, so I just assumed there was no solution. – Chris Fletcher Jun 27 '12 at 13:40
  • as for your update , try adding **two** `‍`, before the letter in the inner span AND after the word in outer span, works fine with me in chrome23. e.g. [jsfiddle](http://jsfiddle.net/noonon/esz4S/2/) – Nasser Al-Wohaibi Dec 01 '12 at 09:52
  • When the text is in italics (`font-style: italic`), this does not work anymore. Look at the [jsfiddle](http://jsfiddle.net/rjDFw/1/). Easy solution, get rid off the italics :S – toto_tico Jun 05 '13 at 09:29
3

This is actually a reported bug in WebKit, thus presumably affects all WebKit-based browsers.

lanzz
  • 42,060
  • 10
  • 89
  • 98
2

As Jukka K. Korpela indicated, This is mostly a bug in most WebKit-based browsers(chrome, safari, etc).

A simple hack other than the TAMDEED char or getting contextual forms for Arabic letters would be to put the zero-width-joiner (&zwj; or &#x200d;) before/after the letter you want to be treated as single Arabic ligature - two chars making up another one. e.g. 

<p>عرب&#x200d;<span style="color: Red;">&#x200d;ي</span></p>

demo: jsfiddle
see also the webkit bug report.

Community
  • 1
  • 1
Nasser Al-Wohaibi
  • 4,562
  • 2
  • 36
  • 28
  • Chrome 76 has a new layout engine LayoutNG which resolves this: https://developers.google.com/web/updates/2019/06/layoutNG – husayt Jul 25 '19 at 10:19