Breedte van een zin opvragen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Willem Jan Z

Willem Jan Z

29/11/2005 19:57:00
Quote Anchor link
Is het mogelijk om de breedte van een opgegeven zin op te vragen? En dan bedoel ik niet het aantal characters (strlen()), maar in pixels...

Ik gok dat ik dan meer in de JS richting moet zoeken, maar echt iets vinden doe ik niet :S

Iemand een idee?
 
PHP hulp

PHP hulp

29/03/2024 12:56:27
 

29/11/2005 20:02:00
Quote Anchor link
als je de gemiddelde breedte van een letter weet kan je het uitrekenen, maar zover ik weet is het niet mogelijk nee
 
Willem Jan Z

Willem Jan Z

29/11/2005 20:33:00
Quote Anchor link
Ja, maar hoe kom ik aan de gemiddelde breedte :S
Het is wel mogelijk, maar dat was niet met PHP/JS, dus hoeft niet te betekenen dat het online ook mogelijk is...
 

29/11/2005 20:47:00
Quote Anchor link
Willem-Jan:
hoe kom ik aan de gemiddelde breedte
analoog is gewoon opmeten, maar dat willen we natuurlijk niet
dus dan blijft digitaal over, en daarmee is het denk ik niet direct mogelijk.
 
Jelmer -

Jelmer -

29/11/2005 21:01:00
Quote Anchor link
Je zou heel flauw een lettertype als currieur met vaste letterbreedte kunnen gebruiken. Hier kan je makkelijk aan de letter van een letter komen, en deze gewoon * strlen() levert een mooie lengte op.

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.
 
Jan Koehoorn

Jan Koehoorn

29/11/2005 22:03:00
Quote Anchor link
Een regel zit altijd in een container, al is het maar een p tag of een span of een div. Als je die een id geeft, kun je met JavaScript de breedte van de content uitrekenen aan de hand van de border, de padding en de width.

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
 
Jan Koehoorn

Jan Koehoorn

29/11/2005 22:24:00
Quote Anchor link
Wat ook nog zou kunnen:

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.
 
Jelmer -

Jelmer -

29/11/2005 22:25:00
Quote Anchor link
@Jan: dat met display:block heb ik uiteraard ook even geprobeerd, maar er wel vast van uitgaande dat een div (een typisch voorbeeld van een natuurlijke display:block om het zo maar even te noemen) altijd 100% breedt is. En dat gold ook voor de span.

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
<span id="lengtemeter" style="">Een hele korte zin in.</span><br/>
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 -
 
Jan Koehoorn

Jan Koehoorn

29/11/2005 22:41:00
Quote Anchor link
Ja, die offsetWidth is een property van onder andere het HTMLParagraphElement. Die had ik ook al gevonden, maar bij een <p> tag heb je daar niets aan. Die loopt namelijk over de volle breedte van het scherm, maar dat hoeft een zin natuurlijk helemaal niet te doen.

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
 
Willem Jan Z

Willem Jan Z

29/11/2005 23:07:00
Quote Anchor link
Het is voor ondertiteling...

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.
 
Willem Jan Z

Willem Jan Z

29/11/2005 23:16:00
Quote Anchor link
Met de offsetWidth lijkt het te werken...
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...
 
Jan Koehoorn

Jan Koehoorn

29/11/2005 23:17:00
Quote Anchor link
Hee, dat is mooi. Plak je code ff hierheen, dan kunnen we kijken hoe je het gedaan hebt.
 
Willem Jan Z

Willem Jan Z

29/11/2005 23:19:00
Quote Anchor link
<span id="lengtemeter" style="">abcdefghijklmnopqrstuvwxyz</span><br/>
<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
 
Jan Koehoorn

Jan Koehoorn

29/11/2005 23:28:00
Quote Anchor link
Getest met welke browser(s)?
 
Willem Jan Z

Willem Jan Z

29/11/2005 23:48:00
Quote Anchor link
FF en IE

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
 

30/11/2005 00:57:00
Quote Anchor link
W0W! Dus deze keer doet IE wel mee met de rest?
 
Willem Jan Z

Willem Jan Z

30/11/2005 01:03:00
Quote Anchor link
Jep
 

30/11/2005 08:28:00
Quote Anchor link
Das niet vaak ;)
 
Jan Koehoorn

Jan Koehoorn

30/11/2005 11:46:00
Quote Anchor link
Hahaha, nee klopt!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.