Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
469 views
in Technique[技术] by (71.8m points)

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

From wikipedia:

Cursive (from Latin curro, currere, cucurri, cursum, to run, hasten) is any style of handwriting that is designed for writing notes and letters quickly by hand. In the Arabic, Latin, and Cyrillic writing systems, the letters in a word are connected, making a word one single complex stroke.

In the above languages when we want to format one single word with e.g. <span> tag to apply custom css style it breaks word conection, so is there any solution for this.

example this is for example normal arabic word:

???

but when we want to color last letter in other color using the span tag get this: enter image description here

because first two letter are in one tag and last is in other to color it.

Is there something I can do to avoid word breaks.

Here is the full html:

<p>??<span style="color: Red;">?</span></p>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...