Länge eines Strings in Pixel mit Javascript ermitteln

CSS bietet ein breites Spektrum um Zeichenketten in Html Elementen zu positionieren. „text-align“, „direction“ und „text-orientation“ sind nur einige Möglichkeiten. Doch unter Umständen kann es nützlich sein, eine Zeichenkette auch mit „margin-left“ zu positionieren. In dem Fall kann es von Vorteil sein die Länge der Zeichenkette in Pixeln zu kennen. Nach einigem googlen sind mir zwei Möglichkeiten über den Weg gelaufen.

Variante 1:

function stringLengthInPx (str,fontFamily,fontSize){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.font = fontSize+" "+fontFamily;        
    return  parseInt(ctx.measureText(str).width);
}

stringLengthInPx("Das ist ein Teststring","arial","16px"); 

Hier wird eine Leinwand erzeugt. Auf die Leinwand wird nun die Zeichenkette in der entsprechenden Schriftart und Schriftartgröße geschrieben und mit der leinwandeigenen Funktion „measureText“ gemessen. „parseInt“ ist nur da, damit wir eine runde Zahl bekommen. Diese Variante finde ich persönlich am besten, da Sie simpel und einfach ist.

Auf stackoverflow findet sich jedoch noch eine andere Variante, die jedoch einige Nachteile hat.

Variante 2:

function stringLengthInPx(str, fontFamily, fontSize){
    var spanEl = document.createElement('span');
    //spanEl.style.visibility = 'hidden';
    document.body.appendChild(spanEl);
    
    spanEl.style.fontSize = fontSize;
    spanEl.style.fontFamily = fontFamily;
    spanEl.innerText = str;
    return spanEl.offsetWidth;
}

stringLengthInPx(„Das ist ein Teststring“,“arial“,“16px“); liefert uns auch hier 147.

Hier wird ein Spanelement erzeugt. Der Text hineingeschrieben. Schriftart und Größe gesetzt und dann mit „offsetWidth“ gemessen. Fast genau wie oben, jedoch gibt es einen entscheidenden Nachteil. Das Spanelement muss vorher gezeichnet werden. Dafür wird es an den Body gehängt. Da das Spanelement gezeichnet wird funktioniert zwar „spanEl.style.visibility = ‚hidden'“, jedoch nicht „spanEl.style.display = ’none'“. Unter Umständen kann es dadurch zu Verschiebungen kommen da visibility zwar das Element nicht anzeigt, jedoch den Platz reserviert. Außerdem sollte das Element zum Schluss wieder aufgeräumt werden. Das könnte mit „document.body.removeChild(document.body.lastElementChild);“ passieren. Falls jedoch mehrere Scripte parallel laufen, könnte dies wieder eine subtile Fehlerquelle werden. Persönlich denke ich, eine einfache Funktion, die nur die Länge eines Zeichenkette in Pixel bestimmen soll, muss nicht mit dem DOM rumpfuschen.