Breedte van een woord

Status
Niet open voor verdere reacties.
jeroendenoot

jeroendenoot

Terugkerende gebruiker
Lid geworden
14 mrt 2005
Berichten
1.492
Is het op een makkelijke manier mogelijk om achter de breedte in pixels van een woord te komen? Of moet je dan echt elke letter afgaan en kijken hoe breed die is?
 
jeroendenoot zei:
Is het op een makkelijke manier mogelijk om achter de breedte in pixels van een woord te komen? Of moet je dan echt elke letter afgaan en kijken hoe breed die is?
Klik om te vergroten...
Het zou zó kunnen:
Screenshot maken. Plakken in beeldbewerkingsprogramma.
Met een van de gereedschappen (selectie of uitsnijden - hieronder heb ik Uitsnijden gebruikt) een lijntje trekken langs het woord.
Hoeveel pixels het zijn zie je dan wel ergens in de statusbalk - het woord "makkelijke" is 62 pixels breed.

attachment.php


Guus.
 
Laatst bewerkt:
Sorry dat ik het er niet bijvertelde, maar we zitten hier wel in de sectie PHP. Ik bedoel dus dat ik dat met een PHP-code achter de breedte van een woord kan komen.
 
jeroendenoot zei:
Ik bedoel dus dat ik dat met een PHP-code achter de breedte van een woord kan komen.
Klik om te vergroten...
Aha. Even niet opgelet.
Maar voor PHP moet je niet bij mij wezen. :)

Guus.
 
Ik denk dat ik nu wel snap hoe die functie werkt, maar iets klopt er niet... Ik gebruik deze code om even te testen:

PHP: 
<?php
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "Hallo");
print $grootte[0] + $grootte[2] . '<br><div style="font-family: verdana; font-size: 20px;">Hallo</div>';
?>

Het bestand verdana.ttf heb ik even geüpload.
Er komt te staan 67. Daaronder staat het woordje Hallo. Ik ging even kijken of het klopte. Hallo had ik geselecteerd en toen een printscreen gemaakt. Geplakt in Paint en de breedte van de selectie gemeten. De breedte was 51 pixels en geen 67... Wat doe ik verkeerd?
 
jeroendenoot zei:
Ik denk dat ik nu wel snap hoe die functie werkt, maar iets klopt er niet... Ik gebruik deze code om even te testen:

PHP: 
<?php
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "Hallo");
print $grootte[0] + $grootte[2] . '<br><div style="font-family: verdana; font-size: 20px;">Hallo</div>';
?>

Het bestand verdana.ttf heb ik even geüpload.
Er komt te staan 67. Daaronder staat het woordje Hallo. Ik ging even kijken of het klopte. Hallo had ik geselecteerd en toen een printscreen gemaakt. Geplakt in Paint en de breedte van de selectie gemeten. De breedte was 51 pixels en geen 67... Wat doe ik verkeerd?
Klik om te vergroten...

[Edit] Blijkbaar doe ik niets verkeerd, maar ik heb ergens gelezen dat er een fout zit in die functie:confused:. Je kunt het blijkbaar oplossen door het te verminigvuldigen met een bepaald getal, dat getal ga ik nu even zoeken.

[Edit2] Het getal is bij mij ongeveer 0.72359735973597359735973597359736. Klopt bijna helemaal.
 
Laatst bewerkt:
attachment.php


59 - 8 = 51 :)
PHP: 
<?php
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "Hallo");
print abs($grootte[2] - $grootte[0]) . '<br><div style="font-family: verdana; font-size: 20px;">Hallo</div>';
?>
Vr.Gr. Egel.
 

Bijlagen

  • hallo.gif
    hallo.gif
    284 bytes · Weergaven: 62
Egel zei:
attachment.php


59 - 8 = 51 :)
PHP: 
<?php
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "Hallo");
print abs($grootte[2] - $grootte[0]) . '<br><div style="font-family: verdana; font-size: 20px;">Hallo</div>';
?>
Vr.Gr. Egel.
Klik om te vergroten...
Als ik die code gebruik krijg ik precies hetzelfde...

