What's the best way to remove letter-spacing from the last letter?

[Junitar]

Hello,

 

I've a vertical menu of this kind, styled with a letter-spacing of 5px:

<nav>
  <div class="menu-mobile" id="menu-mobile">menu</div>
					
  <ul>
    <li><a href="#" title="Home">home</a></li>
    <li><a href="#" title="Galleries">galleries</a></li>
    <li><a href="#" title="News">news</a></li>
    <li><a href="#" title="About">about</a></li>
    <li><a href="#" title="Contact">contact</a></li>
  </ul>
</nav> 

I was wondering what's the best way to remove letter-spacing from the last letter here in order to have the text well centered in my design.

 

The method I usually use for this is to do a horizontal menu, set the parent element in display: inline-block and then apply a margin-right to -5px to each <a> tags. It works great but it's not what I want here as I would like to have a centered vertical menu that takes a 100% width for mobile devices.

 

The other solutions I know consist in wrapping each text elements in a <span> tag to which I apply a margin-right to -5px, or to play with the padding property to adjust the position of the text, but both these solutions are quit exhaustive and I don't really like them.

 

Isn't it a more simple and "elegant" way to remove that space created by the letter-spacing property from the last letter?

 

Thanks for your help!

Edited October 5, 2016 by Junitar

[Ingolme]

You want the last two letters attached to each other while the rest are separated? If that's not it then what you actually want to do is remove space from the right edge of the container. A negative margin on the container would fix that.

 

I'm not sure what your page looks like and what you actually intend it to look like. Letter spacing should not affect how the text is centered.

[Junitar]

Here is an example of what I want to avoid and what I would like to have: https://jsfiddle.net/kpyjxne8/

As you can see in this example, the letter-spacing property doesn't add space between letters but after them. As a result, all my "contents" are shifted to the left by the amount of space I set to the letter-spacing and are no longer centered. The third "content", to which I applied a negative margin of 5px is well centered and helps visualize the decentering of the other elements.

 

 

 

If that's not it then what you actually want to do is remove space from the right edge of the container. A negative margin on the container would fix that.

Thanks, that fixed the problem for the menu at least. When I first tried that, I applied the negative margin to the <nav> tag which brought another problem. In fact, I needed to apply it to the <li> tags.

Unfortunately, all my elements outside the <ul> tag that have a letter-spacing are still not centered because of the letter-spacing. I guess I will need to fix them with the margin-right applied to a <span>.

Edited October 6, 2016 by Junitar

[dsonesuk]

What you are CURRENTLY using, negative margin is the normal method around this issue, the only other method I could come up with is to counterbalance the problem by adding character encoded space before first letter.

 

nav a:before {content:"\00a0"; font-size: 0;}

Note: only tried out in firefox, its difficult to control width though, but you might be able to create a inline-block content: element, that should give you more control.

[Junitar]

Thanks, I will try that out but I think I will stick with the margin-right method since it's the normal method around this issue.

Having a inline-block content for the menu is what I use for the horizontal menu of the desktop version of my site and it gives more control indeed. I didn't manage to do exactly what I wanted for the mobile version with a inline-block content but I still have a lot to learn.

 

Well, I guess my problem is solved anyway. Thank you to you both!

[dsonesuk]

To be clear when I said 'inline-block content: element' I meant similar to

nav a:before {content:""; display: inline-block; width: 5px;}

[Junitar]

Oh, ok. I didn't get it that way.

I've just tried it out and it works perfectly! Thanks.