php - 在 PHP 中创建字符组合效果

Question

我正在尝试找出如何创建存在于 PDF 中的“字符组合”效果，但在 PHP 中针对标准 HTML 输入类型 =“文本字段”进行创建。这是文本分布在文本框中的位置基于文本框的最大长度和文本框的宽度。

PDF定义:

字符组合 将用户输入的文本均匀分布在文本字段的宽度上。

假设我有 4 个数字(数字的数量可以是动态的，所以 2、4、8、9、10、11 等)我想分布在以下输入字段中

<input type="text" style="width: 150px; height: 30px;" />

我该怎么做呢？我敢肯定这背后有一些数学原理，但我不知道数学原理是什么。希望以前有人不得不这样做。请不要使用外部库或任何东西。

编辑

虽然 RamRaider 版本确实使用 javascript/CSS 工作，但我希望在 PHP 中获得它。

目标是让它像

<input type="text" style="width: 150px; height: 30px;" value="<? echo $answer; ?>"/>

所以一个示例输出就像

<input type="text" style="width: 150px; height: 30px;" value="1 2 3 4"/>

我知道我必须在每个字符之间手动添加空格，这是数学上非常困惑的地方。

Answer 1

您可以使用 css 的 letter-spacing 属性 - 如果您要结合 javascript 这样做，您可以使它在字段中动态显示不同数量的数字

var div=document.getElementById('kern');
    var s=150;/* size of text field */
    var l=div.value.length;/* number of characters */
    div.style.letterSpacing=Math.ceil( s / l )+'px';

#kern{
        letter-spacing:calc( 150px / 4 );
    }

<input id="kern" type="text" style="width: 150px; height: 30px;" value="1234" />

不想立即承认失败，想到了使用 canvas 及其相关方法的想法并导致了以下结果 - 我认为它似乎工作得很好。

    var txt=document.getElementById('kern');
    var canvas=document.createElement('canvas');
    var ctxt=canvas.getContext('2d');
        ctxt.font='12px arial';


    var s=parseInt( window.getComputedStyle( txt, null ).getPropertyValue( 'width' ) );

    txt.onchange=function(){
        ctxt.clearRect( 0, 0, canvas.width, canvas.height );
        var w=ctxt.measureText( this.value ).width;

        space=Math.abs( ( s - w ) / this.value.length );

        if( w < s ) this.style.letterSpacing=space+'px';
        else {
            alert('The supplied text is naturally wider than the text input field can support');
        }
    }.bind( txt );

#kern{
        font-size:12px;
        font-family:arial;
        letter-spacing:calc( 150px / 4 );
    }

<input id="kern" type="text" style="width:150px; height:30px;" />