Befehl zum Auslesen/Anzeigen von Zeichenbreite ?! Stringbreite ?

bsgVeritas · 19. Aug. 2015

Grüß Gott liebe Communtiy,

ich suche ein Befehl in JavaScript der mir die Breite meiner verwendeten Zeichen für die jeweilige Schriftart anzeigt bzw. ausliest um so die länge meines Strings zu ermitteln.

Für die Zeichenhöhe erreiche ich dies mit:

Hier wird die Zeichenhöhe ausgelesen: getAttribute('font-size') getAttribut

Folgendes als Beispiel:

HTML:

function Animate(objid,breite) {
                  if (svgdoc != null) {
                    var animateobj = svgdoc.getElementById(objid); // .getAttribute('x');
                    if (animateobj != null) {
             [B]var len = animateobj.firstChild.length * animateobj.getAttribute('font-size') / 2[/B];
                       if ( animateobj.getAttribute('x') < -len) {
                        animateobj.setAttribute('x',breite);
                      }
                      else {
                        animateobj.setAttribute('x', animateobj.getAttribute('x') - 1)

So weiß ich wie hoch mein Element/Grafik für die jeweilig verwendet Schriftart wird.
Im Endeffekt geht es um die verwendung von SVG-Grafik im IE11.

Bin auf den Befehl "font-stretch" gestoßen. Damit lässt sich leider nur die laufweite der Schrift verändern und mir aber leider keine absolute Größe angzeigen/geben.

Es ist kein wirklich dramatisches Problem aber wenn einer eine Idee hätte oder wüsste ob dies überhaupt nicht möglich ist wäre ich dankbar!

Gruß Veritas

kkapsner · 24. Aug. 2015

font-size gibt dir nicht die exakte Höhe der Schrift. Die kann nämlich von Schriftart zu Schriftart variieren.

Da du auch die Breite haben willst, ist das Beste, wenn du eine entsprechende Node erstellst und direkt ausliest, wie breit sie ist:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<span style="font-family: Arial; font-size: 20px">Mq</span>
<span style="font-family: Arial Black; font-size: 20px">Mq</span>
<script>
Array.prototype.slice.call(document.getElementsByTagName("span")).forEach(function(span){
	var node = document.createElement("span");
	node.innerHTML = "(" + span.offsetWidth + "px x " + span.offsetHeight + "px)";
	span.parentNode.insertBefore(node, span.nextSibling);
});
</script>
</body>
</html>

Befehl zum Auslesen/Anzeigen von Zeichenbreite ?! Stringbreite ?

bsgVeritas

New member

kkapsner

Super Moderator