Woord generen in bepaald lettertype

[r0bert]

Ik heb geen idee hoe ik dit moet aanpakken:

Ik wil op een website in lettertype Trebuchet MS (lett. grootte 50pt) een bepaald woord vormen en deze liefst over een foto weergeven, maar gewoon witte achtergrond zou al heel wat zijn!

Dus bijv, ik roep de pagina aan met in een variabele strVar 'deze tekst'. Nu wil ik een scriptje krijgen dat aan de hand van die tekst, de tekst 'deze tekst' op het beeldscherm verschijnt. Dat zou nog eenvoudig kunnen door middel van iedere letter in een apart bestandje op te slaan en die achter mekaar te zetten.
Maar ik wil het net nog iets moeilijk Ik wil namelijk graag dat de letters een klein stukje over elkaar heenvallen, dus hetzelfde effect als de letterspatiering in PhotoShop klein maken zodat de letters over/in elkaar vallen.

Ik had zelf al 2 misschien mogelijke oplossing bedacht, maar nog niet uitgevoerd:

1) Alle letters van het alfabet als een image opslaan (speciale tekens hebben pech) en deze dan door middel van positionering over elkaar plaatsen (negatieve horizontale positionering t.o.v. de vorige letter)

2) Door middel van een serverside language als PHP de image generen.. Ik heb alleen geen enkel benul van hoe dat moet of waar ik zou moeten beginnen.

Heeft iemand suggesties of ideeën ?

[edit]
Hier een tijdelijk voorbeeld van wat ik bedoel met overlappend tekst:

[ Voor 9% gewijzigd door r0bert op 08-02-2003 18:24 ]

[Verwijderd]

flash?
Of het lettertype includen in je site (hoe heet dat ook al weer? ik werk er nooit mee geloof ik, ik meen dat darkblue dit op d'r siteje had toegepast)

[ Voor 96% gewijzigd door Verwijderd op 08-02-2003 18:26 ]

[r0bert]

"flash ?"
Liever niet, maar is inderdaad een mogelijkheid waar ik nog niet eens aan gedacht had..

"includen"
Ja, dat kan ook, maar dan kom ik met nog 2 andere problemen te zitten:
1) De load wordt véél groter voor de gebruiker, dat wil ik liefst vermijden
2) Kan ik de letters dan wel zo netjes elkaar laten overlappen ?

[ Voor 76% gewijzigd door r0bert op 08-02-2003 18:29 ]

[Tim]

met CSS de letterspacing verkleinen dan?

Dat werkt natuurlijk niet als het lettertype niet aanwezig is op de PC, ik weet niet of dat erg is. Misschien handig om te vertellen waar het voor is?
Als je het als beveiliging op je image wilt hebben dan zou ik zeker PHP nemen.

[ Voor 79% gewijzigd door Tim op 08-02-2003 18:31 ]

[Verwijderd]

Ik zou voor de serverside oplossing gaan als ik jou was

Waarom:
• Allemaal losse images downloaden is een rotklus voor de client
• Positioneren wordt ook een heel gezeur (Trebuchet is proportioneel)
• serverside is makkelijker