Die verminigvuldiging van mij klopt trouwens ook niet. :(
Wat moet ik nu doen?
 
Laatst bewerkt:
Hè! Het leek zo voor de hand te liggen. :(

Wat krijg je als je dit uitvoert:
PHP: 
<?php 
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "Hallo"); 
print "grootte: " . implode(" | ", $grootte) . "<br><br>"; 
?>
Dit javascript doet ook zoiets:
HTML: 
<html>
 <head>
  <title>woordbreedte</title>
 </head>
 <body bgcolor="#cccccc">
  <span id="woord" style="background: #c00; color: #fff; font-family: verdana; font-size: 20px;">Hallo</span><br>
  <br>
  <script language="JavaScript">
   var box = document.getElementById('woord');
   var l = box.offsetLeft, t = box.offsetTop, w = box.offsetWidth, h = box.offsetHeight;
   var grootte = new Array(l,t+h,l+w,t+h,l+w,t,l,t);
   document.writeln('grootte: ' + grootte.join(' | ') + '<br><br>');
   document.writeln(w + ' x ' + h + ' pixels<br><br>');
  </script>
 </body>
</html>
(Bijlage)

Ik krijg dan grootte: 8 | 33 | 59 | 33 | 59 | 8 | 8 | 8 in Fx en grootte: 10 | 40 | 61 | 40 | 61 | 15 | 10 | 15 in IE.

Krijg je dezelfde resultaten op je computer als op een website?


Vr.Gr. Egel.
 

Bijlagen

Ik krijg deze resultaten:

PHP script IE pc: grootte: 2 | -1 | 65 | -1 | 65 | -21 | 2 | -21
Javascript IE pc: grootte: 10 | 40 | 61 | 40 | 61 | 15 | 10 | 15
PHP script FF pc: grootte: 2 | -1 | 65 | -1 | 65 | -21 | 2 | -21
Javascript FF pc: grootte: 8 | 33 | 59 | 33 | 59 | 8 | 8 | 8
PHP script IE server: grootte: 0 | 0 | 67 | 0 | 67 | -22 | 0 | -22
Javascript IE server: grootte: 10 | 40 | 61 | 40 | 61 | 15 | 10 | 15
PHP script FF server: grootte: 0 | 0 | 67 | 0 | 67 | -22 | 0 | -22
Javascript FF server: grootte: 8 | 33 | 59 | 33 | 59 | 8 | 8 | 8

De bestanden op de server zijn:
PHP script: http://gy2i.awardspace.com/woordbreedte.php
Javascript: http://gy2i.awardspace.com/woordbreedte.html

Kun je hier iets mee?
 
PHP script server: grootte: 0 | 0 | 67 | 0 | 67 | -22 | 0 | -22
67 x 22
PHP script pc: grootte: 2 | -1 | 65 | -1 | 65 | -21 | 2 | -21
63 x 20
Javascript IE: grootte: 10 | 40 | 61 | 40 | 61 | 15 | 10 | 15
Javascript FF: grootte: 8 | 33 | 59 | 33 | 59 | 8 | 8 | 8
51 x 25
Klik om te vergroten...
Blijft raar. :confused: Als als je bij de php scripts $grootte[0] en $grootte[2] optelt geven ze hetzelfde maar het zijn coördinaten dus het gaat om het verschil.
http://nl2.php.net/manual/en/function.imagettfbbox.php

Ik heb het nog geprobeerd op m'n eigen server maar ik krijg: "Warning: imagettfbbox(): Could not read font in /home/sites/......../web/......../woord.php on line 2". :(

"Hello World" wel lukte wel. :) Mijn eerste php. :D

Wat geeft dit voor resultaat (php script pc / server):
PHP: 
<?php 
$grootte = imagettfbbox(20, 0, "./verdana.ttf", "qwertyuiopasdfghjklzxcvbnm"); 
print "grootte: " . implode(" | ", $grootte) . "<br><br>"; 
?>
Het zou 292 pixels (verschil) moeten zijn.


Vr.Gr. Egel.
 
Laatst bewerkt:
PHP script IE pc: grootte: 0 | 5 | 381 | 5 | 381 | -21 | 0 | -21
Verschil is dus 381
PHP script IE server: grootte: -1 | 5 | 389 | 5 | 389 | -22 | -1 | -22
Verschil is dus 388

Kun je hier iets mee?
 
PHP script pc: grootte: 0 | 5 | 381 | 5 | 381 | -21 | 0 | -21
381 x 26
PHP script server: grootte: -1 | 5 | 389 | 5 | 389 | -22 | -1 | -22
390 x 27
Klik om te vergroten...
Het is bijna punt ipv pixels. :confused: 20pt Verdana geeft 394 pixels breedte. Je zou dan imagettfbbox(0.75 * 20, 0, $font, "Hallo"); kunnen gebruiken (0.75 = 72 / 96).

Geeft imagettftext(); ook te grote letters?
PHP: 
<?php
// Het content-type
header("Content-type: image/png");

// Plaatje maken
$im = imagecreatetruecolor(96, 48);

// Kleuren - Achtergrond vullen
$white = imagecolorallocate($im, 255, 255, 255);
$grey  = imagecolorallocate($im, 192, 192, 192);
$black = imagecolorallocate($im, 000, 000, 000);
imagefilledrectangle($im, 0, 0, 95, 47, $white);

// Tekst
$text = 'Hallo';

// Lettertype
$font = 'verdana.ttf';

// Schaduw toevoegen
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Tekst toevoegen
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// imagepng() geeft een beter resultaat dan imagejpeg()
imagepng($im);
imagedestroy($im);
?>
Bijlage. Fouten voorbehouden. :)

