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

by

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>كت&#x200d;<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 &zwj; 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.

More Related Contents:

  1. Bootstrap 4 Carousel “Half of previous”
  2. How can I vertically align elements in a div?
  3. Image inside div has extra space below the image
  4. Does UL have default margin or padding [duplicate]
  5. Why doesn’t the height of a container element increase if it contains floated elements?
  6. How do I make a placeholder for a ‘select’ box?
  7. What is the order of precedence for CSS?
  8. Text in Border CSS HTML
  9. Equal width flex items even after they wrap
  10. How can I scale an entire web page with CSS?
  11. CSS margin adds space outside parent element [duplicate]
  12. Place text after dots inline with the second line of text overflow ellipsis
  13. Absolute position is not working
  14. How do I fit an image (img) inside a div and keep the aspect ratio?
  15. Flexbox alternative for IE9
  16. CSS horizontal scroll
  17. Fallback for CSS attributes without unit
  18. CSS Speech Bubble with Box Shadow
  19. Center Triangle at Bottom of Div
  20. Add a pipe separator after items in an unordered list unless that item is the last on a line
  21. Linethrough/strikethrough a whole HTML table row
  22. Why can’t I use a heading tag inside a p tag and style it with CSS?
  23. Bootstrap navbar link color won’t change
  24. How to align texts inside of an input?
  25. Border around tr element doesn’t show?
  26. Is it possible to specify a starting number for an ordered list?
  27. Wrapping text around an image with indentation and justify
  28. svg background image position is always centered in internet explorer, despite background-position: left center;
  29. Make Div Draggable using CSS
  30. Link external CSS file only for specific Div [duplicate]

Leave a Comment