It appears that the specification may not be fully implemented as indicated in your comment, though I cannot say for certain. I experimented with a modified version of the example provided in the specification (changed inner elements to em
and adjusted sizes for clarity; modifications noted in brackets below)...
Given the markup
<P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P>
and the style sheet
LS [em] { letter-spacing: 1em; }
Z [em > em] { letter-spacing: 0.3em; [changed to 3em in example] }
Y [em > em + em] { letter-spacing: 0.4em; [changed to 6em in example]}
the expected spacing should be
a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g
However, when I tested it out on my own, the rendering did not match the explanation provided in the spec. It seems like the observed rule is that the preceding letter's letter-spacing
value dictates the spacing following it. This interpretation could stem from this statement in the specification:
At element boundaries, the total letter spacing between two characters
is given by and rendered within the innermost element that contains
the boundary.
I am uncertain about this interpretation. If indeed the browsers are following the rule that the preceding letter determines the spacing, then this clarifies why there isn't additional spacing between the emem and the b mentioned in your question:
Is there a reason why there isn't an additional 2em of spacing between
the emem and the b?
The lack of space is attributed to the letter before the b
, which is in a letter-spacing: normal
element resulting in zero width spacing after it. The reference stating...
For the purpose of letter-spacing, each consecutive run of atomic
inlines (such as image and/or inline blocks) is treated as a single
character
...might not directly impact this scenario. It simply suggests that "atomic inlines" act as one unit, and an em
does not qualify as an atomic inline by default (refer to second paragraph of 9.2.2 in this spec). Therefore, in this instance, the placement of the g
is determined by the width
of the inline-block
element, not solely by the position of the f
occurring after the g
, as the entire block functions as a unified entity.