Geek Answers Handbook

Why is there no markup of letters between the nested inline element and the subsequent character?

After reading the specification for line spacing, I understand that inline atomic runs (ex inline-block) are considered as one character ( http://www.w3.org/TR/css3-text/#letter-spacing ):

For marking letters, each successive start of atomic lines (for example, images and / or embedded blocks) is considered as one character.

In all browsers I tested (Chrome, Safari, Firefox, IE 9 + 10), it seems that this does not work.

The following code ( http://codepen.io/caleb/pen/CqDfK ):

<style> div { letter-spacing: 2em; } em { letter-spacing: normal; } </style> <div> a<em>em</em><em>em</em>bc </div>

displayed as follows:

 a ememb c

Is there a reason why there is no extra 2 intervals between emem and b ? Since emem is the only character.

+6
source share
1 answer

Perhaps the spec doesn't seem to be fully implemented, as you are commenting, but I'm not sure. When I introduced a modified version of the example from spec (modified in that I made all internal em elements and resized to better see, the changes in the quote below are in brackets) ...

For example, given the markup

 <P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P>

and style sheet

 LS [em] { letter-spacing: 1em; } Z [em > em] { letter-spacing: 0.3em; [made 3em in example] } Y [em > em + em] { letter-spacing: 0.4em; [made 6em in example]}

the interval will be

 a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g

... it does not display in accordance with what they declare , which implies some deviations from the specification. Instead, the rule to follow is that the previous letter-spacing value indicates the space that follows it. This may be an implementation based on the interpretation of this statement from the specification:

At the borders of the elements, the total distance between the two characters is given and displayed inside the innermost element that contains the border.

But I'm not so sure about that. Anyway, following what seems like a rule used by the browser, the value of the previous letter letter-spacing defines the interval, and then that explains the answer to your question

Is there a reason why there is no extra 2 intervals between emem and b?

This is because the letter preceding b is the m contained in the letter-spacing: normal encoded element, which gives it a width of zero width after it. I do not believe in the link ...

For marking letters, each successive atomic launch (for example, images and / or embedded blocks) is considered as a single symbol

... has a lot to do with this. This simply indicates that such “atomic inlays” function as a unit, and em is not atomic inline by default ( see second paragraph 9.2.2 in this specification ). Therefore, in this example, the width element of the inline-block element determines where g is located, and not the fact that f > happens now after g , because the whole block functions as an atomic unit.

+2
source

More articles:


All Articles