Pixellänge eines Strings bestimmen?
Stefan Welscher
- javascript
0 Cheatah0 Thomas Meinike0 Cheatah
0 LanX!0 LanX!
Hallo,
gibt es eine Möglichkeit zu bestimmen, wie viele Pixel ein String hat?
Ich will damit einen Zeilenumbruch in einer Tabelle erzwingen um eine dynamische Zellenverbreiterung zu verhindern, wenn einzelne Wöter zu lang werden.
Danke!
Hi,
gibt es eine Möglichkeit zu bestimmen, wie viele Pixel ein String hat?
nein, schon alleine wegen einer Vielzahl von Faktoren, die in einem String nicht repräsentiert sind. Du kannst ggf. die Breite eines Elementes ermitteln, in welchem sich der betreffende Text befindet; das Stichwort lautet computedStyle.
Ich will damit einen Zeilenumbruch in einer Tabelle erzwingen um eine dynamische Zellenverbreiterung zu verhindern, wenn einzelne Wöter zu lang werden.
Beschäftige Dich mit der overflow-Eigenschaft.
Cheatah
Hallo,
gibt es eine Möglichkeit zu bestimmen, wie viele Pixel ein String hat?
nein, schon alleine wegen einer Vielzahl von Faktoren, die in einem String nicht repräsentiert sind.
Dass es nicht prinzipiell unmoeglich ist, zeigen die SVG-DOM-Methoden getComputedTextLength() bzw. getSubStringLength(), die jeweils auf Textobjekte anwendbar sind und den Job mit hoher Praezision erledigen.
MfG, Thomas
Hi,
gibt es eine Möglichkeit zu bestimmen, wie viele Pixel ein String hat?
nein, schon alleine wegen einer Vielzahl von Faktoren, die in einem String nicht repräsentiert sind.
Dass es nicht prinzipiell unmoeglich ist, zeigen die SVG-DOM-Methoden [...]
dass es nicht prinzipiell unmöglich ist, zeigt mein vorheriger Lösungsvorschlag. Dort wird nämlich genau das erzeugt, was bei SVG bereits vorliegt.
Cheatah
Hallo,
dass es nicht prinzipiell unmöglich ist, zeigt mein vorheriger Lösungsvorschlag. Dort wird nämlich genau das erzeugt, was bei SVG bereits vorliegt.
Naja, eine Antwort "nein, schon alleine wegen ..." klingt fast wie prinzipiell unmoeglich ;-) und den Workaround hatte ich durchaus verstanden, aber so richtig doll portabel ist das dann auch nicht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 12/04</title>
<script language="JavaScript" type="text/javascript">
<!--
function Test()
{
if(document.defaultView)
{
var len1=document.defaultView.getComputedStyle(document.getElementById("test1"),null).getPropertyValue("width");
var len2=document.defaultView.getComputedStyle(document.getElementById("test2"),null).getPropertyValue("width");
alert(len1+"\n"+len2); // Firefox 1.0: 1152px bzw. auto | Opera 7.50: 1146 px bzw. 118px
}
}
//-->
</script>
</head>
<body style="margin: 0; padding: 0" onload="Test()">
<p id="test1">Das ist ein Testtext.</p>
<p id="test2" style="display: inline">Das ist ein Testtext.</p>
</body>
</html>
MfG, Thomas
Hi,
Naja, eine Antwort "nein, schon alleine wegen ..." klingt fast wie prinzipiell unmoeglich ;-) und den Workaround hatte ich durchaus verstanden, aber so richtig doll portabel ist das dann auch nicht:
Du vergisst dabei, dass SVG ein _Grafikformat_ ist und es hier um graphische Eigenschaften geht. JavaScript, HTML und CSS sind weit davon entfernt, etwas mit einem Grafikformat zu tun zu haben. Du vergleichst also Äpfel mit Pferden.
Cheatah
Hallo,
Du vergisst dabei, dass SVG ein _Grafikformat_ ist und es hier um graphische Eigenschaften geht. JavaScript, HTML und CSS sind weit davon entfernt, etwas mit einem Grafikformat zu tun zu haben. Du vergleichst also Äpfel mit Pferden.
Rendert denn ein Browser einen Text prinzipiell so anders wie eine SVG-Engine oder ein PDF-Reader? Der Text bleibt ja auch im SVG-Kontext als solcher erhalten (kann markiert und heraus kopiert werden).
Insofern sehe ich da technisch keinen grundlegenden Unterschied, sodass es durchaus eine Methode getComputedTextLength() auch im HTML/JS-Umfeld geben könnte (an die jeweilige Genauigkeit des Ausgaberasters angepasst).
Zudem findet CSS auch bei SVG Verwendung.
MfG, Thomas
Hi,
Rendert denn ein Browser einen Text prinzipiell so anders wie eine SVG-Engine oder ein PDF-Reader?
nein, aber die Rendering-Engine des Browsers steht JavaScript, HTML und CSS nicht zur Verfügung.
Der Text bleibt ja auch im SVG-Kontext als solcher erhalten (kann markiert und heraus kopiert werden).
SVG hat m.W. keine Benutzereinstellungen, Fenstergrößen, Interaktionen, ... Im Browser existieren - um mich zu wiederholen - zu viele Faktoren, die a) nicht vorhersehbar oder nachprüfbar sind und b) in SVG und PDF keine Rolle spielen. Die beiden letztgenannten Formate können das Ergebnis absehen, in einem Browser muss man es erst erzeugen.
Insofern sehe ich da technisch keinen grundlegenden Unterschied,
Ich hoffe, der ist Dir jetzt klarer :-)
Cheatah
Hallo,
SVG hat m.W. keine Benutzereinstellungen, Fenstergrößen, Interaktionen, ... Im Browser existieren - um mich zu wiederholen - zu viele Faktoren, die a) nicht vorhersehbar oder nachprüfbar sind und b) in SVG und PDF keine Rolle spielen. Die beiden letztgenannten Formate können das Ergebnis absehen, in einem Browser muss man es erst erzeugen.
Bei PDF sehe ich das auch so, denn dort ist das Dokument ja quasi "vorgerendert", was die Seitenaufteilung, Font-Metrik, usw. betrifft.
Ein SVG-Viewer erzeugt den (messbaren) grafischen Output aber erst beim Verarbeiten der XML-Struktur und die Abfrage der Textinformationen kann somit auch erst nach vollstaendigem Rendern (onload) erfolgen. Hier sehe ich einige Parallelen zu einem HTML-Browser (wobei mir da auch Unterschiede bewusst sind ;-).
Letztlich geht es mir nicht darum, ob verschiedene Systeme voellig identische Werte liefern, sondern um den Zugriff auf die Textbreite, um z. B. einen Tooltip so bauen zu koennen, dass das Umgebungsrechteck immer optimal an den variierenden Text angepasst ist.
MfG, Thomas
Hi,
gibt es eine Möglichkeit zu bestimmen, wie viele Pixel ein String hat?
ja!
Ich will damit einen Zeilenumbruch in einer Tabelle erzwingen um eine dynamische Zellenverbreiterung zu verhindern, wenn einzelne Wöter zu lang werden.
bestimme die Position des ersten Buchstabens und letzten Buchstabens (respektive eins davor/dahinter)
schon NN4 kannst du die http://de.selfhtml.org/javascript/objekte/anchors.htm#x @title="Postion eines anchors"] abfragen, für neuere Browser entsprechend DOM nutzen, also sowas einbauen
<a name='links'>s</a>trin<a name='rechts'>g</a>
sollte reichen.
wenn du ein lauffähiges beispiel hast wäre nett wenn du den Code hier postest...
bye
rolf
Hi again
... allerdings deine eigentliches Problem solltest du lieber mit CSS zu lösen versuchen.
Bye
rolf