🔒 Locked

[web] Web Design Help

Started by Extrarius Oct 20, 2005 at 6:51 PM 4 replies 700+ views

Original Post

Oct 20, 2005 at 6:51 PM

I'm working on the scripts for InaneRavings.com and while I know how I want it to look, I need some help overcoming some problems (using XHTML 1.0 Strict). For example, with the current design that you can see on the page, if there is a word that is longer than the text space is wide, it will stretch that one part of the text space and make the whole thing look really ugly (you can see this if you shrink your IE down so the email address{longest 'word'} is wider than the 80% width would make the text border div). This is fine for the static content, because I can make sure there aren't any ridiculously long words, but I plan on adapting this to a forum and I can't have one post ruining the whole layout. One option would be to simply make each post a different box, but that one post can still add horizontal scrollbars to a whole thread which is just as undesirable. Also, if you put a long 'word' in a topic, it could throw the topic list out of alignment even if I separated them into different DIV tags and it would look horrible. Is there a away to fix this besides just guessing how long things will be and makeing a script chop words that are too long? (then what about URLs, etc..?) I'll post more as problems come up =-) [Edited by - Extrarius on October 21, 2005 11:39:14 AM]

Colin Jeanne

Oct 21, 2005 at 1:23 AM

Have you looked into the overflow CSS style? With this style you can cause individual divs to have scrollbars if they are too long

Extrarius

Oct 21, 2005 at 6:52 AM

I've heard about it, but I've also seen reports that it doesn't work in most browsers except for the scrollbar values, and I'd rather not because it would make forum posts look quite bad. Is there now way to force word wrapping even if there is no whitespace to break on?

Sander

Oct 21, 2005 at 7:05 AM

Since it's going to be for a forum, you could do the wrapping server-side as well. Break up words that are too long and insert hairspaces in between (hairspaces are usually invisible, but allow the browser to break off the word if it's too long). Trick part would be a good algo where to put those hairspaces.

I don't know a way to force a client to break off words through CSS or something like that (forcing it not to break is possible, forcing breaks not AFAIK).

Extrarius

Oct 21, 2005 at 5:21 PM

The problem with inserting anything in posts is that it will mess up URLs. Also, there really isn't any way to determine what is 'too long' because different people have different text settings(and all the site's font sizes will be relative), resolutions, etc.
Interestingly, it appears that neither GameDev nor PHPBB address this problem.

[Edited by - Extrarius on October 21, 2005 5:21:04 PM]

Extrarius

Oct 23, 2005 at 1:43 PM

I found a solution, but it's CSS3: Text Wrapping
It seems IE supports "word-wrap: break-word;" already
Is anybody willing to try it on their browser?

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.