PHP heeft de GD Library voor image manipulation. Het plaatje wordt dan serversided in elkaar gedraaid (d'oh!)

Linkjes:
imagettftext()
imagechar()
imageloadfont()

good luck

[r0bert]

Timpie:
Ja, dat kan wel, maar ik denk dat het effect dan zal zijn dat de letters erg lelijk achter elkaar verschijnen en niet als een soort van één geheel verschijnen.. maar ik ga het meteen even uitproberen!

FoOl:
Ik denk dat dat stiekem hetgene is waar ik naar op zoek bent. Geen nadelen voor de client e.d. en hopenlijk wordt het een beetje netjes.. Maar ik ben wel benieuwd of er iemand misschien een nóg beter oplossing heeft. Thanks voor de info iig alvast!

[ Voor 43% gewijzigd door r0bert op 08-02-2003 18:32 ]

[Verwijderd]

Volgens mij zit Trebuchet MS tegenwoordig standaard op alle Windows en Macs. Ik heb er pasgeleden ook een demo mee gedaan die het bij ons op alle PCs en Macs gewoon goed deden kwa letters...

Als ik jou was zou ik die moeilijke image-shit lekker skippen en gewoon tekst gebruiken...

[Dark Blue]

Verwijderd schreef op 08 February 2003 @ 18:25:
flash?
Of het lettertype includen in je site (hoe heet dat ook al weer? ik werk er nooit mee geloof ik, ik meen dat darkblue dit op d'r siteje had toegepast)

Whoa, werkt het dan bij jou? Ik heb het namelijk idd toegepast op www.heidi.stylite.nl -> klik op de onderste balk van het linker menu... en je ziet een wijze uitspraak, ala. Maar hij doet-het-dus-niet ... ik weet niet waarom.
Ik heb de hele MS site ervoor doorgespit, precies hun code aangehouden, maar op pc's/macs waarop dat font niet staat, kan ik fluiten naar dat effect. Ik raad het je dus niet aan...

Goed, dit was offtopic, ik verwacht geen reacties van 'hey DB hij werkt hier niet hoor' (svp op icq als je een oplossing hebt) want dit is het topic van r0bert...

Aan r0bert: ik zou voor Flash gaan. Daarin kun je een woord laten genereren, en hij maakt er ook meteen antialias bij.
Een paar vraagjes:
- Moet de foto ook dynamisch zijn, door de gebruiker geupload à la minute?
- Je zult dan én de foto én de tekst in Flash moeten krijgen... daarna is het een eitje
- Heeft de gemiddelde computer waarop je dit gaat bekijken Flash geinstalleerd?
- Als je de foto niet in de Flash movie kunt zetten, ís het dan mogelijk om de tekst over de foto heen te zetten? Ik geloof niet dat je Flash objecten nml. ergens overheen kunt zetten, ook al zitten ze in een DIV ofzo...?

[Pelle]

Denk dat flash makkelijker is dan GD. Je wilt niet weten wat een load je script gaat trekken als er imagettf bewerkingen gedaan moeten worden. Daarbij heb je met GD ook geen controle over letterspacing, tenzij je weer met imagettfbbox gaat werken en letter voor letter gaat positioneren.

Ik zou gewoon lekker flash 5 of hoger uit de kast trekken, en daarin een variable text field zetten dat je vult adhv een var die je middels een flash.swf?text=blaat&foto=hoi.jpg achtige constructie meegeeft.

[Pelle]

Overigens Dark Blue: GD doet ook aan anti-aliassing met imagettf functies.

[Dark Blue]

Pelle schreef op 08 februari 2003 @ 23:39:
Overigens Dark Blue: GD doet ook aan anti-aliassing met imagettf functies.

Euh, vroeg ik daarnaar dan?

[Pelle]

Dark Blue schreef op 09 February 2003 @ 00:23:
Euh, vroeg ik daarnaar dan?

Nee, maar je gebruikte het wel als argument om Flash te gebruiken:

Dark Blue schreef op 08 February 2003 @ 23:08:
Aan r0bert: ik zou voor Flash gaan. Daarin kun je een woord laten genereren, en hij maakt er ook meteen antialias bij.

En dat argument gaat dus niet op, aangezien je met GD ook antialiassed text krijgt.

[Norjee]

HTML:

<html>
<head>
<title>Trebuchet speeltje</title>
<style>
.treb {font-family:"Trebuchet MS"; font-size:50pt;  letter-spacing: -5pt; }
</style>
</head>
<body>
<div class="treb">
Is dit nu wat je wilt hebben??
<script language="javascript">
varName = "strVar"
varSep = "&"
locString = String(document.location)

/*
varString = locString.substr(locString.indexOf(varName) != -1 ? locString.indexOf(varName) + varName.length + 1 : locString.length) 
varString = varString.substr(0 , varString.indexOf(varSep) != -1 ? varString.indexOf(varSep) : varString.length ) 
document.write(varString)
*/

document.write(locString.substr(locString.indexOf(varName) != -1 ? locString.indexOf(varName) + varName.length + 1 : locString.length).substr(0 , locString.substr(locString.indexOf(varName) != -1 ? locString.indexOf(varName) + varName.length + 1 : locString.length).indexOf(varSep) != -1 ? locString.substr(locString.indexOf(varName) != -1 ? locString.indexOf(varName) + varName.length + 1 : locString.length).indexOf(varSep) : locString.substr(locString.indexOf(varName) != -1 ? locString.indexOf(varName) + varName.length + 1 : locString.length).length ) )
</script>
</div>
</body>
</html>

[GrimaceODespair]

Gee Norjee, ga je voor de meeste code op 1 regel ? Ik weet niet of je code daar sneller (maar alleszins wel minder leesbaar) van wordt.

Maar negatieve spacing lijkt me idd wat r0bert zoekt. Misschien trouwens wel handig om ook even hier te kijken. Misschien weet de hele wereld dit al, maar ik heb het laatst pas ontdekt: je kunt je font online linken, zodat het bij mensen die het niet hebben, automatisch gedownload wordt . En het is ook nog standaard CSS2 (in tegenstelling tot 'enkel IE') )!

[ Voor 23% gewijzigd door GrimaceODespair op 09-02-2003 06:57 ]

[Verwijderd]

probeer phpWatermark op http://www.chengfu.net/,
das wat je zoekt

[r0bert]

Dark Blue:
Een paar vraagjes:
- Moet de foto ook dynamisch zijn, door de gebruiker geupload à la minute?
- Je zult dan én de foto én de tekst in Flash moeten krijgen... daarna is het een eitje
- Heeft de gemiddelde computer waarop je dit gaat bekijken Flash geinstalleerd?
- Als je de foto niet in de Flash movie kunt zetten, ís het dan mogelijk om de tekst over de foto heen te zetten? Ik geloof niet dat je Flash objecten nml. ergens overheen kunt zetten, ook al zitten ze in een DIV ofzo...?

1) Er moet een tekst worden aangemaakt a.d.h.v. de query string, dus iedere pagina die op wordt gevraagd moet zowat zo'n tekst aanmaken
2) Euh ok
3) Nee, het is de bedoeling dat het gewoon op internet komt, en daar heeft lang niet iedereen flash geinstalleerd lijkt me, daarom weer ik het ook een beetje.
4) Je kunt een flash object inderdaad wel over een HTML element heen plaatsen. Andersom wordt volgens mij moeilijker, of was dat nou alleen bij een gewone movie ?

