텍스트 크기를 조정하는 순수 자바 스크립트

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

보다 일관된 결과를 얻으려면 더 훌륭한 해결책이 있습니까? 당신은 실제로 오른쪽 크기가 될 때까지 텍스트의 font-size을 수정하는 시행 착오 알고리즘을 만들 수 사전

Answer 1

나는 텍스트의 글꼴 크기와 길이와 의존하여 근사에서 볼 수 있듯이 :

내가 생각 된 알고리즘

나는 형태로 이것에 대한 보간을했다 :

당신은 매개 변수를 사용하여이 결과를 볼 수 있습니다

지금 당신이 대체 할 수있는 모든 if 및 else if 폰트 크기 h 계산 및 커플 min(h, max_font_size) 및에 대한 하나의 공식으로 글꼴의 최소 및 최대 크기 설정에 대해서는 0입니다.

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

에

감사합니다. 의 여기

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