Často se setkáme s problémem, kdy obsah na stránce „poskakuje“ při klikání na tlačítka, která mění svůj text nebo styl. Typickým příkladem je třeba tlačítko „Přidat do košíku“, které se po kliknutí změní na „Přidáno". Nebo tlačítko pro kopírování textu do schránky („Zkopírovat“ na „Zkopírováno“).

Když se změní text na tlačítku, změní se i jeho šířka. To často způsobí, že se posune celý layout stránky, zvlášť když je vedle tlačítka další obsah.

Podobný problém nastává i při hoveru, kdy se změní řez písma — například z normálního na tučné. Tučné písmo má větší šířku než normální, což způsobuje poskakování obsahu při najetí myší.

Fixní šířka tlačítka

Nejjednodušší řešení je nastavit tlačítku pevnou šířku:

.button {
  width: 200px;
  min-width: 200px;
}

Má to jednoduchou implementaci a předvídatelné chování. Nevýhoda je plýtvání místem nebo naopak zbytečně velká tlačítka.

Na druhou stranu má fixní šířka často opodstatnění. Rozměr tlačítka je navržen podle jeho důležitosti, takže nemusí dávat smysl, aby byl velký podle textu, který se zrovna zvolí.

Zvlášť u vícejazyčných aplikací to úplně nedává smysl, aby byla tlačítka významná podle toho, jak dlouhý text mají.

Ponechání všech variant textu

Pokročilejší řešení je mít všechny varianty textu v DOMu, aby zabíraly místo, a zobrazovat jen tu aktuální:

Počítat se změnou rozměrů

Řešením může být i počítat se změnou šířky. Pokud není vedle tlačítka něco, co by reagovalo na změnu šířky, nebo se třeba tlačítko absolutně naposicuje, není problém.

Tlačítka jen s ikonou a tooltipem

Elegantní řešení pro minimalisaci poskakování je použití jen ikonových tlačítek. Má to ale háček – srozumitelnost pro uživatele bude o dost menší. Uživatel nemusí ikonu pochopit a problém může být i při vyhledávání na stránce (ikona se špatně hledá interním vyhledáváním v prohlížeči).

Měření JavaScriptem

Před vyvoláním akce si lze změřit přirozenou šířku tlačítka a nastavit ji jako fixní. Tím se docílí toho, že výchozí velikost bude podle obsahu, ale při změně nic neposkočí.

Neměnit text tlačítka

Místo změny textu na tlačítku můžete použít skrývání a odkrývání dodatečného obsahu. Ať už nějakých bublin nebo toast zpráv.

Řešení problému s hoverem

Pro hover efekty s tučným písmem existuje několik řešení:

Použití pseudo-elementů

Nejefektivnější řešení je použít pseudo-elementy s tučným textem, které jsou skryté, ale zabírají místo, takže natáhnou tlačítko na tučnou variantu:

.button-hover-fixed {
  position: relative;
}

.button-hover-fixed::before {
  content: attr(data-text);
  font-weight: bold;
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
}

.button-hover-fixed:hover {
  font-weight: bold;
}

Použití text-shadow

Alternativní řešení je použít text-shadow pro simulaci tučného písma bez změny šířky:

.button-shadow {
  transition: text-shadow 0.2s;
}

.button-shadow:hover {
  text-shadow: 
    0.5px 0 0 currentColor,
    1px 0 0 currentColor;
}

Použití transform

Pro jemné efekty můžete použít transform místo změny font-weight.

Funguje to díky tomu, že transformace neovlivňují své okolí:

.button-transform {
  transition: transform 0.2s;
}

.button-transform:hover {
  transform: scale(1.05);
}

Závěr

Problém s poskakováním obsahu při změně textu na tlačítkách je častý, ale řešitelný. Klíčové je myslet na stabilitu layoutu už při návrhu komponent.

Nejlepší řešení závisí na konkrétním případě:

• Jednoduché případy: Fixní šířka tlačítka
• Složitější interakce: Ponechání všech variant textu v DOMu
• Hover efekty: Pseudo-elementy nebo text-shadow
• Alternativní přístupy: Toast zprávy, icon-only tlačítka

Stabilní neposkakující stránka je základ dobré uživatelské zkušenosti. I malé poskakování může narušit plynulost interakce a působit neprofesionálně.