EPTI imagine a forum chat progressing like this:
ForumBreakingThug: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Poster #-1: Please stop.
ForumBreakingThug: AAAAAAAAAAAAAAAAAAAAAAAAAAA
Poster: JAEDONG, BRO. THAT GUY IS THE BROEST BROCRAFT PLAYER, EVER, BRO.
ForumBreakingThug: AAAAAAAAAAAAAAAAAAA
Poster #2: YEAH BRO.
ForumBreakingThug: AAAAAAAAAAAAAAAAAAA
Poster #3: God damnit stop breaking the forum.
ForumBreakingThug: AAAAAAAAAAAAAAAAAAA
I have even seen moderators telling people to not break the forum before, even going to the length of editing their posts. It's outrageous, and i'm in full agreeance with them. It is damn annoying to see.
So i've come here to throw some lemons at the Administrators of Team Liquid and offer some quick and easy solutions to preventing this mishap from ever transpiring again. Note: I'm a web developer & designer so i've dealt with this issue a lot of times on websites that have very constrained designs being ruined by user generated content. The dreaded overly long text string. Take your finger off that key.
Solution Numero Uno - CSS Overflow: Auto;
I recommend this one so i'm putting it first. First means best. This has very simple application, the only thing you need to do is alter the template to include a div layer (with this CSS class) inside that table (inside the table of the tables table--table) where the content of the posts reside. You know, so it wraps the users posts. I'm attaching a screenshot to illustrate the results of before & after.
THE CSS CLASS INVOVLED
Some may notice that some of these overflow options are IE only, yeah that's cause the problem of the vertical scrollbar showing no matter what only exists in IE. Go IE!
+ Show Spoiler +
.overFat
{
overflow: auto; overflow-x:auto; overflow-y:hidden; width: 591px; padding-bottom: 10px;
}
{
overflow: auto; overflow-x:auto; overflow-y:hidden; width: 591px; padding-bottom: 10px;
}
Note: The width, including padding, inside the post frame is exactly 591 pixels wide. So I added that to the class.
Broken:
![[image loading]](http://pics.allthatremains.org/main.php/d/7432-1/ihateyousomuch1.gif)
Fixed:
![[image loading]](http://pics.allthatremains.org/main.php/d/7429-1/overflow_ex1.gif)
Pros:
* The forum won't turn into a visual train wreck.
* Only places a scroll bar in the posts that attempt to hurt our precious uniform layout.
* Vertically expands the table & div layer with the users content without adding a vertical scroll bar.
* Does not add a horizontal scroll bar if there is content that has a proper amount of spaces in between characters (words). This only deals with the issue of people holding down one key on the keyboard and creating a 100 character string that pushes out the table and thus the design of the site.
Cons: It's not as an elegant solution in terms of aesthetics, but it'll at least it'll make offenders visually obvious so we can stone them to death.+ Show Spoiler +
why did you click here?
Solution Two -- Server Side (PHP)
Also another very easy thing to apply. Run a function when you print out the users posts and BAM. Wrapping thems long strings of characters into social conformity with the rest of the posts.
PHP CODE
+ Show Spoiler +
function _wordWrap($text) {
$split = explode(" ", $text);
foreach($split as $key=>$value) {
if (strlen($value) > 10) {
$split[$key] = chunk_split($value, 5, "​");
}
}
return implode(" ", $split);
}
$split = explode(" ", $text);
foreach($split as $key=>$value) {
if (strlen($value) > 10) {
$split[$key] = chunk_split($value, 5, "​");
}
}
return implode(" ", $split);
}
To summarize what this accomplishes, all it does is reads a users post for a word longer then 10 characters. If it exceeds 10 characters then it adds a UNICODE character called zero-width space every 5 characters. This unicode character is used to control line breaks most of the time--forcing the browser to recognize a row of 97 consecutive A's(hole) as a word with only 5 letters thus wrapping it properly. But all this without showing that there's spaces in between the string (hence the name zero-width space).
Pros:
* It's transparent, wrapping done on the server-side so the user never is aware of what's going on. The malicious jerks who hold down their keys will probably ban themselves after no longer being able to break the forums.
* Gets the job done.
Cons:
* It's server-side. It adds additional load to the server where it's probably unnecessary, unlike the first option where it's handled on the users end.
* The unicode carries over in copy & pastes. So if there's perhaps a very long link, copying and pasting the link would also carry the unicodes as well. That's not gonna work in a browser!
Last Solution -- I don't like this `1`.
By this point, there's a good chance that I don't like many of you and you don't like me, but i'm still looking out for you guys. This last one is basically a javascript solution. It breaks up the overly long string into smaller chunks and attemtps to wrap them into a defined size. It works aight, but it also lags when there's lots of text to apply this function too. Why the hell am I even posting this solution again? Ah right, I don't like many of you so maybe i'm hoping they'll use it. Pay with lag, you jerks.
JAVASCRIPT
+ Show Spoiler +
function wrapText(text,lengthInPixels,splitter){
try{
if(!text){throw('arg1');}
var result = '';
var line = '';
var parentDiv = document.createElement('div');
var contentDiv = document.createElement('div');
if(!lengthInPixels){lengthInPixels=100;}
if(!splitter){splitter=' ';}
parentDiv.style.width = '0px';
parentDiv.style.height = '0px';
parentDiv.style.overflow = 'hidden';
parentDiv.appendChild(contentDiv);
document.body.appendChild(parentDiv);
for(var i=0; i<text.length; i++){
contentDiv.innerHTML += text.charAt(i);
if(parentDiv.scrollWidth < lengthInPixels){
line += text.charAt(i);
}else{
result += line+splitter;
contentDiv.innerHTML = '';
line = '';
}
}
if(line.length>0){result += line;}
return result;
}
catch(ex){
if(ex=='arg1'){
alert('wrapText: Argument 1 is mandatory.');
return text;
}else{
throw('Unexpected error: '+ex.toString());
}
}
}
try{
if(!text){throw('arg1');}
var result = '';
var line = '';
var parentDiv = document.createElement('div');
var contentDiv = document.createElement('div');
if(!lengthInPixels){lengthInPixels=100;}
if(!splitter){splitter=' ';}
parentDiv.style.width = '0px';
parentDiv.style.height = '0px';
parentDiv.style.overflow = 'hidden';
parentDiv.appendChild(contentDiv);
document.body.appendChild(parentDiv);
for(var i=0; i<text.length; i++){
contentDiv.innerHTML += text.charAt(i);
if(parentDiv.scrollWidth < lengthInPixels){
line += text.charAt(i);
}else{
result += line+splitter;
contentDiv.innerHTML = '';
line = '';
}
}
if(line.length>0){result += line;}
return result;
}
catch(ex){
if(ex=='arg1'){
alert('wrapText: Argument 1 is mandatory.');
return text;
}else{
throw('Unexpected error: '+ex.toString());
}
}
}
Pros: The forum don't break.
Cons: Did you imbeciles really make it this far down the post about this nonsensical crap? Go find another, more interesting, thread.
That concludes this whacky uninformative post. I don't know if it'll be used in any other way other then as a measuring stick of how much you may not like me. But if it is used, glad I could help. TAKE YOUR FINGER OFF THAT KEY. + Show Spoiler +
really did you click here again?
