CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
DRB
DRB

Reputation: 653

Why does adding spans change letter position or width in Chrome?

I've ran into an interesting issue, that I believe might be related to Chrome, or even the font I've been using.

In certain parts of this app, spans are wrapped around each letter, after a bit of time. Once this happens, there's a slight shift of letter position. I'm not sure if this is the width, margin, or something else. But, it's most noticeable around the letter "W" and "A".

In the example, you'll see the issue after 1 second, when the letters are wrapped in a span.

Link to JS Fiddle.

setTimeout(function() {
  var wrapFinal = $(".wrap");
  wrapFinal.html(wrapFinal.text().replace(/./g, "<span>$&</span>"));
}, 1000);
.wrap {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 46px;
  text-align: center;
  letter-spacing: 4px;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">aWsdasWdWds</div>

Upvotes: 2

Views: 306

Answers (1)

Sami Hult
Sami Hult

Reputation: 3082

It's definitely a kerning issue.

Since you wrap single characters into span elements, the font engine will no more consider the text as a continuous string; and how could it - the spans could be formatted to appear anywhere, or disappear altogether for that matter.

More formally put, the span elements will get each their own box models for rendering. The contents of the boxes will be rendered independently, so there is no possibility for the text renderer to use kerning strategies.

If you want the representations with and without spans to appear similar to each other, you could try to gently hint the kerning engine to stop what it's doing by setting font-kerning: none.

Upvotes: 3

Related Questions