"Táco" is wider than "Taco". How can I fix that?

Question

I'm trying to load a div with diacritics on top of a div without. The spacing isn't working out like I though. (See the snippet below.) How can I fix this?

div.text {
     width: 75%;
     position: relative;
 }
 div.diacritics {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
      z-index: -1;
      color: red;
 }

<div class="text">String String String String String String String String String String
 <div class="diacritics">
  Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
  </div>

<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
 <div class="diacritics">
  Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
  </div>

I'm unable to reproduce the issue on Mac OS X: http://i.stack.imgur.com/BH9Sw.png — , May 26 '16 at 02:51
As a counterpoint, I'm also on OS X yet do see the issue -- I assume it's a difference in installed fonts. Which suggests that the answer to this question is "Don't try to do that, because the results aren't easily predictable." — Daniel Beck, May 26 '16 at 03:12
If it matters that `"Táco"` is not always exactly the same width as `"Taco"`, then your layout should be more robust. — Sparky, May 26 '16 at 03:21

score 3 · Accepted Answer · answered May 26 '16 at 02:47

div.text {
         width: 75%;
         position: relative;
            font-family: monospace;
     }
div.diacritics {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
            font-family: monospace;
          z-index: -1;
          color: red;
     }

    <div class="text">String String String String String String String String String String
     <div class="diacritics">
      Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div>
      </div>

    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco
     <div class="diacritics">
      Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div>
      </div>

If you are able to make the trade-off, you could always try using a monospace font family.

I guess this answers the question best even though I'd prefer to not use that font. Thanks. — webmagnets, May 26 '16 at 09:01

score 3 · Answer 2 · answered May 26 '16 at 03:13

You're going to want to look at font-kerning.

The font-kerning CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is well-kerned, this feature allows spacing between characters to be very similar, whatever the characters are.

Check out this pen http://codepen.io/anon/pen/JKPMGM, I set kerning to none and they lined up.

div.text {
        width: 75%;
        position: relative;
        font-kerning:none;
    }
    div.diacritics {
        width: 100%;
        height: 100%;
        position: absolute;
        font-kerning:none;
        top: 0;
        left: 0;
      z-index: -1;
      color: red;
    }

A little more info.

Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area.

Thanks, but it still doesn't work on my mac os x. I wonder why some can reproduce the issue and some can't. — webmagnets, May 26 '16 at 09:00
It doesn't look like you're assigning a font. What font are you wanting to use? — Haru, May 26 '16 at 19:48

"Táco" is wider than "Taco". How can I fix that?

2 Answers2

Linked