Voxell:
probeer phpWatermark op http://www.chengfu.net/,
das wat je zoekt

"Fatal error: Call to undefined function: imagecreatetruecolor() in ./phpWatermark.inc.php on line 194"

[ Voor 13% gewijzigd door r0bert op 09-02-2003 10:58 ]

[Verwijderd]

En wat is er nou mis met gewoon tekst gebruiken t.o.v. Flash en GDLib?
Ik zie hier Trebuchet MS op elke computer in het kantoor hier, inclusief de Mac.

[r0bert]

Een plaatje vanuit de GDLib is wel 100x zo mooi (anti-aliasing) dan gewone tekst. Als op iedere pc werkelijk het font staat, zou het geen probleem zijn. Maar ik ben bang dat window95 e.d. dat fontje toch zullen missen en dan ziet de pagina er meteen weer niet uit.

Is er trouwens nog een oplossing om de letterspacing kleiner te maken dmv die Lib ? Of moet ik hiervoor in /14 zijn .. ?

[Verwijderd]

r0bert schreef op 09 February 2003 @ 13:40:
Een plaatje vanuit de GDLib is wel 100x zo mooi (anti-aliasing) dan gewone tekst. Als op iedere pc werkelijk het font staat, zou het geen probleem zijn. Maar ik ben bang dat window95 e.d. dat fontje toch zullen missen en dan ziet de pagina er meteen weer niet uit.

Is er trouwens nog een oplossing om de letterspacing kleiner te maken dmv die Lib ? Of moet ik hiervoor in /14 zijn .. ?

Daarbij heb je met GD ook geen controle over letterspacing, tenzij je weer met imagettfbbox gaat werken en letter voor letter gaat positioneren.

© Pelle

[GrimaceODespair]

