Breedte van een zin opvragen
Ik gok dat ik dan meer in de JS richting moet zoeken, maar echt iets vinden doe ik niet :S
Iemand een idee?
Het is wel mogelijk, maar dat was niet met PHP/JS, dus hoeft niet te betekenen dat het online ook mogelijk is...
Willem-Jan:
analoog is gewoon opmeten, maar dat willen we natuurlijk niethoe kom ik aan de gemiddelde breedte
dus dan blijft digitaal over, en daarmee is het denk ik niet direct mogelijk.
Met javascript zou je de zin in een <span/> kunnen plaatsen, en dan de lengte van die span kunnen opvragen. Wel opletten dat margin en padding en ook border op 0 staan voor een nauwkeurig antwoord.
<span id="lengtemeter">Een hele korte zin.</span><br/>
Breedte: <script>document.write(document.getElementById('lengtemeter').width);</script>;
Maar net getest te hebben, werkt dat helaas ook niet in Firefox. Misschien trapt IE er wel in.
Sorry, had Jelmer's post niet gelezen. Ga het zelf even proberen.
@ Jelmer: ik denk dat je alleen de breedte kunt opvragen van elementen die standaard als display "block" hebben. Een <span> is standaard "inline".
Gewijzigd op 29/11/2005 22:05:00 door Jan Koehoorn
Op quirksmode.org staat een script om de x en y positie van een element op een pagina weer te geven. Als je dus twee elementen links en rechts van de tekst zou zetten, zou je het verschil van de x coordinaten kunnen berekenen.
Vreemd genoeg krijg ik waneer ik niets invul, dus de standaard passende breedte van zowel block als inline een niks-waarde terug. Gewoon leeg! Pas waneer ik een waarde opgeef, al is het bij inline 1 pixel (waar de span zich dan dus niets van aantrekt, inline kent geen breedtes) krijg ik lief via javascript 1px terug.
Maar gelukkig bestaat er zoiets als Google, die mij even herinnert aan offsetWidth. Dit script werkt in Camino (dus ook in FF en andere Mozilla browsers)
Code (php)
1
2
2
<span id="lengtemeter" style="">Een hele korte zin in.</span><br/>
Breedte: <script>document.write(document.getElementById('lengtemeter').offsetWidth);</script>px;
Breedte: <script>document.write(document.getElementById('lengtemeter').offsetWidth);</script>px;
edit: ik zag dat jij ook al weer druk bezig was :) Jij bent echt te goed voor deze wereld.
Gewijzigd op 29/11/2005 22:30:00 door Jelmer -
Er bestaat ook zoiets als een HTMLSpanElement maar die heeft helaas weer geen property offsetWidth.
edit: die in Camino blijkbaar ondersteund wordt! Wonderlijk, want in de W3C DOM specificatie is er officieel geen HTMLSpanElement. Zie de Mozilla Hacking Guide
Ik ben inderdaad ook weer bezig geweest, maar die link loopt dood, want ik vond geen oplossing en heb de pagina verwijderd ;-)
@ Willem-Jan: waar heb je het voor nodig? Misschien kan het op een heel andere manier.
Gewijzigd op 29/11/2005 22:56:00 door Jan Koehoorn
Een ontwikkelaar van een programma zegt dit:
Quote:
Ik gebruik of een aantal karakters of de werkelijke pixelbreedte met het gekozen font en grootte, de breedte van een DVD (720 pixels) en de ingestelde marges (20 default). Deze laatste methode is dus super nauwkeurig!
Ik ga eerst eens kijken naar jou link over de x en y coördinaten. Had er zelf al aan gedacht, maar nog niks geprobeert.
Verschillende waardes met hoofdletters en kleine letters en met andere lettertypes ook weer andere waardes...
Het punt was dat het nauwkeuriger is om de breedte in pixels te hebben dan het aantal characters. En op deze manier werkt het denk ik goed genoeg...
<span id="lengtemeter2" style="">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
<span id="lengtemeter3" style="font-family:Arial;">abcdefghijklmnopqrstuvwxyz</span><br/>
<span id="lengtemeter4" style="font-family:Arial;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
<p>
Times:<br \>
Breedte: <script>document.write(document.getElementById('lengtemeter').offsetWidth);</script>px;<br \>
Breedte2: <script>document.write(document.getElementById('lengtemeter2').offsetWidth);</script>px;<br \>
<p>
Arial:<br \>
Breedte: <script>document.write(document.getElementById('lengtemeter3').offsetWidth);</script>px;<br \>
Breedte2: <script>document.write(document.getElementById('lengtemeter4').offsetWidth);</script>px;<br \>
Heb dit als tests...
Gewijzigd op 29/11/2005 23:23:00 door Willem Jan Z
Edit: en Opera
Allemaal zelfde resultaat
Edit2:
Resultaat:
Times:
Breedte: 175px;
Breedte2: 270px;
Arial:
Breedte: 195px;
Breedte2: 277px;
Gewijzigd op 30/11/2005 09:14:00 door Willem Jan Z