Zero-width linear element moves text with valid node text

Question

I have a justified node text into which I want to insert an inline placeholder (an element if you want), the only content of which is " ‍ ", which should not have a width (and the chrome inspector says the same too). I noticed that when I insert this node inline text into the node text, the whole line is “shifted”, as if recounting the layout, although this should not affect it.

I also tested that if the text node insert its left-alignment, this slight movement does not occur. Is this simply due to how the browser calculates the placement of the text in the justified text element, or is there any workaround for this?

Answer 1

As I expected, the problem, not the problem, is explained by how the “excuse” works. First, to confirm that "justify" text-align causes this, check jsffidle: http://jsfiddle.net/e7Ne2/29/

Both divs are the same -> except that the First div has text-align: justify , and the other does not.

You will see that the first div shows that behavior, but not the second div.

This is because “justifying” works this way (from the wiki ):

In a grounded text, spaces between words and, to a lesser extent, between glyphs or letters (kerning) are stretched or sometimes compressed so that the text aligns with both the left and right edges.

So, when we introduce a &zwb; , the text is being reorganized. This behavior is incompatible because not all characters are modified with &zwb; . Thus, when &zwb; changes the text, a few letters “can be” are stretched / compressed, which leads to a seemingly strange behavior

Answer 2

The best I can find on it is that zwj support is not complete in all browsers. Your code accepts the inserted span tag and removes it with this .text () call, so it expands zwj and issues display problems wherever it is between letters.

I'm not sure what the final application should be, but using the jQuery.html () function is likely to be better (you just need to check and make sure that you are not writing inside the tag) because the .text () function separates the tags.

Link: http://api.jquery.com/text/