Denk ik dat nou maar, of heeft niemand dat voorbeeld van die stylesheet van Norjee bekeken, icm de opmerking van mij over downloadable fonts? Voor zover ik kan zien, lost dat r0berts probleem op, of zit ik er nou langs?

[Dark Blue]

GrimaceODespair schreef op 09 February 2003 @ 20:11:
Denk ik dat nou maar, of heeft niemand dat voorbeeld van die stylesheet van Norjee bekeken, icm de opmerking van mij over downloadable fonts? Voor zover ik kan zien, lost dat r0berts probleem op, of zit ik er nou langs?

Nee, maar ik denk dat mensen er wat huiverig over waren omdat ik in mijn eerste post al zei dat het bij mij niet werkte. Maar sinds vanmiddag werkt het wel op mijn website, en ik zal vertellen waarom!

http://www.microsoft.com/...web/embedding/default.htm
Ga naar deze website, en download het programmaatje WEFT (het is gratis, is het niet geweldig?)
Enfin, downloaden en installeren, hij spit even je fonts folder door, en daarna moet je het document opgeven waarin jij dus het ge'embedde font wil gebruiken. Heb je nou niet een specifiek document, open dan even deze pagina:
http://pardus-larus.stude...uters/crypto/mi060103.htm
en met wat geknip en geplak kun je hier de meest gebruikte chars wel uithalen en in een document zetten.

Want, waarom moet dat: WEFT verwerkt in je downloadable font, je .eot , de site waarop hij gebruikt mag worden!

Ik had hem aanvankelijk op mijn site rechtstreeks van MS gedownload, en ja, als je m dan met Kladblok opent zie je ook daadwerkelijk de url van MS er bovenin staan, dat is de enige plek waar hij geladen mag worden, dus bij mij deed ie het niet!

Nou, vervolgens zet hij dus alle chars in de .eot file, en dan moet je nog locaties aangeven waarop hij die .eot file mag laden. Dat hoeft geen probleem te vormen aangezien je meerdere paths in mag voeren, hij zet standaard je lokale pad er al in, maar je kunt dus http, file:// enzo gewoon als paden toevoegen. En komt er nog een pad bij, later, dan genereer je gewoon weer een nieuwe .eot file.

Nou, dan komt het leuke deel, WEFT genereert er een mooi stukje css voor je bij, je moet misschien even het pad naar de file veranderen want hij zet standaard dus naar je lokale pad (c:\dit\dat\nogwat\Trebuch0.eot werkt niet echt he).

En dan load je de boel up, en het werkt... zo werkte het bij mij iig

Maar ja...wat ik al weer eerder noemde... dan ben je wel weer afhankelijk van de instelling van de gebruiker: staat antialiassing aan, of niet?

[GrimaceODespair]

Dark Blue, ik snap eigenlijk niet zo goed wat het probleem was. Je kan toch ook gewoon de ttf op je site zetten en ernaar linken in het src-attribuut van je @font-face? Ik dacht dat ttf crossplatform ondersteund werd, of niet? Iig, als dit zo zou zijn, ben je normaal toch even snel klaar als Norjee?

[Dark Blue]

GrimaceODespair schreef op 09 February 2003 @ 21:02:
Dark Blue, ik snap eigenlijk niet zo goed wat het probleem was. Je kan toch ook gewoon de ttf op je site zetten en ernaar linken in het src-attribuut van je @font-face? Ik dacht dat ttf crossplatform ondersteund werd, of niet? Iig, als dit zo zou zijn, ben je normaal toch even snel klaar als Norjee?

Nope, zomaar naar een .ttf verwijzen haalt weinig uit; om hem te embedden, moet je van die .ttf een .eot file genereren.

[GrimaceODespair]

Dark Blue schreef op 09 February 2003 @ 21:08:
Nope, zomaar naar een .ttf verwijzen haalt weinig uit; om hem te embedden, moet je van die .ttf een .eot file genereren.

Ow, je hebt het echt over embedden als in: meesturen in de html? Van w3 begreep ik dat je ook gewoon kon linken naar het font dat op je site staat. In mijn ogen is dat bijna even goed als embedden, maarja, wie ben ik Of heb ik nou nog niet door wat je bedoeld?