Как сделать что бы блок с жирным текстом не расталкивал соседние блоки?

Question

[Павел Орловский]

Когда я перехожу в нужный раздел пункт меню выделяется жирным и тоглкает соседние пункты меню. Подскажите как можно это пофиксить.

Comments

[black1277]

можно padding справа и слева сделать разным, в зависимости от жирности текста и менять его вместе с изменением шрифта. Т.е. когда шрифт жирный - паддинг уменьшать, тогда размер блока будет оставаться тем же.

[Антон Литвиненко]

Для жирности использовать хак с текст-шадоу

Answer 1

[Вадим]

парочка более менее вариантов, что пришли сходу:
1. Использовать подходящий для этих целей шрифт: https://ux.pub/editorial/proportsionalnyie-shrifty...
2. Сделать хак на псевдоэлементах. По умолчанию текст показывается из элемента, а при наличии класса active устанавливается visibility: hidden, и поверх абсолютно спозиционированный текст в том же месте где и обычный текст из псевдоэлемента, но уже жирный. Чтобы не прописывать для каждого псевдоэлемента свой текст в css можно воспользоваться функцией attr()
3. Ну и вариант который есть всегда - сказать дизайнеру\заказчику что это не лучший вариант выделения для конкретно данного меню и предложить другой. Например, подчёркивание, а не выделение жирным.
4. Сделать жирность через text-shadow

Answer 2

[Aspirant555]

Никак, у вас динамический размер шрифта, который увеличивается, когда становится толще. Можно либо фиксированный размер блока задать, либо заменить эффект толщины на смену цвета или тени.

Comments

[Вадим]

Ну вообще то есть ещё вариант как ничего не фиксировать и не менять тип выделения. Только шрифт нужен правильный: https://ux.pub/editorial/proportsionalnyie-shrifty...