1

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

Michaël
  • 489
  • 1
  • 5
  • 21
  • Please add a snippet that demonstrates the problem. – BehRouz Oct 20 '22 at 17:38
  • Does this answer your question? [How to remove the space between inline/inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) – imvain2 Oct 20 '22 at 20:07
  • No, it is not related. I'm speaking about a font-kerning issue, not about white space between letter or words. – Michaël Oct 20 '22 at 22:27
  • @BehRouz, snippet added :) – Michaël Oct 20 '22 at 22:40
  • Sorry, but kerning will only be applied to text within the same layout context - if you split strings into inline- or block like elements you will break the context. – herrstrietzel Oct 21 '22 at 00:02
  • herrstrietzel is right. Why do you need to separate each letter and apply `transform` on each of them individually? – BehRouz Oct 21 '22 at 00:25
  • Because I want to do a great apparition animation when my text reach the viewport :) – Michaël Oct 21 '22 at 01:00

1 Answers1

1

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.

BehRouz
  • 1,209
  • 1
  • 8
  • 17
  • 1
    Thanks for your answer. I wanted to avoid this kind of solution but it looks like it's the only way :) – Michaël Oct 21 '22 at 01:07