Truncat...
“If there’s more than 200 characters, we’ll put an ellipsis and add a Read More link.”
And then you click on that Read More link and, well, you’re underwhelmed that it only showed three more words. If there were only three more words, why not just show them!
As a developer, it’s really easy to see a spec like “no more than 2 lines” and do something like this:
if ( content.length > 200 ) {
return content.substring(0,200) + “…”;
}
A better experience, though, might be to only truncate when text is exceedingly long and truncate back to a short amount.
if ( content.length > 300 ) {
return content.substring(0,200) + “…”;
}
I haven’t actually scientifically tested this and I’d be curious to see how this would perform. The drawback to this scenario is that if you actually want to always clamp to the same certain number of lines then this won’t really work since some lines would be longer if they fit between the 200 and 300 character range (or whatever range you specified).
It’d work better for longer swaths of text, say four of five lines in length since the variability there would be less noticeable — especially if shown along with one, two, and three lines of text. (e.g. a Facebook feed.)
Anyways…
Conversation
Another thing worth doing is truncating on the last word, and not just at a hard place like "200 characters". This is what I do on my blog to improve search results appearance, by not abruptly truncating a sentence.
E.g:
"I've been using this approach ..." vs "I've been using this approach t..."
Visually
— @nzgb
Even better is to truncate based on available width and word. Sometimes I see posts truncated on length that have different widths because of proportional spacing.
All versions of Safari used to be able to truncate and add ellipses for multi-line content in CSS. I believe that there are plugins that do that.
Something similar applies to lists, where you can often see a button saying "View 1 more item" and pagination where one regularly sees something like 1 ... 3 4 5 ... 7.
So why aren't you just showing the missing items/page numbers? They take up the same amount of space!
Something similar applies to lists, where you can often see a button saying "View 1 more item" and pagination where one regularly sees something like 1 ... 3 4 5 ... 7.
So why aren't you just showing the missing items/page numbers? They take up the same amount of space!
Sorry for double posting, it said my comment was marked as spam...
While we're at it, I wish there was a way to indicate whether a "Read More" link goes to a new page, or just loads more words in the current page.
Ars Technica feeds work always as 3 paragraphs and a link to read X more paragraphs. obviously I don't know details of the implementation, but it's an interesting approach.
Don't do this. Seriously, you're going to get into so much headache.
1) Truncate at words rather, but then, what exactly is a word? That's much harder to explain than you might think at first glance. Think languages that don't have any spaces (Chinese, and usually Japanese). Languages that combine many words into a giant one (Icelandic and Finnish, iirc).
2) Javascript's substring function happily chops a surrogate pair in two, leaving either part look garbled. Most characters don't have this problem, but it does happen. And then there are combined characters (like vowels with a complex set of accents) that should be kept together.
3) For right-to-left languages, it makes no sense to put the "..." at the end, unless the browser can make sense of it and display the ellipses at the beginning.
4) How to handle very long words? Would you chop a person's name in twine? How about a list of numbers? A quoted passage?
5) And does "..." make sense in every language to begin with? I would wager there are some languages/cultures that use a different symbol for "there's more".
I've always been asked to cut to X number of words, so that doing something along thiese lines:
function cutToWords(str, amount){
var words = string.split(" ");
return words.slice(0, amount).join(' ') + (words.length - amount > 0? "..." : "");
}
it's not as pretty as a simple substr, but hey, it's still a more intuitive measure, and can be easily enforced on the publishing side as well.
@Martijn, this sort of thing only works on a culture by culture basis. Some cultures will require adjustments, some cultures will be kind of OK unless you utterly fail to convey the whole "this is a snippet" part in the design, and some cultures will probably use entirely different visual languages to convey that thing. Western European and related cultures on the other hand , which I'm willing to bet is what snook is targeting here, are going to catch what's going on rather easily.