nicht angemeldet
textlänge ermitteln
Hallo zusammen!
ich möchte ein menü generieren, das x-beliebige menüpunkte enthält.
Ein solcher menüpunkt könnte z.B. sein:
"Instandsetzung von Waschmaschinen"
jetzt möchte ich aber das menü nicht der textlänge anpassen, sondern den text der menübreite - im endeffekt möchte ich z.b. folgendes aufgrund der menübreite erreichen:
"Instandsetzung von Wasc..."
Wie kann ich nun die pixelgenaue textlänge ermitteln, wenn der schrifttyp nicht courier ist? (und auch nicht courier sein soll!)
mögliche sprachen für eine lösung wären:
html, dhtml, dtml, javascript, vbscript, phyton, perl, css (vielleicht auch noch php oder cgi)
vielen dank im vorraus
mfg
Jens
-
Hallo Jens,
mit folgendem Code müsste es geben:
<div id="text" style="width:0; height:0; visibility: hidden">
Text
</div>
<script>
if(navigator.userAgent.indexOf('Netscape') > -1)
{
// fuer Netscape weiß ich es nicht so genau
}
else
{
laenge = document.getElementById("text").offsetWidth;
document.getElementById("text").style.display = "none";
alert(laenge);
}
</script>
Funktioniert auf jeden Fall mit dem IE!Marco
-
Hallo Marco,
Danke für die schnelle Antwort.
Ich hab deine Lösung mal ausprobiert, sie funktioniert sehr gut!Hier mal ein Beispiel - auch für andere zum Ausprobieren :)
(getestet mit IE6.0, NS6.0, NS7.02)http://www.zoov.de/test/textlaenge.html
<html>
<body>
<font style="font-size:9; position:relative; top:5; left:90">200 px</font><br>
<hr style="width:200" align=left>
<nobr id="TextContent">Dies ist ein ziemlich langer Testtext, der auf 200px Länge gekürzt werden soll.</nobr><br>
<br>
<input type=button value=kürzen onclick=buttonclick()></input>
<script>
function buttonclick()
{
if(getTextLength()>200)
{
while(getTextLength()>188) //maximal verfügbare breite - Textlänge von "..."
document.getElementById("TextContent").innerHTML=cut();
document.getElementById("TextContent").innerHTML=document.getElementById("TextContent").innerHTML+"...";
}
}function cut()
{
return document.getElementById("TextContent").innerHTML.substr(0, document.getElementById("TextContent").innerHTML.length - 1);
}function getTextLength()
{
return document.getElementById("TextContent").offsetWidth;
}
</script>
</body>
</html>
-
-
Hi Jens,
über so eine Funktion habe ich mir ausch schon Gedanken gemacht...
nun, so schwierig ist es garnicht einmal, es ist nur sehr viel Arbeit:
man schreibt einfach erstmal alle Zeichen in einer Schrift (die, die das menue sein soll, auch die richtige schriftgroeße), macht einen Screenshot und findet per Bildbearbeitungsprogramm raus, wieviel px jedes Zeichen verbraucht. Wenn man es allgemeiner machen will, kann man sich auch noch etwas mehr arbeit machen, ein HTML-Menue erstellen, in dem man Schriftgroeße und Art (als erweiterung: z.B. schriftdicke) wählen kann. Anschließend erzeugt das Script eine HTML-Datei, in der in z.B. divs mit padding:0px und margin:0px z.B. 10 mal ein Zeichen der gewünschten Schrift reingeschrieben wird, und das fuer jedes Zeichen. Dann ermittelt man in dieser Datei mit Javascript die breite jeden Divs, teilt diese durch 10 und man hat die breite jedes Zeichens dieser Schriftart in dieser Groeße. Per Javascript wird dann das ganze an ein PhP-Script weitergeleitet, wo die werte Gespeichert werden.Nun der 2te Teil: die Funktion zum ermittlen:
Gar nicht so schwer, man muss bloß die Breite der einzelnen Zeichen addieren, z.B.$laenge = 0;
function get_laenge($eingabe,$schriftart,$schriftgroesse) {
for($i=0;$i<strlen(trim($eingabe));$i++) {
//Hier:Verweis auf eine Funktion, die die länge des Zeichens in px zurückgibt, z.B.
$laenge += get_px($eingabe[$i],$schriftart,$schriftgroesse);
}
}Und das wars dann schon, $laenge ist dann die laenge des Strings in PX in der gewuenschten Schriftart und Größe.
Wenn du willst, koennen wir diese Funktion ja zusammen realisieren (in PhP waer mir am liebsten, von allen anderen Sprachen hab ich wenig Ahnung). Ich bin mir sicher, dass auch noch andere Aus dem Forum mitarbeiten würden, da wir sicherlich nicht die einzigen sind, die die länge eines Strings in px bei bekannter Schriftart und Größe wissen wollen.
Falls du interesse an einer gemeinsamen Verwirklichung hast, schreib doch einfach hier zurück ;)MFG
Philipp
-
Hi Jens,
hab grad gemerkt, dass ich etwas verworren geschrieben habe, der erste Teil ist vielleicht schlecht zu kapieren. Also:
Das ganze war so gedacht, dass man sich für jede Schriftart eine Datei erstellen kann, in der für jede Groeße die Länge der einzelnen Zeichen enthalten ist. Dazu wollte ich dann so vorgehen: per PHP (nicht per Javascript) jedes Zeichen in einen einzelnen bereich schreiben, die Breite von jedem Bereich per Javascript ermitteln und die werte dann weitergeben, wo sie in eine Datei gespeichert werden. Das halt für (zunächst einmal) einige Schriftarten und Größen, das ganze ist dann ja beliebig erweiterbar. Diese Dateien inklusive Funktion zum ermitteln der Länge eines Strings koennte man sich dann herunterladen, und z.B. nur die Schriftartdateien, die man benötigt, auf den eigenen Server hochladen. Es waere eben auch eine Funktion dabei, mit der man von jeder Beliebigen Schriftart eine Solche datei erstellen kann, und zwar so:
HTML-Formular: Schriftart und Schriftgröße eingeben
-> absenden an:
PhP-Script: Es wird eine HTML-Datei erzeugt, wo per PHP jedes Zeichen der Schrift in einen eigenen Bereich geschrieben wird. Dann wird per Javascript die Breite jeden Bereiches ausgelesen, am ende das ganze per Javascript wiederrum an ein PhP-Script weitergeleitet, wo dann alle übergebenen Werte in einer entsprechenden Datei gespeichert werden. Man koennte das ganze natürlich auch auf alle Schriftgrößen ausweiten...Hoffe, das ganze ist nun verstänlicher, hab meinen eigenen Senf kaum kapiert ;)...
Das waere halt ne Serverseitige Lösung für das Problem.MFG
Philipp
-