ttmt Posted October 18, 2011 Share Posted October 18, 2011 Hi All I'm not certain this is a php issue but I just can't think how to do this so I'm open to any ideas. I'm trying to create a font tester like those found on most type foundry sites where you can enter text in field and it will appear in an area in a font picked from a list. An example of the sort of thing can be found here. http://processtypefoundry.com/fonts/klavika/try-it Any ideas on how this might be achieved would be greatly appreciated. Quote Link to comment Share on other sites More sharing options...
requinix Posted October 18, 2011 Share Posted October 18, 2011 There are a few ways of doing it. That site uses an image; server-side it looks like they use PHP, so to generate the image they probably use GD or ImageMagick. Using either to create the image is quite simple if you have a .TTF (other formats are possible) of the font. Other options are CSS's @font-face and Flash/Java. Quote Link to comment Share on other sites More sharing options...
Psycho Posted October 18, 2011 Share Posted October 18, 2011 What is the purpose for this? The ultimate use for the font could have implications on what solution you should be going after. It also might affect what type of web server you should be using Windows vs. Linux. I used to work for a company that developed web-based solutions for the printing industry - most notably the ability to create print-ready files through a web application. Fonts was probably one of the most problematic aspects. Quote Link to comment Share on other sites More sharing options...
ttmt Posted October 18, 2011 Author Share Posted October 18, 2011 requinix - I think something like GD looks like the best solution. CSS and @fontface wouldn't be secure enough from the fonts point of view. mjdamato - I have a small type foundry so I'm using the font tester to display my own fonts. Quote Link to comment Share on other sites More sharing options...
requinix Posted October 18, 2011 Share Posted October 18, 2011 requinix - I think something like GD looks like the best solution. CSS and @fontface wouldn't be secure enough from the fonts point of view. Secure? What are your concerns? Quote Link to comment Share on other sites More sharing options...
ttmt Posted October 19, 2011 Author Share Posted October 19, 2011 The fonts would need to be available on the server. Using @fontface the location of the fonts could be found and downloaded. The is the main reason people use services like Typekit Quote Link to comment Share on other sites More sharing options...
ttmt Posted October 19, 2011 Author Share Posted October 19, 2011 Hi I've found this tutorial http://www.phpfreaks.com/tutorial/php-add-text-to-image that looks like a good starting point for me but I'm stuck getting this working. How do I add the image to the page? <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>untitled</title> </head> <body> <?php // Path to our font file $font = 'corbelb.ttf'; $fontsize = 20; // array of random quotes $quotes = array( "http://www.flingbits.com is the greatest invention since sliced bread! Except you can't slice it...", "Did you hear about the guy whose whole left side was cut off? He's all right now.", "There was a sign on the lawn at a drug re-hab center that said 'Keep off the Grass'."); // generate a random number with range of # of array elements $pos = rand(0,count($quotes)-1); // get the quote and word wrap it $quote = wordwrap($quotes[$pos],20); // create a bounding box for the text $dims = imagettfbbox($fontsize, 0, $font, $quote); // make some easy to handle dimension vars from the results of imagettfbbox // since positions aren't measures in 1 to whatever, we need to // do some math to find out the actual width and height $width = $dims[4] - $dims[6]; // upper-right x minus upper-left x $height = $dims[3] - $dims[5]; // lower-right y minus upper-right y // Create image $image = imagecreatetruecolor($width,$height); // pick color for the background $bgcolor = imagecolorallocate($image, 100, 100, 100); // pick color for the text $fontcolor = imagecolorallocate($image, 255, 255, 255); // fill in the background with the background color imagefilledrectangle($image, 0, 0, $width, $height, $bgcolor); // x,y coords for imagettftext defines the baseline of the text: the lower-left corner // so the x coord can stay as 0 but you have to add the font size to the y to simulate // top left boundary so we can write the text within the boundary of the image $x = 0; $y = $fontsize; imagettftext($image, $fontsize, 0, $x, $y, $fontcolor, $font, $quote); // tell the browser that the content is an image header('Content-type: image/png'); // output image to the browser imagepng($image); // delete the image resource imagedestroy($image); ?> <h2>Image Here</h2> <img src="<?php echo $image ?>" alt="" /> </body> </html> [code] Quote Link to comment Share on other sites More sharing options...
requinix Posted October 19, 2011 Share Posted October 19, 2011 You can't output HTML and image data at the same time. Only one. Restructure your file to look like if (display the image) { display the image; exit; } show the html page... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.