Created
August 8, 2023 14:57
-
-
Save rhcarlosweb/39e4ff8a2f9fddf43b6f7619880243f4 to your computer and use it in GitHub Desktop.
Fit Text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Code that will fit the text to the card of project-grid-item if is only one word vanillajs | |
*/ | |
const fitText = () => { | |
const projectGridItems = document.querySelectorAll('.project-grid-item'); | |
projectGridItems.forEach((item) => { | |
const text = item.querySelector('.title'); | |
// get length of words | |
const textLength = text.innerText.split(' ').length; | |
// verify if the width of the text is greater than the width of the element | |
if (text.offsetWidth > item.offsetWidth) { | |
console.log('is greater'); | |
// get width of the card | |
const widthCard = item.offsetWidth; | |
const spacing = -10; // Set the spacing between text and card sides | |
let fontSize = 16; // Set initial font size (you can adjust this as needed) | |
// Calculate font size for single-word text | |
if (textLength === 1) { | |
// Binary search to find the optimal font size for single-word text | |
let minFontSize = 0; | |
let maxFontSize = fontSize; | |
let finalFontSize = null; | |
while (minFontSize <= maxFontSize) { | |
fontSize = (minFontSize + maxFontSize) / 2; | |
text.style.fontSize = fontSize + 'rem'; | |
if (text.offsetWidth - spacing <= widthCard) { | |
finalFontSize = fontSize; | |
minFontSize = fontSize + 0.1; // You can adjust the step size (0.1rem) as needed | |
} else { | |
maxFontSize = fontSize - 0.1; // You can adjust the step size (0.1rem) as needed | |
} | |
} | |
console.log('Final Single-Word Font Size:', finalFontSize, 'rem'); | |
} else { | |
// For multi-word text, reduce font size until it matches the card width with the spacing | |
while (text.offsetWidth - spacing > item.offsetWidth && fontSize > 0) { | |
fontSize -= 0.1; // You can adjust the step size (0.1rem) as needed | |
text.style.fontSize = fontSize + 'rem'; | |
} | |
console.log('Final Multi-Word Font Size:', fontSize, 'rem'); | |
} | |
} else { | |
console.log('is not greater'); | |
} | |
console.log(textLength); | |
}); | |
} | |
const resizeTextOnWindowResize = () => { | |
const projectGridItems = document.querySelectorAll('.project-grid-item'); | |
projectGridItems.forEach((item) => { | |
const text = item.querySelector('.title'); | |
text.style.fontSize = ''; // Reset the font size to let it adjust automatically based on content | |
fitText(); // Call the fitText function to resize the font accordingly | |
}); | |
} | |
// Call the function on DOM load and on window resize | |
document.addEventListener('DOMContentLoaded', () => { | |
fitText(); | |
window.addEventListener('resize', resizeTextOnWindowResize); | |
}); | |
export default fitText; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment