Textgröße Dynamisch anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
anzahl
bestimmen
bild
code
ermitteln
hilfestellung
http
kopieren
manual
markieren
platz
position
schriftart
string
text
url
variable speichern
verkleinern
zeichen
-
Hallo,
ich habe einen Dynamischen Text (Zeichen sind zwar begrenzt aber die Anzahl der Zeichen bestimmt ja nicht die Größe). Die Textgröße soll sich nun Automatisch an die Größe des DIVs anpassen. Die Größe ist grundsätzlich fest nur wenn der Platz nicht ausreicht soll der Text sich verkleinern.
Ich habe natürlich erst einmal die Suche benutzt und bin auf folgenden Therad gestoßen:http://www.lima-city.de/thread/font-an-div-anpassen
Dort steht:
Die beste lösung wäre aber wohl mit php.
DIe Seite müpsste dann aber für jede änderung neugeladen werden
Das währe ja genau das Richtige für mich da der Text eh schon vor dem Laden feststeht. Nur leider wird dort nicht weiter erklärt wie das Funktioniert und ich konnte leider auch nichts weiter dazu finden. Mit Javascript gefällt mir das nicht so außerdem kann man damit ja auch nicht genau ausrechnen wie viel platz der Text benötigt. Am schönsten währe natürlich eine Lösung nur mit CSS aber ich habe keine Idee wie das funktionieren könnte.
Zur Verdeutlichung habe ich mal eine Beispielseite geschrieben.
<!DOCTYPE html> <html> <head> <title>Textanpassung</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- #text { background:#0A0; width:100px; } --> </style> </head> <body> <form method="get"> <input name="text" type="text" placeholder="Hier Text eingeben"> <input type="submit"> </form> <hr> <div id="text"> <p> <?php if (isset($_GET['text'])) { echo $_GET['text']; } ?> </p> </div> </body> </html>
http://studentenreiten-marburg.lima-city.de/Textanpassung.php
Danke im Voraus
Beitrag zuletzt geändert: 29.12.2012 15:55:35 von studentenreiten-marburg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
In PHP guckst du http://de3.php.net/manual/de/function.strlen.php
So kannst du die Anzahl der Zeichen eines Textes ermitteln. Den Text am besten vorher als String in einer Variable speichern. -
all-in1 schrieb:
Und wie kannst du dann aus der Stringlänge auf die Länge des gerenderten Strings schließen? Gar nicht
In PHP guckst du http://de3.php.net/manual/de/function.strlen.php
So kannst du die Anzahl der Zeichen eines Textes ermitteln. Den Text am besten vorher als String in einer Variable speichern.
Grund: Schriftart ≠ Schriftart, Zeichen ungleich lang, …
Einzig mit JavaScript wäre das möglich, da dort immer die tatsächlich verwendete Schriftart vorhanden ist…
Dazu habe ich hier folgenden Code gefunden, um die tatsächliche Länge eines Strings in Pixel zu bestimmen:String.prototype.width = function(font) { var f = font || '12px arial', o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; };Damit kannst du messen wie groß dein Text ist, die Größe anpassen, erneut messen … und am Ende hast du ihn genau so groß wie du ihn brauchst.
// EDIT:
Demo
Beitrag zuletzt geändert: 29.12.2012 22:01:38 von hackyourlife -
selbstverständlich lässt sich dies auch ohne Java-Script lösen:
mit canvas und css
oder wie er meinte mit php und css
oder mit flash und css
hier siehst du canvas und css: http://dregi.lima-city.de/hilfestellungen/textcanvas.php
hier siehst du php und css: http://dregi.lima-city.de/hilfestellungen/textAnDiv.php
Lösung mit canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><html> <body> <center><canvas id="tcanvas" height="200" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas> <br> Text eingeben<input type=text id="eing" onKeyup="wt()" value="Hello world" size=90><br> Schriftart: <form name=fm><select id=seli multiple="multiple" onChange="wt()"> <script type="text/javascript"> fs=fi=cw=ctx=null; af=['optimer','times new roman', 'courier new', 'georgia', 'sans-serif','times new roman','garamond', 'serif','arial', 'verdana', 'trebuchet', 'tahoma', 'helvetica', 'univers', 'futura', 'attika', 'fantasy', 'caflisch script']; function $(tw){return document.getElementById(tw);} for(i=0;i<af.length;i++){fs+="<option value='"+af[i]+"'>"+af[i]+"</option>"} document.writeln(fs+"</select></form>") function initCanvas(canvas) { if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) { canvas = window.G_vmlCanvasManager.initElement(canvas); } return canvas.getContext('2d'); } window.onload = function(){c=$("tcanvas");ctx = initCanvas(c);eing=$("eing"); fi=$("seli");wt();} function wt(){ text=eing.value; cw=c.clientWidth;ch=c.clientHeight fv=fi.options;ft=(cw/text.length*3)+ "px "; for(i=0;i<fv.length;i++){ft+=(fv[i].selected)?fv[i].value+",":"";} ctx.clearRect(0, 0, c.width, c.height); ctx.font = ft+'optimer'; ctx.fillText(text, 0, ch-20,cw,ch); } </script><br>Mehrauswahl möglich-->erste bekannte wird genommen. </body> </html>
Lösung mit PHP
<?php if(isset($_GET["tex"])){ $str=$_GET["tex"]; Header("Content-Type: image/png"); $fs = 5; $tw = imagefontwidth($fs); $th = imagefontheight($fs); $img = imagecreatetruecolor($tw*strlen($str),20); imagesavealpha($img, true); // Durchsichtiger hintergrund $color = imagecolorallocatealpha($img,0x00,0x00,0x00,127); ImageFill ($img, 0, 0, $color); $black = ImageColorAllocate($img, 0, 0, 0); ImageString($img, $fs, 0, 0,$str, $black); //$_GET["tex"] ImagePNG($img); # Hier wird das Bild PNG zugewiesen ImageDestroy($img); # Hier wird der Speicherplatz für andere Sachen geereinigt exit; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style type=text/css> img { -moz-animation-duration: 10s; -webkit-animation-duration: 10s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; -o-animation-duration: 10s; -o-animation-name: slidein; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; } @-moz-keyframes slidein { from {width:100%;} to {width:10%;} } @-webkit-keyframes slidein { from {width:100%;} to {width:10%;} } @-o-keyframes slidein { from {width:100%;} to {width:10%;} } </style> <html><body width=100%> <div width=100%><img class='ani2' src="<?php echo $_SERVER['PHP_SELF'];?>?tex=ich bin ein Bild und kein Text deshalb bin ich sehr dynamisch"> </div> </body></html>
Mit freundlichen grüssen Dregi
Beitrag zuletzt geändert: 2.1.2013 23:34:35 von dregi -
Super hackyourlife und dregi,
sieht alles gut aus was mich aber an den Lösungen von dregi stört ist das man den Text dann nicht mehr Markieren/Kopieren kann wenn das dort noch gehen würde währe das super sonst benutze ich das mit JS von hackyourlife.
PS:
Die Codes sehen sehr interessant aus, ist einiges drin was ich noch nicht kenne... -
Dann benütze den Code von hackyourlife
Bei PHP hast du ein Bild, dessen Text nicht selektiert werden kann, und um das Canvas zu erstellen muss ja auch auf javascript zurückgegriffen werden und selektieren geht auch nur mit noch mehr JS.
Und flash würde ich jetzt nicht JS vorziehen.
Liebe grüsse Dregi
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
