SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dealing with user-supplied long titles with no spaces

    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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestion Stevie.

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

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Is it necessary to display the entire title? A possible alternative would be to abbreviate the string, like this:

    Code php:
    $title = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
     
    if(strlen($string) > 50) {
     $title = substr($title, 0, 30)." (...) ".substr($title, -20);
    }
     
    // returns abcdefghijklmnopqrstuvwxyzABCDE (...) QRSTUVWXYZ0123456789
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  10. #10
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •