CODEWITHSUNDEEP
htmlcss
Michaël
Michaël

Reputation: 609

Preserve font-kerning when span elements are not inline

I'd like to apply transform effects on the letters of a word. So I surrounded each letter with a span element. Also, transformations are not visible on inline element. So I set display: inline-block to my spans but as soon as I'm doing that, the font-kerning is broken.

I tried several combinations implying display: flex, white-space: nowrap, font-kerning: normal, and others but in vain.

Is there a way to preserve font-kerning when my span elements are not displayed inline ?

Here's a codepen that illustrates my issue : https://codepen.io/michaelgrc/pen/PoerMrd

Thank you very much

Upvotes: 2

Views: 310

Answers (1)

BehRouz
BehRouz

Reputation: 1374

As herrstrietzel said, CSS kerning works for the letters within a distinct tag.

However, there is a tedious way to fix this and it's basically implementing the concept of kerning from scratch. In CSS we can select an element by its previous and following elements. Also, we can shift an element along its horizontal axis using negative and positive values of margin.

Here is a simple example that shifts the position of Ws appearing in the code after A, and letters e followed by W:

span {
  display: inline-block
}
.A + .W {
  margin-left: -.35em
}
.W + .e {
  margin-left: -.3em
}

.kern{
  font-kerning: normal;
}
<p>CSS built-in font-kerning:</p>
<span class='kern'>AWe</span>

<p>custom kerning:</p>
<span class='A'>A</span>
<span class='W'>W</span>
<span class='e'>e</span>

<p>no kerning:</p>
<span>A</span>
<span>W</span>
<span>e</span>

I used em units because it's relative to the base font-size of the element.

Upvotes: 1

Related Questions