Non-bold text to take the space of bold text

Question

I am using CSS to style some radio buttons as tabs. I would like the "selected" tab's font-weight to be bold. Of course, this causes the size of the tab to increase, as the text takes up more space. I would like to find a way to have the text go from bold to non-bold without the "tab" changing size

Tab 1 selected

Tab 2 selected

Short of setting a fixed width, is there a crafty and clean way of making the text take up the size of bold text without it actually being bold?

The only method I can think of would be to have the bold text exist (causing the text to exist twice in the HTML), but with visibility: hidden.

Markup:

<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>

Relevant CSS as it is now:

.tab {
  display: block;
  font-size: 1.2em;
  height: 2em;
  line-height: 2em;
  margin-right: 1px;
  padding: 0 2em;
  position: relative;
  text-align: center;
  float: left;
}
.tab.active,
.tab:hover {
  font-weight: bold;
}
.tab input[type=radio] {
  display: none;
}

@zackt147, Interesting idea. Not quite what I'm looking for (makes the text less-readable with shadow set to the same color), but we may end up using it (with a real shadow color) instead of bolding. Thanks for the suggestion. — Brad, Feb 15 '13 at 16:58

score 2 · Accepted Answer · answered Feb 15 '13 at 17:21

2

There is also a solution using ghost elements. Simply use the same text with a bold style, which lies underneath the visible ares:

HTML:

<div class="link">
    <div class="text">Sample Text</div>
    <div class="ghost">Sample Text</div>
</div>

CSS:

.link {
    border: 1px #000 solid;
    display: inline-block;
}

.link .ghost {
    color: transparent;
    font-weight: bold;
}

.link .text {
    position: absolute;
    text-align: center;
}

.link .text:hover {
    font-weight: bold;
}

Here is a jsFiddle to check it out!

The only caveat is that the visible text is not centered within the outer div. Maybe someone can pick up from here?!

answered Feb 15 '13 at 17:21

Amberlamps

39,180
5
43
53

Thanks for the suggestion. This is effectively the same as I had proposed where the text visibility would be set to hidden. While this will work, I was hoping to find a solution that didn't require doubling the text in the markup. I will keep this idea in mind though. – Brad Feb 15 '13 at 19:14
A better solution would be to use CSS's `content` property paired with a pseudo element like in the linked duplicate – Zach Saucier Mar 04 '16 at 17:47
http://jsfiddle.net/adqqC/8/ -- Improved the above fiddle, Got Text Centered, by removing the position: absolute, and instead using height 0 for ghost, make sure padding top and bottom for ghost also 0. – Nick Timmer Dec 19 '17 at 22:17

score 1 · Answer 2 · answered Feb 15 '13 at 17:03

1

What about css letter-spacing? The result will be near the desired one:

.tab
{
    letter-spacing: 1.5px;
}

.tab.active, .tab:hover 
{
    letter-spacing: normal;
}

jsfiddle example

answered Feb 15 '13 at 17:03

Morpheus

8,829
13
51
77

Good idea. This will be a good option if there isn't a more direct method. – Brad Feb 15 '13 at 17:14

Non-bold text to take the space of bold text

Markup:

Relevant CSS as it is now:

2 Answers2