Is there a way to remove the space within a span element?

Question

I try to give to each line of a text the exact width of the parent block. I'm almost done but some lines are slightly shifted because of a weird space within the spans.

Here is a fiddle

var $wrapper = $('#wrapper');
$(window).on('load', function() {
  $('.text').each(function() {
    if ($(this).width() > $wrapper.width()) {
      while ($(this).width() > $wrapper.width()) {
        $(this).css('font-size', (parseInt($(this).css('font-size'), 10) - 1));
      }
    }
  });
  $wrapper.removeClass('invisible');
});

h1 {
  position: relative;
  font-weight: 600;
  text-align: center;
}
h1 .text {
  display: inline-block;
  font-size: 40rem;
  line-height: 1;
  white-space: nowrap;
}
.wrapper {
  width: 37.4rem;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 1s ease;
  visibility: visible;
}
.wrapper.invisible {
  opacity: .00001;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper invisible" id="wrapper">
  <h1>
    <span class="text">Lorem</span>
    <span class="text">ipsum dolor sit amet</span>
    <span class="text">consectetur adipisicing elit</span>
  </h1>
</div>

As you can see, some lines are larger than others. This is because of this space between the edge of the element and the actual text

Is there a way to make this perfectly aligned ?

No, there is not. What you experience here is a font feature called **kerning** and there is nothing you can do about it programmatically. It also differs with every font and within each font, potentially with every letter. Kerning makes sure any two letters next to each other look harmonic. — connexo, Nov 03 '16 at 13:55
Also...not all glyphs are the same width &/or centered in their glyph-block — Paulie_D, Nov 03 '16 at 14:41
Tangent: this looks like a good use case for my [WideText](https://github.com/olets/WideText) (see example 4 in the demo). There'll still be the potential for space related to kerning and placement in the glyph-box, but your font sizes will be more exact and it'll be fully responsive. There's also the well known awesome [BigText](https://github.com/zachleat/BigText), but that's heavier and isn't responsive — henry, Nov 03 '16 at 14:57

Kraken · Answer 1 · 2016-11-03T14:22:25.813

0

I disagree with the comment from connexo. The space you are seeing is there because you are using display: inline-block;. When you display inline, it is laid out in the old school typesetting way, with spaces in between.

You can target the span directly after the space and put a negative left margin on it to eliminate the space.

edited Nov 03 '16 at 14:22

answered Nov 03 '16 at 14:14

Kraken

5,043
3
25
46

Well, it is supposed to be an international page, so it has to be dynamic. I can't afford to target each line and giving them a specific margin (that's why I wrote this script in the first place). – Mehdi Brillaud Nov 03 '16 at 14:17
Then don't use display: inline-block – Kraken Nov 03 '16 at 14:22
h1 span { display: inline-block; } (i know this is not in the .text rule, I did this fiddle quickly) – Mehdi Brillaud Nov 03 '16 at 14:23
Oops, sorry, I've misread your comment. If I put display block, nothing changes. – Mehdi Brillaud Nov 03 '16 at 14:25
Honestly, you have a lot of rules on here that would affect your precise alignment, including text-align, relative positioning, and not sure at all why you are using "left" here. If you have further questions, post more questions. But if you use inline or inline-block the browser is going to lay it out inline like text. – Kraken Nov 03 '16 at 14:32
the relative positionning and the left property have nothing to do with the issue, it concerns the block itself (it's in the fiddle because of copy/paste of the real project, I removed them).The only properties for the spans are : text-align: center, display: inline-block, line-height:1 and white-space: nowrap. Even if I deactivate all of these rules, or use display:block, the problem is the same (it's easy to do in the inspector). Try to tweak the fiddle – Mehdi Brillaud Nov 03 '16 at 14:45
1

Kraken you're misunderstanding or mischaracterizing how whitespace and inline-block elements work. It isn't "old school" and doesn't relate to inline display. Whitespace between inline-block elements appears on the final page. There are various ways around this - see [thirtydot's answer to "How to remove the space between inline-block elements?"](http://stackoverflow.com/a/5078297/1241736). I can confirm that removing the whitespace around the inline-block elements here doesn't address the problem – henry Nov 03 '16 at 14:48
Mehdi, it is not 100% clear what exactly the outcome you want is. However, as I mentioned, the text-align rule is going to affect your positioning. Either case, the content of each line is of varied length, and will render varied widths. – Kraken Nov 03 '16 at 14:53
Removing the whitespace from the html also works, but I use a template rendering engine, so controlling whitespace is not always an option. The reason it does this is actually a throwback to the way typesetting worked, and that is why I used the term "old school" (notice the quotes). However I appreciate you telling me what I don't understand. That's classic. – Kraken Nov 03 '16 at 14:57

Is there a way to remove the space within a span element?

1 Answers1