[Proposal] Render bold text as stable width

I know this is not the web’s most important problem, yet it’s still something that annoys me greatly, so throwing the idea out here.

Problem description
When you have a horizontal navigation menu of which the items are of a variable width, when you change one of the link texts to be bold, this horizontally shifts the items coming after it. This horizontal shift looks cheap and unstable. The reason for the shift is bold text taking up more width, and as a result, the variable width parent element grows.

Current solutions
There’s several solutions/hacks currently in use by developers to work around this problem:

• Giving items a fixed width (the only non-hack yet design-wise not great and often not possible due to CMS or translations)

• Tinkering with negative letter-spacing for bold items (very unprecise technique that is highly dependent on the font and possibly even rendering alghoritms. It also changes the look of the text itself)

• Using a 1px text shadow (looks terrible, this is not the same as real bold rendering)

• Reserving space for bold using a pseudo element (highly dependent on layout and not possible when pseudo element is already in use for another purpose)

None of these solutions are very satisfactory, yet it is a pretty common problem.

Proposal
The proposal would be to have a way to change font-weight (perhaps even other font styling methods) in such a way that it will render as true bold (therefore the width of the text itself does grow), yet to not grow the size of the parent container, if that parent container width is dynamic.

a:hover {
   font-weight: bold !stable
}

Proposal
The proposal would be to have a way to change font-weight (perhaps even other font styling methods) in such a way that it will render as true bold (therefore the width of the text itself does grow), yet to not grow the size of the parent container, if that parent container width is dynamic.

So this could result in truncation of content, or a scrollbar in the menu…which is neither very accessible nor very acceptable.

If you are using JavaScript you can record the initial (formatted) width e.g. in an attribute and set that on hover/focus/active. But then you have to deal with overflow and potentially differnet linebreaking.

Or set the size based on a bold font (e.g. in a temporary element not inserted into the DOM, so text readers don’t find it) so you know there’s room.

I should have been more clear in the description of the use case. Typically, such horizontal menus have left and right padding on them that would allow the inner text to grow slightly without it overflowing. Even on a longish text (which is rare in a horizontal menu), rendering the text in bold at best adds 6 pixels to the width of the container. Those 6 pixels could have been used on the inside, given there’s plenty of padding. It’s very common to have 20px of padding on each side, so taking 3px from each side is not a problem.

It basically similar behavior to box-model: grow on the inside, not the outside.