Is the position of space important in these gaps?
Starting from this DOM:
<h1><span>Lorem</span><span>Ipsum</span></h1>
For accessibility reasons, we had to add space so that the two words are not contiguous (read as "Lorem Ipsum", not "LoremIpsum"). Normal display is identical due to CSS (display: block). So we have:
<h1><span>Lorem</span> <span>Ipsum</span></h1>
However, due to some JavaScript, it would be more convenient to have the following:
<h1><span>Lorem</span><span> Ipsum</span></h1>
Is this completely equivalent? Can space be distorted in this way?
source to share
The two should be equivalent. White space is collapsed into a single space when inside a displayable inline
. Directly below <h1>
or inside <span>
it should be more or less the same. The main difference is that the space in the second case will be styled span
.
See section 9.1 for the HTML 4 specification. For example:
source to share
Answer: it depends. If span
not framed very clearly, there will be no difference.
However, if span
they have a specific style that is different from h1
, that is different from h1
, this may appear because the space will be styled according h1
to the first example and the span
second.
See the example below where the difference is carried over by different styles:
h1 {
font-size: 3em;
}
h1 span {
font-size: 0.5em;
}
<h1><span>Lorem</span> <span>Ipsum</span></h1>
<h1><span>Lorem</span><span> Ipsum</span></h1>
source to share
Both of your examples will be mostly equivalent. The only noticeable difference I would see is that you had some sort of span styling (which I assume you are doing). If there was a style, then the style would be applied to the space if the space was inside the span. I personally like the spacing between spans because it looks better, but if it's easier to write some javascript I would use the second one.
source to share