Skip to content

Instantly share code, notes, and snippets.

@thonerohh
Created April 24, 2024 17:59
Show Gist options
  • Save thonerohh/040705d29eee7431e2ea2cfdc3b24eac to your computer and use it in GitHub Desktop.
Save thonerohh/040705d29eee7431e2ea2cfdc3b24eac to your computer and use it in GitHub Desktop.
Heading Resizing for some clarity
function resizeHeading(elementId) {
const textLength = element.innerText.length;
// get font size of element
let fontSize = window.getComputedStyle(element).fontSize;
// remove 'px' from string
fontSize = parseInt(fontSize.slice(0, -2));
// set up max symbols
const minSymbols = 1;
const maxSymbols = 421;
const median = (maxSymbols - minSymbols) / 2;
median = Math.floor(median); // 420 / 2 = 210
const maxFontSize = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--size3').slice(0, -2)); // 50
const minFontSize = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--size0').slice(0, -2)); // 8
let fontMedian = (maxFontSize - minFontSize) / 2; // 42 / 2 = 21
// define fontSize
let refontedSize = (median - textLength) * fontMedian / median + fontMedian;
if(mediumSymbols[1] < textLength && textLength > mediumSymbols[0]){
return;
} else {
fontSize = refontedSize;
}
// Apply the calculated font size to the element
element.style.fontSize = `${fontSize}px`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment