Dealing with user-supplied long titles with no spaces

Accessibility
1

Hi,

Wonder if anyone has opinions on the best way to deal with the following problem:

Our web site accepts user input of titles and we limit the length of titles, but once in a while a user will enter a long string of text with no spaces. For example:

“Colors:Red,blue,green,yellow,orange,violet,mauve,chartruese”

When displaying that title, I want the browser to wrap it, as it would if there were spaces.

I’d rather not force breaks server-side, because:
a) we don’t know reliably whether a particular comma is really a “word boundary” (it could be part of a number like “1,234”)
b) the width where it will be displayed is not necessarily known on the server side.

Any suggestions?

Thanks

2

I wonder if it’s possible to reject an entry that has more than, say, 50 characters without a space (or at least, an “Are you sure?” box)

3

Thanks for your suggestion Stevie.

Certainly that could be part of the solution, but we already have many titles existing.

4

I’m thinking a clever regex might work, with a human double checking.

When you say title you don’t mean <title> tags right? As browsers don’t wrap those.

There is a CSS property that’s a very harsh break called word-wrap: break-word. It was originally IE-only but has been added to CSS3, so more and more modern browsers are supporting it. However you will not have that support in old browsers.

another thought is adding &shy or & # 173; soft hyphens if there is 50 chars of unbroken (and non-link) text. The worst this can do is add a - and wrap the rest on a new line which, again a regex to check that it’s not in the middle of a number or something, might be acceptable.

FF2 does not support soft hyphens but maybe that is not a browser you are building for anyway.

5

Hi Stomme,

Thanks for this – it put me on the right track. (Right, I did NOT mean <title> tag)

I think my solution will be to server-side include a class or inline style only to titles that violate some regex rule (such as having too many characters without spaces).

// PHP psuedo code:
// if >= 50 concurrent non-space characters, include class “breakWords”

<span class=“breakWords”>Colors:Red,blue,green,yellow,orange,violet,mauve,chartruese</span>

// css:

span.breakWords { word-wrap: break-word; }

The soft-hypen approach may work as well.

Thanks all!

Larry

6

The soft hyphen will I think work on MORE browsers than break-word… though it does mean adding a character to the content itself.

the benefit of a scriptie adding softhyphen is, dependent on user font-size, if a break isn’t needed there you won’t see it. And you can set where the break is (graceful).

Break-word will break exactly wherever the text gets too long… right at the very char who’s one char too far.

"
You may get long title and the wo
rd will break in the middle.
"

7

Do the extra long entries always contain commas? If so then you could have the server automatically add a space after each comma. You could also do the same with other punctuation symbols if necessary.

8

Hi felgall,

No, the very long entries do not always contain commas. Sometimes it might be a URL for example.

Regardless, forcing spaces after commas would affect numbers, such as:

“1,000”

Of course, we could use regex to only affect commas between 2 non-numeric characters. That’s one option.

Larry

9

Is it necessary to display the entire title? A possible alternative would be to abbreviate the string, like this:

$title = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

if(strlen($string) > 50) {
 $title = substr($title, 0, 30)." (...) ".substr($title, -20);
}

// returns abcdefghijklmnopqrstuvwxyzABCDE (...) QRSTUVWXYZ0123456789
10

C -

Thank you for that suggestion.

For our case, we’d prefer to show the entire title – I’d rather force a non-ideal line break, so that at least the data remains discernable.

Larry