Kalkulačka CSS clamp pre responzívny text

Výpočet CSS clamp pre responzívny text

Kalkulačka CSS clamp pre responzívny text je užitočná pri tvorbe webu, keď chcete, aby sa veľkosť písma plynulo prispôsobovala šírke obrazovky. Hodí sa najmä pre nadpisy, väčšie texty, hero sekcie, titulky kariet alebo iné typografické prvky, ktoré majú byť menšie na mobile a väčšie na desktope bez ručného nastavovania viacerých breakpointov.

Výpočet pracuje s minimálnou veľkosťou textu v px, maximálnou veľkosťou textu v px, minimálnou šírkou obrazovky v px, maximálnou šírkou obrazovky v px a základom pre rem v px. Z týchto hodnôt kalkulačka vytvorí hotový CSS zápis vo forme font-size: clamp(minimum, plynulá hodnota, maximum);. Minimálna a maximálna veľkosť sa zároveň prepočítajú na rem podľa zadaného základu.

Hlavný výsledok je samotná hodnota clamp(), ktorú vložíte za vlastnosť font-size. Rozpis ukazuje koeficient vw, konštantu v rem a modelovú veľkosť v strede rozsahu šírok. Dolná a horná hranica sú v rem podľa vami zadanej koreňovej veľkosti; mimo rozsahu plynulú hodnotu obmedzia.

Na výsledok má najväčší vplyv rozdiel medzi minimálnou a maximálnou veľkosťou písma a rozsah obrazoviek, medzi ktorými sa má text plynulo meniť. Ak je rozdiel medzi veľkosťami malý, zmena bude veľmi jemná. Ak je maximálna veľkosť príliš vysoká, nadpis môže na veľkých obrazovkách zaberať veľa miesta. Rovnako je dôležitý základ pre rem, pretože podľa neho sa prepočítavajú hodnoty vo výslednom zápise.

Pri veľkostiach 20 až 32 px, šírkach okna 360 až 1 320 px a koreni 16 px/rem je presný modelový zápis font-size: clamp(1.25rem, calc(0.96875rem + 1.25vw), 2rem);. Pri 360 px je plynulá hodnota 20 px, pri 1 320 px je 32 px. Konštanta je 0,96875 rem, nie 1 rem.

CSS clamp je vhodný hlavne pre responzívnu typografiu, kde má text prirodzene reagovať na šírku obrazovky. Výsledok je dobré skontrolovať na mobile aj desktope, najmä pri dlhých nadpisoch, veľkých fontoch alebo úzkych kontajneroch, aby text nepretekal a zostal dobre čitateľný.

Overenie stredného bodu a zmeny koreňovej veľkosti

V strede rozsahu, pri okne 840 px, je 1,25 vw = 10,5 px a 0,96875 rem pri koreni 16 px = 15,5 px. Spolu je 26 px, presne medzi 20 a 32. Ak používateľ zmení koreňovú veľkosť, zmenia sa rem časti a pôvodné pixelové koncové body už nemusia platiť. Pri nasadení overte zväčšenie textu, dlhé nadpisy a malé okná; úspešný matematický prepočet sám nepotvrdzuje čitateľnosť.

Vstupy a jednotky v tomto výpočte

• Dolná veľkosť textu (px)
• Horná veľkosť textu (px)
• Dolná šírka okna (px)
• Horná šírka okna (px)
• Predpokladaná koreňová veľkosť (px/rem)

Ako sa výsledok prepočíta

Smernica = rozdiel veľkostí / rozdiel šírok. Koeficient vw = smernica × 100; konštanta rem = (dolná veľkosť − smernica × dolná šírka) / px na rem.

Na nadväzujúci výpočet môžete použiť Kalkulačka line-height.