純Javascript算法調整文本大小

Question

我有一個固定大小的html div和一個用於輸入文本的附加HTML輸入框。 然后，此文本顯示在div中。

我希望文本始終居中，並始終是字符串中字符數可能的最大尺寸。

我已經提出了一個工作原型，但它不能很好地工作。 文本的大小並不總是正確的。

function bindText(readElement, writeElement, extra){   
    //the text from the input form triggered by onkeyup event
    var textStr = document.getElementById(readElement).value;

    //the div to write the text to 
    var element = document.getElementById(writeElement);

    //the major part of the function that I have just brute forced to try and work out
    if(textStr.length > 0){                        

        //check the length of the string
        if(textStr.length > 8 && textStr.length < 12){
             //set a the font size accordingly
             element.style.fontSize = 150;
        }

        //same again    
        if(textStr.length >= 12 && textStr.length < 16){
            element.style.fontSize = 120;
        }

        if(textStr.length >= 16 && textStr.length < 20){
            element.style.fontSize = 100;
        }

        if(textStr.length >= 20 && textStr.length < 25){
            element.style.fontSize = 80;
        }

        if(textStr.length >= 25 && textStr.length < 32){
            element.style.fontSize = 55;
        }

        if(textStr.length >= 32 && textStr.length < 40){
            element.style.fontSize = 50;
        }

        if(textStr.length >= 40 && textStr.length < 50){
            element.style.fontSize = 45;
        }

        if(textStr.length >= 76){
            element = textStr.splice(0, 75);
        }
       }
   }

是否有更優雅的解決方案可以獲得更一致的結果。

提前致謝

Answer 1

正如我在您對字體大小和文本長度之間的依賴關系的近似中所看到的：

我在表格中進行了插值：

你可以用參數看到這個結果：

現在，您可以將所有if和else if替換為一個公式，用於字體大小h計算，並將min(h, max_font_size)和max(min_font_size, h)設置字體最小和最大大小。

function bindText(readElement, writeElement, extra){   
    var textStr = document.getElementById(readElement).value;
    var element = document.getElementById(writeElement);
    var x, h;

    x = textStr.length;
    h = Math.exp(-0.1 * x + 6) + 38;
    h = Math.min(h, 120);
    h = Math.max(h, 45);

    element = textStr.splice(0, 75);// as you wish and it is not my business why %)
    element.style.fontSize = h;

    return (0);
}

Answer 2

實際上，您可以構建一個試錯法算法來修改文本的font-size ，直到它的大小合適為止。
我現在沒有時間寫它，所以這里有一個類似偽代碼的東西：

test_element = clone(element);
test_element.innerText = text;
test_element.style.left = '-9999px'; // so that it would be hidden from the user
for(var i = maxFontSize; i > minFontSize; i--)
    {
        test_element.style.fontSize = i + 'px';
        if(test_element.width <= element.width && test_element.height <= element.height)
            break;
    }
 // and the fontSize is stored in the `i` var

UPDATE
沒有測試過，但這是我想到的算法：

function getFontSize(text, width){
    var minFontSize = 1,
        maxFontSize = 200,
        testElement = document.createElement('span'),
        fontSize = null;

    testElement.style.position = 'absolute';
    testElement.style.left = '-999999px';
    testElement.style.top = '-999999px';
    document.body.appendChild(testElement);

    testElement.innerText = text;

    for(var i = minFontSize; i <= maxFontSize; i++)
        {
            testElement.style.fontSize = i + 'px';
            if(testElement.offsetWidth > width)
                {
                    fontSize = Math.max(minFontSize, i-1);
                    break;
                }
        }

    if(fontSize == null)
        fontSize = i;

    document.removeChild(testElement);

    return fontSize + 'px';
}

function bindText(readElement, writeElement){
    //the text from the input form triggered by onkeyup event
    var textStr = document.getElementById(readElement).value;

    //the div to write the text to 
    var element = document.getElementById(writeElement);

    //the major part of the function that I have just brute forced to try and work out
    if(textStr.length > 0){
        element.style.fontSize = getFontSize(textStr, element.outerOffset);
        // aditional, you can set the text-align property to center
        // element.style.textAlign = 'center';
    }
}