纯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

<强>更新
没有测试过，但这是我正在考虑的算法：

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';
    }
}