Why below HTML markup is generating a result which seems to be incorrect even using Standard Fonts like Arial?
<span>سلام</span><span>خداحافظ</span>
سلامخداحافظ
Above output shouldn't be this? (ignore space used for simulation)
سلام خداحافظ
Also i have used margin for a tag but same problem.
HTML elements do not necessarily break words. There are many legitimate reasons for that.
For instance, you might want to put emphasis on a letter in medial form by wrapping it in a <strong>
or <em>
element. If that element was considered as a single word, the letter would switch to its isolated form, which would probably not be the effect you're looking for.
Inserting either a non-breaking space (
) or a zero-width non-breaking space (​
) between the <span>
elements fixes your problem.
You can see the results in this fiddle.