En je zou het nog met een oudere Verdana kunnen proberen, de zip-bijlage bevat de W98 versie.


Vr.Gr. Egel.
 

Bijlagen

imagettftext(); geeft inderdaad ook te grote letters. In de bijlage staat het bovenste plaatje gemaakt door imagettftext(); en het onderste door HTML/CSS.
De Windows 98 Verdana geeft ook geen effect; precies hetzelfde resultaat.
Dan doe ik het wel met imagettfbbox(0.75 * 20, 0, $font, "Hallo");.
 

Bijlagen

  • hallo.gif
    hallo.gif
    1,4 KB · Weergaven: 14
jeroendenoot zei:
Is het op een makkelijke manier mogelijk om achter de breedte in pixels van een woord te komen? Of moet je dan echt elke letter afgaan en kijken hoe breed die is?
Klik om te vergroten...
ik doe php nog niet echt goed, ik houd me meer bezig met andere talen etc.. maar toch ff een antwoord:
als je kan nagaan hoe breed elke letter is, zonder paint ofzo, dan kan je toch gewoon van elke letter dat na laten gaan en ze dan bij elkaar op laten tellen???
ik bedoel als er een woord lengte code is, zal er ook vast wel een werkende letter code zijn??
 
lollige zei:
ik doe php nog niet echt goed, ik houd me meer bezig met andere talen etc.. maar toch ff een antwoord:
als je kan nagaan hoe breed elke letter is, zonder paint ofzo, dan kan je toch gewoon van elke letter dat na laten gaan en ze dan bij elkaar op laten tellen???
ik bedoel als er een woord lengte code is, zal er ook vast wel een werkende letter code zijn??
Klik om te vergroten...
Als die functie voor het woord al niet klopt.. ;)

En wat als je nou een woord (zin..?) met 1000 letters hebt? dan moet je dus voor elke letter die functie aan gaan roepen, terwijl er ook meerdere keren dezelfde letter in voorkomt.. niet echt efficient dan ;)
 
Ik doe het nu per letter. Dit is nu mijn code:
PHP: 
$letterbreedte = array(14, 16, 24, 35, 28, 51, 35, 13, 22, 22, 28, 35, 14, 19, 14, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 16, 16, 35, 35, 35, 25, 39, 31, 30, 29, 33, 27, 26, 32, 34, 22, 22, 31, 25, 38, 34, 34, 29, 34, 31, 28, 27, 32, 31, 45, 31, 29, 28, 22, 28, 22, 35, 28, 28, 27, 28, 24, 28, 27, 17, 28, 29, 14, 16, 27, 14, 42, 29, 27, 28, 28, 20, 24, 18, 29, 26, 39, 27, 26, 24, 28, 22, 28, 35, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 14, 16, 28, 28, 28, 28, 22, 28, 28, 39, 24, 34, 35, 0, 39, 28, 24, 35, 24, 24, 28, 29, 28, 14, 28, 24, 24, 34, 47, 47, 47, 25, 31, 31, 31, 31, 31, 31, 44, 29, 27, 27, 27, 27, 22, 22, 22, 22, 33, 34, 34, 34, 34, 34, 34, 35, 34, 32, 32, 32, 32, 29, 29, 29, 27, 27, 27, 27, 27, 27, 41, 24, 27, 27, 27, 27, 14, 14, 14, 14, 27, 29, 27, 27, 27, 27, 27, 35, 27, 29, 29, 29, 29, 26, 28, 26);
$teller = 0;
$titelbreedte = 0;
while(strlen($titel) > $teller){
	$titelbreedte += $letterbreedte[ord(substr($titel, $teller, 1)) - 32] . " ";
	$teller++;
};
Die array heb ik gemaakt met een javascript code.
 
Laatst bewerkt:
PHP: 
// Woordbreedte met 20px Verdana - Egel 060314
var letterbreedte = {A: 14, B: 14, C: 14, D: 15, E: 13, F: 12, G: 16, H: 15, I: 8, J: 9, K: 14, L: 11, M: 17, N: 15, O: 16, P: 12, Q: 16, R: 14, S: 14, T: 12, U: 15, V: 14, W: 20, X: 14, Y: 12, Z: 14, a: 12, b: 12, c: 10, d: 12, e: 12, f: 7, g: 12, h: 13, i: 6, j: 7, k: 12, l: 6, m: 19, n: 13, o: 12, p: 12, q: 12, r: 9, s: 10, t: 8, u: 13, v: 12, w: 16, x: 12, y: 12, z: 11};
function woordbreedte(woord) {
 var breedte = 0;
 for (var i = 0; i < woord.length; i ++) breedte += letterbreedte[woord.charAt(i)];
 return breedte;
 };

alert(woordbreedte('Hallo')); //!: 51
alert(woordbreedte('qwertyuiopasdfghjklzxcvbnm')); //!: 292
Ik was het net in Php aan het vertalen. :D Werkt prima dat idee van lollige. :thumb:

Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan