调整文本大小的纯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'; 
    } 
}