<?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>CodeBlog.ch &#187; Uncategorized</title>
	<atom:link href="http://www.codeblog.ch/category/uncategorized/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codeblog.ch</link>
	<description>Coding and more - Concrete5, Flex, JavaScript</description>
	<lastBuildDate>Fri, 18 Jun 2010 08:05:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Smart text trimming with PHP</title>
		<link>http://www.codeblog.ch/2009/06/smart-text-trimming-with-php/</link>
		<comments>http://www.codeblog.ch/2009/06/smart-text-trimming-with-php/#comments</comments>
		<pubDate>Sat, 20 Jun 2009 12:56:46 +0000</pubDate>
		<dc:creator>Remo Laubacher</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[gd]]></category>
		<category><![CDATA[text]]></category>
		<category><![CDATA[trim]]></category>

		<guid isPermaLink="false">http://www.codeblog.ch/?p=353</guid>
		<description><![CDATA[Have you ever tried to create a short preview text using PHP? Did you just count the characters and ended up having texts with a completely different width like shown on this picture?

This tutorial describes a small method which calculates the real width of a string and lets you create better looking preview texts!

Measuring string [...]]]></description>
			<content:encoded><![CDATA[<p>Have you ever tried to create a short preview text using PHP? Did you just count the characters and ended up having texts with a completely different width like shown on this picture?</p>
<p><a href="http://www.codeblog.ch/wp-content/uploads/2009/06/text-trimming.png"><img src="http://www.codeblog.ch/wp-content/uploads/2009/06/text-trimming-300x255.png" alt="text-trimming" title="text-trimming" width="300" height="255" class="alignnone size-medium wp-image-354" /></a></p>
<p>This tutorial describes a small method which calculates the real width of a string and lets you create better looking preview texts!</p>
<p><span id="more-353"></span></p>
<h2>Measuring string width</h2>
<p>PHP offers several methods to measure a string width. You can use the built in method <a target="_blank" href="http://ch2.php.net/manual/en/function.imagefontwidth.php">ImageFontWidth</a> to measure the width of a string using the built in PHP fonts. This is quite easy and works well if you want to create a captcha or something similar, using the PHP fonts.</p>
<p>But there&#8217;s another method which you can easily use to get the complete bounding box of a true type font string. It&#8217;s called <a href="http://ch2.php.net/manual/en/function.imagettfbbox.php">imagettfbbox</a>. The return value is an array which contains several values needed for a bounding box.</h2>
<p>The trimming method</h2>
<p>As you&#8217;ve probably seen on the picure at the beginning of the article, I needed a method that cuts off a string after a certain width and adds a string to indicate that the text isn&#8217;t completely shown. Here&#8217;s some code:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> trim_by_width<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #339933;">,</span><span style="color: #000088;">$width</span><span style="color: #339933;">,</span><span style="color: #000088;">$font_file</span><span style="color: #339933;">,</span><span style="color: #000088;">$font_size</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">7</span><span style="color: #339933;">,</span><span style="color: #000088;">$append_string</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'...'</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$append_string_box</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagettfbbox</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$font_size</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$font_file</span><span style="color: #339933;">,</span><span style="color: #000088;">$append_string</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$append_string_width</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$append_string_box</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$str_len</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$i</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$i</span><span style="color: #339933;">&lt;=</span><span style="color: #000088;">$str_len</span><span style="color: #339933;">;</span> <span style="color: #000088;">$i</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$trimmed_text</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$i</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$bounding_box</span> <span style="color: #339933;">=</span> <span style="color: #990000;">imagettfbbox</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$font_size</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$font_file</span><span style="color: #339933;">,</span><span style="color: #000088;">$trimmed_text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$trimmed_text_width</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$bounding_box</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$trimmed_text_width</span> <span style="color: #339933;">+</span> <span style="color: #000088;">$append_string_width</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$width</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$i</span> <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$str_to_return</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$trimmed_text</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$trimmed_text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$trimmed_text_width</span> <span style="color: #339933;">!=</span> <span style="color: #000088;">$str_len</span><span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
				<span style="color: #000088;">$str_to_return</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$append_string</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000088;">$str_to_return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$text</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>


<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$trimmed_text</span> <span style="color: #339933;">=</span> trim_by_width<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #339933;">,</span> <span style="color: #000088;">$width</span><span style="color: #339933;">,</span> <span style="color: #000088;">$font_file</span><span style="color: #339933;">,</span> <span style="color: #000088;">$font_size</span><span style="color: #339933;">,</span> <span style="color: #000088;">$append_string</span><span style="color: #339933;">=</span><span style="color: #0000ff;">'...'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>$text:<br />
<code>The first parameter is the string which you want to trim</code></p>
<p>$width:<br />
<code>This defines the maximum width of the text in pixels! Not in characters or anything else</code></p>
<p>$font_file:<br />
<code>Here you have to specify the location of your true type font file.</code></p>
<p>$font_size:<br />
<code>The font size you want to use. Please note that unit depends on the version of the GD library you're using. GD1 uses pixels, whereas GD2 uses points</code></p>
<p>$append_string:<br />
<code>An optional string to define the text appended at the end of a trimmed text. By default set to "..."</code></p>
<h2>An example</h2>
<p>You can call the method like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> trim_by_width<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'this is a long text'</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">55</span><span style="color: #339933;">,</span><span style="color: #990000;">dirname</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">__FILE__</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/verdana.ttf'</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>It assumes that the file verdana.ttf is in the same directory as the php script. It will cut the text &#8220;this is a long text&#8221; after 55 pixels.</p>
<p>That&#8217;s it!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.codeblog.ch/2009/06/smart-text-trimming-with-php/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
