1

I would like to apply transformations on specific letters in a word.

In order to make my css transform property working, I'm forced to set display:inline-block; to my spans elements.

Unfortunately, as soon as I change from inline to inline-block, the width between my letters is changing.

enter image description here

Here's a code pen to illustrate my issue : https://codepen.io/michaelgrc/pen/XWNpaJd

I tried to play width the parent font-size to 0, with the space-wrap property, width the letter-spacing property, it doesn't work.

Does anyone have an idea ? Thank you very much

EDIT : the font-kerning property only allows me to have my first word like the second. But I want the opposite : I want my second word to look like the first.

Mark Rotteveel
  • 90,369
  • 161
  • 124
  • 175
Michaël
  • 315
  • 4
  • 19
  • it's about the interaction between the A and V – Temani Afif Feb 13 '21 at 12:11
  • 1
    It's called font kerning. You can read about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning). If you set it to "none" for class `basic-behavior` it all works as expected. – Gerard Feb 13 '21 at 12:12
  • 2
    Hi @Gerard, thanks for your answer but unfortunately I don't want my first sentence to look like the second one. I want the opposite. I want my second sentence to look like the first one. But your css property doesn't seems to do the trick... – Michaël Feb 13 '21 at 12:25

0 Answers0