50% percent is more than half content when adding letter-spacing

Question

I have this code which displays five stars:

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #dcdcdc;
  position: relative;
  letter-spacing: 10px;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005\f005\f005\f005\f005";
  display: block;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
  <span style="width: 50%"></span>
</span>

The stars are separated using letter-spacing:

letter-spacing: 10px;

I want to highlight 2 stars and a half, so I use width: 50%. But the 50% is not exactly in the middle of the star. When I remove letter-spacing, the 50% looks like correct. How can I change it so that the 50% is correct with a letter-spacing?

You question was difficult to understand, so I have done a big edit. Feel free to change things if I didn't understand your problem correctly. — Oriol, Aug 19 '16 at 18:03
Possible duplicate of [How can I remove letter-spacing for the last letter of an element in CSS?](http://stackoverflow.com/questions/6949836/how-can-i-remove-letter-spacing-for-the-last-letter-of-an-element-in-css) — Edison Biba, Aug 19 '16 at 18:13

score 1 · Accepted Answer · answered Aug 19 '16 at 18:08

1

Remove the letter spacing and add a space in-between each of the stars like the following instead:

https://jsfiddle.net/39y4ctkg/

.score::before,
.score span::before{
  content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
  display: block;
}

answered Aug 19 '16 at 18:08

Alex

2,651
2
25
45

score 0 · Answer 2 · edited May 23 '17 at 12:10

That's because letter-spacing adds space after the last letter:

This is a blatant violation of the spec. You are doing it properly. When browsers fix their implementation to match the spec, your code will work as you expected.

You can try to counteract that bug, but then it will probably break when browsers implement the correct behavior. So I suggest avoiding letter-spacing. You can try justification instead:

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #dcdcdc;
  position: relative;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005  \f005  \f005  \f005  \f005";
  display: block;
  width: 7em;
  text-align: justify;
  text-align-last: justify;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
  <span style="width: 50%"></span>
</span>

@Koda You can try negative margins or things like that, but that will break when browsers implement the proper behavior. I suggest avoiding `letter-spacing`. Maybe you can use justification instead. — Oriol, Aug 19 '16 at 18:09

score 0 · Answer 3 · answered Aug 19 '16 at 18:30

You can give width as below,

for 0.5 -> width: calc(10% - 5px);
for 1.0 -> width: calc(20% - 5px);
for 1.5 -> width: calc(30% - 5px);
for 2.0 -> width: calc(40% - 5px);
for 2.5 -> width: calc(50% - 5px);
for 3.0 -> width: calc(60% - 5px);
for 3.5 -> width: calc(70% - 5px);
for 4.0 -> width: calc(80% - 5px);
for 4.5 -> width: calc(90% - 5px);
for 5.0 -> width: calc(100% -5px);

Or also add below css for the span,

.score span{
  box-sizing: border-box;
  border-right: 5px solid transparent;
}

50% percent is more than half content when adding letter-spacing

3 Answers3