Partially colored Arabic word in HTML

by

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.

More Related Contents:

  1. What character encoding should I use for a web page containing mostly Arabic text? Is utf-8 okay?
  2. HTML – Arabic Support
  3. Arabic characters from html content to pdf using iText
  4. Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)
  5. How to modify the fill color of an SVG image when being served as background image?
  6. Get the value in an input text box
  7. Multiple lines of input in
  8. Make flex items take content width, not width of parent container
  9. Style input type file? [duplicate]
  10. URI starting with two slashes … how do they behave?
  11. How to display scroll bar onto a html table
  12. How to apply CSS page-break to print a table with lots of rows?
  13. How to remove word wrap from textarea?
  14. Disable native datepicker in Google Chrome
  15. CSS: Workaround to backdrop-filter?
  16. HTML5 video element request stay pending forever (on chrome)
  17. How can I put DIV in P?
  18. How to make a stable two column layout in HTML/CSS
  19. How to get a tab character?
  20. Combining two or more Canvas elements with some sort of blending
  21. Purpose of the crossorigin attribute…?
  22. Why is translateY(-50%) needed to center an element which is at top: 50%?
  23. Transparent scrollbar with css
  24. Make A List Item Clickable (HTML/CSS)
  25. html5 video issue with chrome
  26. How to get rid of x and up/down arrow elements of a input date?
  27. HTML CSS Invisible Button
  28. Clear Canvas Rect (but keep background)
  29. CSS After Element to insert mailto link?
  30. Which browsers support data URIs and since which version?

Leave a Comment