Fit Text

fittext.js

/**
 * 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;