1

固定サイズの 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);
        }
       }
   }

より一貫した結果を得るためのより洗練されたソリューションはありますか?

前もって感謝します

4

2 に答える 2

2

フォントサイズとテキストの長さの依存関係の概算でわかるように、次のようになります。 ここに画像の説明を入力してください

これを次の形式で補間しました。 ここに画像の説明を入力してください

そして、あなたはパラメータでこれの結果を見ることができます：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

これで、フォントサイズの計算と結合、およびフォントの最小サイズと最大サイズの設定のために、 すべてifの数式を1つの数式に置き換えることができます。else ifhmin(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);
}
于 2012-08-16T19:52:13.120 に答える
1

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';
    }
}
于 2012-08-15T17:26:09.407 に答える