Chopping text at fixed number of characters, or preferably the nearest corresponding word boundary, is a common problem and is usually handled entirely server side. An ellipses (… rather than 3 full stops) is often added to show that the displayed text only represents a proportion of the original. The following function achieves this effect for an arbitrary text string:
function ChopText($sText, $iCharCount) {if (strlen($sText) > $iCharCount) {$iCharCount -= 1;return preg_replace("/^(.{0,$iCharCount}[^\s])\b.*$/", '$1…', $sText);} else {return $sText;}}
Calling the function as follows returns "Managing Translation…".
echo ChopText('Managing Translation Strings', 20);
This approach, however, has two disadvantages:
- You lose some of the meaning of the text. In some cases this may be so much that the text no longer makes enough sense. Sighted users may be able to gain context from surrounding information on the page but this could be more difficult for screen reader users who often browse by stepping through lists of headings or anchors in a page.
- The text loses SEO value as a search engine spider can no longer crawl the full text. This may be particularly relevant for anchor text as search engines index destination pages against this text.
Stuart and I recently had an interesting discussion about how we could achieve visual text chopping without actually chopping the text. We decided that the text, which would normally be chopped, could be hidden by wrapping it in a span tag and applying suitable CSS rules to shift it off-screen. Stuart did the hard work of getting it working for a recent project. On that project the server side uses and obscure templating language so I've converted those parts to PHP which I figure will be more useful to most people visiting this blog.
<span class="chopped">Managing Translation<span> Strings</span><span>
The following function achieves this:
function ChopText($sText, $iCharCount) {if (strlen($sText) > $iCharCount) {$iCharCount -= 1;return preg_replace("/^(.{0,$iCharCount}[^\s])\b\s*(.*)$/", '<span class="chopped">$1<span> $2</span><span>', $sText);} else {return $sText;}}
These CSS rules hide the additional text:
.chopped span {position: absolute;text-indent: -999em;}
It's important to note that you can't use display: none; to hide the text as doing so would result in a screen reader ignoring it completely.
Adding the ellipses is more difficult. Now that we're keeping the full text we only need a visual representation of the ellipses but we don't actually want it in the page content. The best way to achieve this is to make it a background image. You may have noticed above that I included an additional span tag. The background image will be applied to this. The CSS need to be extended as shown:
.chopped {background: url(ellipses.png) left bottom no-repeat;padding-right: 15px;}.chopped span {position: absolute;text-indent: -999em;}
It may take some experimentation to make the background image line up correctly with the text but once achieved the effect should be quite convincing.
I like the idea. I haven't seen the chopping from this perspective before. P.S - You may want to insert a } in between lines 3 and 4 in your last code snippet.
Dylan - good spot. Thanks very much. I've updated accordingly.
Good idea, I only have a two concerns: do search engines rate this as spamming because there is "invisible" text on the page? And perhaps the regular expression needs some adjustment so that a new paragraph with inserted spans doesn't render the page invalid / not well-formed.
I have perl version of this function that works great (after many different iterations), but could not get a corresponding function to work in php. The functions described above may work with some strings, but they don't work consistently with the review data I am importing. Some strings simply aren't truncated.
After a few tries and some experimentation, I came up the the function below. It seems to work and has the added advantage of not allowing strings longer than the length requested. Basically, it chops off the last word rather than extending into the last word.
static public function shortenWordBoundary($h, $m) { if (strlen($h)
I guess I hit the limit on the past post. Here's the function again.
static public function shortenWordBoundary($h, $m) { if (strlen($h)
I must admit i disagree with wrapping and hiding text. It is there for search engines to read, and so keeping as much there as possible will help them decide on your position in the search engine. I am all for reducing the code as much as possible, but not the text.
Hey great idea, would need sometime to get around it, but definitely something to keep in mind.
I agree with young scott, Hiding text has always been against 'Honest SEO' practices and i think that reducing code is a high priority. Absolute positioning is a nice way of making sure that your main content is read first by SE
nice post, does a search engine see all the text?
For everyone worrying about the technique being seen as spam I would not worry too much.
It's a common practice to hide text off-screen for accessibility reasons. Doing this is very different to hiding a shedload of keywords which *is* clearly spam. Accessible hiding of text is regularly used at Yahoo! and the technique has been reviewed by people responsible for SEO there so it can be considered as safe.
Also the whole point with this text is that it *is* indexable. It's positioned off-screen *not* hidden with display: none;.
very informative post, I also ask will search engines catch these text?
chat | Porno izle | sex izle | sicak sohbet Dear Admin, I thank you for this informative article. And I thank you for this I follow your vendors. It’s verry good. I wish you continued success whould you like. sicak chat | sohbet | chat | sohbet siteleri | chat siteleri | sohbetim | sohbet siteleri | This is a great resource for growing your buisness.There are various aspects in buiness management and to grow the business.This is a very useful for tool for young entepreneurs. Thanks You Admin chat siteleri | sohbet odalari | chat odalari - sohbet - sohbet kanalları - chat kanalları - mynet sohbet | Chat Sitesi
thnxxx
thank you good onay pls
thanks youu