Changing the color of one character within a word without changing the kerning properties of the word?

Question

Suppose we have the following element:

<div>STACKOVERFLOW</div>

And we want to make the A red, but without changing the kerning properties of the word. In other words we want the word to display exactly the same way it did before. There is a similar question here:

change-color-of-one-character-in-a-text-box-html-css

However using a span element changes the kerning properties of the word (Adds more space in front of the A).

Here's a screenshot from the jsfiddle in the referenced SO question

As you can see it looks like the span element adds a little more space.

Update

I'll add a screenshot along with some code to show what I mean. If you look at the word ICON in the screen shot it is marked up like this (And the spans are causing additional space to be added):

    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
    <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
    <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
    <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span></h1>

div { font-size: 3em; background: blue; display: inline-block; }
span { color: red; }

<div>STACKOVERFLOW</div>
<div>ST<span>A</span>CKOVERFLOW</div>
<img src="https://i.stack.imgur.com/EjnDF.png">

Per request in the comments color utilities come from SuperflyCSS Color Utilities

The font utilities come from the SuperflyCSS Font Utilities

And the u-text-uppercase utility comes from The font utilities come from the SuperflyCSS Format Utilities

Another Update

Thanks you guys - The key - as mentioned in the accepted answer, is to keep the  elements on the same line. When I do that is done this is the result:

Interesting, never noticed that before. https://jsfiddle.net/qLft5yt7/ Don't know if there is a way around this though, unless you want to start fiddling with negative margins and magic numbers ... maybe some of the more obscure/new/browser specific font rendering properties might be able to help in some way. — CBroe, Oct 14 '17 at 04:21
Have just tried @CBroe fiddle in Firefox and Chromium; noticed absolutely zero kerning: the two lines are pixel-for-pixel the same on my machine, even when adding a span to every character after the `A`. Can you add a screenshot of this kerning issue? I'm wondering if there are more than a few variables affecting the rendering ... — hunteke, Oct 14 '17 at 04:25
@Ole without keeping `span` in one line it is also possible. but as you wish....:) — ankita patel, Oct 14 '17 at 05:13
@ankitapatel you were right essentially in your first answer which had the spans on the same line. Guys lots of great effort put into the answers here so please give them some upvote love. — Ole, Oct 14 '17 at 05:40

Chris Happy · Accepted Answer · 2017-10-14T04:53:40.650

You just need to keep it on one line!

You could use:

IconUtility Tests

or:

Icon

Or you could just use font-size: 0 on parent & reset its children font-size or use float: left and a  

.third {  font-size: 0;  }

.third span {  font-size: 16px;  }

.fourth span {
  float: left;
}

<strong>First:</strong><br>
<span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>

<br><br>
<strong>Second:</strong><br>

<span class="second">
<span>Ic</span>
<span>o</span>
<span>n</span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Third:</strong><br>

<span class="third">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>Utility Tests</span>
</span>

<br><br>
<strong>Fourth:</strong><br>

<span class="fourth">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>&nbsp;Utility Tests</span>
</span>

Thanks @chrishappy (The user emoji says it all :) ) - I think it adds a tiny bit of space still, but it's not noticeable really in my demo - so we'll roll with it. I posted my original experiment in the question so everyone can see roughly what could happen. — Ole, Oct 14 '17 at 04:59
For my use case I don't think it's noticeable at all, but in the side by side JSFiddle, it doubles the original distance between the T and the A - but with negative margins and all other great answers here we should have this covered! Thanks again everyone! — Ole, Oct 14 '17 at 05:05

score 2 · Answer 2 · answered Oct 14 '17 at 04:44

I think this should helpful for you. Please try this. To avoid extra space I have used font-size:0 to h1 tag because span tag have taken default property display:inline-block.

h1{
  text-transform:uppercase;
  font-weight:normal;
  font-size:0;
}
.u-text-color-md-pink-a200{
  color:#FF4081;
}
.u-font-weight-900{
  font-weight:bold;
}
h1 span{
  font-size:30px;
}

<h1>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
  <span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
  <span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
  <span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
</h1>

grt812 · Answer 3 · 2017-10-14T04:49:38.883

1

You can still use , and apply a negative margin on it.

#one{
  color:#ff0000;
}
#two{
  color:#ff0000;
  margin:0 -0.04em;
}
div { 
  font-size: 3em; background: blue; display: inline-block; 
}

<!--Old Span-->
<div>ST<span id="one">A</span>CKOVERFLOW</div>
<!--New Span-->
<div>ST<span id="two">A</span>CKOVERFLOW</div>
<!--Original-->
<div>STACKOVERFLOW</div>

edited Oct 14 '17 at 04:49

answered Oct 14 '17 at 04:44

grt812

170
13

Great tip - I'll keep this in mind - may actually put a few negative margin utilities in the format superflycss package. – Ole Oct 14 '17 at 05:00

Changing the color of one character within a word without changing the kerning properties of the word?

Update

Another Update

3 Answers3