change of font-weight to bold is unwantingly changing width of element [duplicate]

Answer 1

An alternative to font-weight for bolding text is to use text-shadow to set a horizontal shadow the same colour as the text. This code sets equal shadows to the left and the right. With only one shadow, the text would appear to shift in the direction of the shadow.

CSS:

    a:hover {
      text-shadow: .25px 0px .1px,
                  -.25px 0px .1px;
    }

Note that web browsers do not render text, let alone text-shadow effects, identically. You'll want to check how they look in multiple browsers before deciding on values.

Answer 2

Here how I have done it:

<ul id="header_menu">
  <?php
  $menu_items = array(array("Home", "/"),
                      array("About", "/about.html"),
                      array("Consumer Info", "consumer-info.html"),
                      array("News & Events", "news-events.html"),
                      array("Contact", "contact.html")
                      );
  foreach($menu_items as $value)
  {
    // Find box width of text and add padding
    $padding = 10;
    $font-size = 12; // pt
    list($left,, $right) = imageftbbox($font-size, 0, "fonts/OpenSans-Bold.ttf", $value[0]);
    $width = ($right - $left) + ($padding * 2);

    echo "<li><a style=\"width:" . ($width) . "px;\" href=\"" . $value[1] . "\">" . $value[0] . "</a></li>";
  }

  ?>
</ul>

Answer 3

Interesting that no-one mentions letter-spacing.

It is possible to add letter spacing to the normal font and remove it for the bold version.

Getting it right is not always possible and depends a lot on the font and the font-size. But with more browsers starting to accept subpixel values for letter-spacing it starts to be more practical.

Example:

.nav-link.active {
    font-weight: bold;

    /* Adjust for font-weight bold so that the text will still align */
    letter-spacing: -1px;
}

Answer 4

I think there is no CSS based solution for this, unless you can add a width, maybe a different width to each li item. You already have a change in bg color on hover and selected states, I suggest you drop the font-weight change. Visually it's not a big change, and in terms of usability you already have the bg color change that I think is enough.

Answer 5

The way I handle this is to use JQuery to 'fix' the width so that it does not change on hover even though the bold does change. This basically takes the css width answer here and automates the process.

  (function($) {
    $(function() {
      $('#menu > li').each(function(){
        wid = $(this).width();
        $(this).css('width', wid+'px');
      });
    });
  })(jQuery);

Answer 6

Other than the width route here are two other possibilities, it's down to personal preference as to whether you think they are suitable or not. Both these ideas work on the same principal, that you use a separate element to show the bold state, and this element either doesn't (idea one) or does (idea two) affect the UI with it's dimensions.

http://jsfiddle.net/3Jyge/2/

Idea one

Use pseudo selectors. This method relies on the browser supporting quite recent advances i.e. :before and content: attr() so probably isn't reliable just yet.

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility

css:

ul {
  list-style: none;
}
ul li {
  float: left;
}
ul li:hover a {
  visibility: hidden;
}
ul li:hover:before {
  position: absolute;
  font-weight: bold;
  content: attr('data-text');
}

markup:

<ul>
  <li data-text="one"><a href="#">one</a></li>
  <li data-text="two"><a href="#">two</a></li>
  <li data-text="three"><a href="#">three</a></li>
</ul>

Idea two

The other is a bit more straight-forward, although it relies on preping your markup first — and those who use screen readers may understandably dislike your site; unless you can find a nice way to hide the duplicate text from them.

markup:

<ul>
  <li><a href="#">
    <span class="a">one</span>
    <span class="b">one</span>
  </a></li>
  <li><a href="#">
    <span class="a">two</span>
    <span class="b">two</span>
  </a></li>
  <li><a href="#">
    <span class="a">three</span>
    <span class="b">three</span>
  </a></li>
</ul>

css:

ul {
  margin: 0; padding: 0;
  list-style: none;
}
ul li {
  float: left;
}
ul li a span.b {
  visibility: hidden;
  font-weight: bold;
}
ul li a span.a {
  position: absolute;
}
ul li:hover a span.b {
  visibility: visible;
}
ul li:hover a span.a {
  visibility: hidden;
}

At the end of the day the better solutions would be:

1. Set a width, although I can understand not wanting to do this.
2. Use JavaScript to calculate dimensions.
3. Choose a different highlight, one that doesn't alter the dimensions of the text.