<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>bavotasan.com &#187; text elements</title>
	<atom:link href="http://bavotasan.com/tag/text-elements/feed/" rel="self" type="application/rss+xml" />
	<link>http://bavotasan.com</link>
	<description>by c.bavota</description>
	<lastBuildDate>Tue, 07 Feb 2012 15:42:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Great Font Resources for Web Development</title>
		<link>http://bavotasan.com/2010/great-font-resources/</link>
		<comments>http://bavotasan.com/2010/great-font-resources/#comments</comments>
		<pubDate>Tue, 27 Jul 2010 14:20:25 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[APIs]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[face kits]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[Squirrel]]></category>
		<category><![CDATA[text elements]]></category>
		<category><![CDATA[Tool]]></category>
		<category><![CDATA[type]]></category>
		<category><![CDATA[way]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=2517</guid>
		<description><![CDATA[Ever since I wrote Embedding Fonts in your Web Site with CSS and @font-face many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with The New Google Font API but there are also a few others resources available. Here is a list of [...]]]></description>
			<content:encoded><![CDATA[<p>Ever since I wrote <a href="http://bavotasan.com/tutorials/embedding-fonts-web-site-css-font-face/">Embedding Fonts in your Web Site with CSS and @font-face</a> many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with <a href="http://bavotasan.com/articles/google-font-api/">The New Google Font API</a> but there are also a few others resources available. Here is a list of places to find fonts and tools you can use to include them in your Web site.</p>
<h3>Font Squirrel</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/fontsquirrel.jpg" alt="Font Squirrel" title="fontsquirrel" width="550" height="160" class="alignleft size-full wp-image-2572" /><br />
Font Squirrel has an amazing library of free commercial-use fonts. All of the @font-face kits that are available in my <a href="http://themes.bavotasan.com/category/premium-themes/">Premium themes</a> come from Font Squirrel. You can download fonts to use in desktop publishing or you can grab some @font-face kits to use on your Web site. There is even a handy, simple to use tool for converting standard fonts into @font-face kits for embedding on your Web site.<br />
<a href="http://www.fontsquirrel.com/">http://www.fontsquirrel.com/</a></p>
<h3>Google Font API</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/googlefont.jpg" alt="Google Font API" title="googlefont" width="550" height="160" class="alignleft size-full wp-image-2564" /><br />
I wrote about this one already so just check out <a href="http://bavotasan.com/articles/google-font-api/">that article</a>.</p>
<h3>TypeKit</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/typekit.jpg" alt="TypeKit" title="typekit" width="550" height="160" class="alignleft size-full wp-image-2567" /><br />
TypeKit is a subscription-based service that allows you to link to fonts from many different type foundries. Subscription costs range from free to $99.99 per year. A free account allows for 25,000 pageviews a month and a limit of 2 fonts throughout you site. It is a great way to test out the service to see if it is right for you.<br />
<a href="https://typekit.com/">https://typekit.com/</a></p>
<h3>WebFont Loader</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/webfont.jpg" alt="WebFont Loader" title="webfont" width="550" height="160" class="alignleft size-full wp-image-2565" /><br />
This one is very similar to the Google Font API but it offers a wider range of resources of available fonts. You can use Google Fonts, TypeKit, Ascender or custom fonts.<br />
<a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">http://code.google.com/apis/webfonts/docs/webfont_loader.html</a></p>
<h3>sIFR</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/sifr.jpg" alt="sIFR" title="sifr" width="550" height="160" class="alignleft size-full wp-image-2575" /><br />
sIFR (Scalable Inman Flash Replacement) is an open source piece of JavaScript that allows you to replace text elements on your Web site with Flash embedded equivalents. It is a bit more complicated to implement but there are many sites that use it and the results are quite nice.<br />
<a href="http://wiki.novemberborn.net/sifr3/">http://wiki.novemberborn.net/sifr3/</a></p>
<h3>typeface.js</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/typeface.jpg" alt="typeface.js" title="typeface" width="550" height="160" class="alignleft size-full wp-image-2576" /><br />
typeface.js was developed by David Chester as an alternative to using Flash to embed fonts on your site. Using typeface.js is pretty straightforward, since all it takes is the core JavaScript file and then a font. You can even convert your own fonts.<br />
<a href="http://typeface.neocracy.org/">http://typeface.neocracy.org/</a></p>
<h3>FLIR</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/flir.jpg" alt="FLIR" title="flir" width="550" height="160" class="alignleft size-full wp-image-2577" /><br />
FLIR (FaceLift Image Replacement) is another alternative to sIFR. It was created by Cory Mawhorter and uses JavaScript and PHP to dynamically create images of the text elements that you wish to use specific fonts on. Implementing it requires only a few lines of code and you are up and running.<br />
<a href="http://facelift.mawhorter.net/">http://facelift.mawhorter.net/</a></p>
<h3>Cufón</h3>
<p><img src="http://bavotasan.com/wp-content/uploads/2010/07/cufon.jpg" alt="Cufón" title="cufon" width="550" height="160" class="alignleft size-full wp-image-2578" /><br />
Cufón works with a rendering engine built in JavaScript and a font generator that uses <a href="http://fontforge.sourceforge.net/">FontForge</a> to convert fonts to a proprietary format.<br />
<a href="http://wiki.github.com/sorccu/cufon/">http://wiki.github.com/sorccu/cufon/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2010/great-font-resources/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Turn Text into an Image using the PHP GD Library</title>
		<link>http://bavotasan.com/2009/turn-text-into-an-image-using-the-php-gd-library/</link>
		<comments>http://bavotasan.com/2009/turn-text-into-an-image-using-the-php-gd-library/#comments</comments>
		<pubDate>Mon, 25 May 2009 20:56:41 +0000</pubDate>
		<dc:creator>c.bavota</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[Clue]]></category>
		<category><![CDATA[file]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[Image Tag]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[online]]></category>
		<category><![CDATA[Open]]></category>
		<category><![CDATA[Png]]></category>
		<category><![CDATA[something]]></category>
		<category><![CDATA[support]]></category>
		<category><![CDATA[tag]]></category>
		<category><![CDATA[text elements]]></category>
		<category><![CDATA[way]]></category>

		<guid isPermaLink="false">http://bavotasan.com/?p=595</guid>
		<description><![CDATA[While developing a site for a client, I needed to figure out a way to convert certain text elements into images. I had no clue how to do this but after doing a bit of research, I discovered a nifty library of functions already available through PHP. The GD library offers tons of cools way [...]]]></description>
			<content:encoded><![CDATA[<p>While developing a site for a client, I needed to figure out a way to convert certain text elements into images. I had no clue how to do this but after doing a bit of research, I discovered a nifty library of functions already available through PHP. The GD library offers tons of cools way to dynamically create PNG, JPEG or GIF files and output them directly to your browser, but you need to make sure that your server has the library enabled.</p>
<p>You can check to see if the GD library available on your server by placing the code:</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">phpinfo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></td></tr></table></div>

<p>into a test.php file and uploading it to your site&#8217;s main directory. Open the file online and look to see if GD Support is Enabled. If it is, you are good to go.<br />
<span id="more-595"></span><br />
The following code will dynamically create a PNG file from a text string.</p>

<div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Content-type: image/png&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$string</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;This is my test string.&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$font</span>  <span style="color: #339933;">=</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$width</span>  <span style="color: #339933;">=</span> <span style="color: #990000;">imagefontwidth</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$font</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$string</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$height</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagefontheight</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$font</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$image</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecreatetruecolor</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$width</span><span style="color: #339933;">,</span><span style="color: #000088;">$height</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$white</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorallocate</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">255</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">255</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">255</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$black</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagecolorallocate</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagefill</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$white</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #990000;">imagestring</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #339933;">,</span><span style="color: #000088;">$font</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$string</span><span style="color: #339933;">,</span><span style="color: #000088;">$black</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #990000;">imagepng</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">imagedestroy</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$image</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></td></tr></table></div>

<p>The above code must be included in its own file, it cannot be added to an existing PHP file with other functions. To access this image from another file just include it as the source in an image tag.</p>
<p>Test out turning text into an image by typing in something below.</p>
<form method="get" action="http://bavotasan.com/text-to-image.php">
<input type="text" name="text" maxlength="40" size="40" />
<input type="submit" name="submit" value="Text to Image" />
</form>
]]></content:encoded>
			<wfw:commentRss>http://bavotasan.com/2009/turn-text-into-an-image-using-the-php-gd-library/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

