vendredi 8 mai 2015

Is it possible to have different letter-spacing between characters in the same word? Can this be accomplished with CSS only?

I've done some research, and I'm aware of the letter-spacing CSS property, but is it possible to have different characters within the same word spaced differently?

I wouldn't be skipping any layers, so I couldn't accomplish this with using span tags every two letters.

.ex      { letter-spacing: -2.0px }
.am      { letter-spacing: -1.5px }
.pl      { letter-spacing: -1.0px }
.e       { letter-spacing: -0.5px }
<span class="ex">Ex</span><span class="am">am</span><span class="pl">pl</span><span class="e">e</span>

The functionality I'm looking for would be more like this, but I'm not sure it's possible:

.ex      { letter-spacing: -2.0px }
.am      { letter-spacing: -1.5px }
.pl      { letter-spacing: -1.0px }
.e       { letter-spacing: -0.5px }
<kern class="1">E<kern2 class="2">x</kern><kern3 class="3">a</kern2><kern4 class="4">m</kern3><kern5 class="5">p</kern4><kern6 class="6">l</kern5>e</kern6>

I appreciate any feedback, thanks!

Aucun commentaire:

Enregistrer un commentaire