Scroll bar in posts

[Joker™]

SMF - 2.0.2
OS - Mac
Browser - Chrome 22, Firefox 15

Make a post with long content and come back. There is a scroll bar in post display.

For e.g this post.


Try this content to post

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[NanoSector]

Wasn't this already reported a while ago?

Anyways I don't think we can break up in the middle of a word. That's stupid IMO.

[Joker™]

Wasn't this already reported a while ago?

Not aware of it .

Anyways I don't think we can break up in the middle of a word. That's stupid IMO.

Sounds fine, but scroll bar seems more stupid IMO.

[mashby]

The amount of ! characters is really stupid though. How many real words have that many characters in them?

[Joker™]

The amount of ! characters is really stupid though.

How many real words have that many characters in them?

Can't think of any right now.

[emanuele]

SMF already cuts "log words" (if set up), though a series of "!" is not a "word".

[Antechinus]

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Antechinus]

As you can see above, this has been standard behaviour for ages. The reason is so that the entire page will not break if oversized content is present in one post (be that an oversized image, or ridculous text with no admin settings to break long strings). IOW, I'd suggest it is not a bug per se.

[Spuds]

I was just looking at the fixLongWords code, and what Ema said is the answer, the function only breaks on word characters ( letters numbers and  _ ) so you can type in a long string of many characters and have a scroll bar.

The fixLongWords function is also a bit slow, with a positive look ahead its a good amount of work to find the long words since its going to stop and check quite often.

Code Select Expand

$data = preg_replace('~(?<=[>;:!? ' . $non_breaking_space . '\]()\n]|^)([\w' . ($context['utf8'] ? '\pL' : '') . '\.]{' . $modSettings['fixLongWords'] . ',})~e' . ($context['utf8'] ? 'u' : ''),
'preg_replace(\'/(.{' . ($modSettings['fixLongWords'] - 1) . '})/' . ($context['utf8'] ? 'u' : '') . '\', \'\\$1< >\', \'$1\')',
$data);


I think that could be changed to be faster, abet it might be more error prone that what we currently have, not sure.  But I question if we even need that function any longer, why not fix it with css word-wrap / overflow-wrap which is kind of what that function is doing.  If a browser does not support that (even ie7 does) then you just get the scrollbar .. just seems like a lot of work to break some long strings but not all ....

[Antechinus]

Good point. I'd be fine with a css solution.

[NanoSector]

* Yoshi2889 coughs

Looks like some browsers like to ignore the current way and do it themselves. No I don't have word wrapping on in Chrome.

[Spuds]

Odd It does not wrap from me in Chrome 22 on win7 .... but anyway more proof that doing it server side seems very dated

[emanuele]

It is probably something mobile-related.
I tested this topic with the android emulator (don't ask me what browser I have no idea ), and Ant's message is overflow:hidden without scrollbars.

[NanoSector]

The stock Android browser is Chrome-based, AFAIK. I used Chrome from the Android Market/GPlay

Spuds: Neither does it for me on the same platform+browser, must be mobile related as emanuele said.

[Antechinus]

Would make sense to force it on mobile by default. Sideways scrolling on mobile is a nuisance and they'd want to avoid it.

I was looking around Smashing the other day and they had a nice tip about this sort of thing. I already knew about word-wrap of course, but it wont break url's in some browsers. Apparently there's a way around it.

The New

Peter Karlstein asks:

    What are the most useful CSS tips, techniques, tricks that you've learned recently? Can you present a couple of your recent "Aha!" moments with CSS?

Messing around with the latest flexbox stuff (as I did above) was pretty fun, although not really useful quite yet.

In the past few months I've moved entirely to using Compass, which has been tremendously useful. Over time I've grown tired of the repetitive and finicky things in CSS. But Sass and Compass make authoring CSS fun again for me.

As far as little CSS "tricks", I've had to use this one several times lately. Essentially, if somehow some super long string of text gets into a container with no spaces, it will break out of the container in a super awkward overlapping fashion. This is most common with user-generated content and users pasting in URL's. I like applying this class to any user-generated text containers:

Code Select Expand

.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

[Antechinus]

Just noting that this seems to work if added to .inner in index.css, so it looks like we can ditch the php monstrosity.

Code Select Expand

/* Experimental text string and url breaking. */
.inner {
word-break: hyphenate;
word-wrap: break-word;
}

The extra BS in the Smashing example is unnecessary (some is invalid) and does not give any improvement.

Have tested in FF, Chrome and IE9 and IE8. May not work in Opera (have not tested Opera yet).

ETA: Works in Opera too. Amazing.

[Antechinus]

Just edited the code above for the third time. I think this is a winner. Seems to work in all browsers tested so far. May need to be added to some other classes too (can't remember if recent posts pages use .inner or not) but that's easy. Will need more testing though.

[Spuds]

Just added that to my test site, so far looks very good ... and breaks up that long sting of !!!!! quite well

[Antechinus]

Yeah beats making parse_bcc worse than absolutely necessary. It's always going to be horrible anyway.

[Antechinus]

NOTE: It also needs to be added to the .list_posts class to deal with topic summaries, etc. Cleanest way to do it is this:

Find:

Code Select Expand

.inner {
padding: 6px 12px 2px 0;
margin: 0 12px 0 0;
border-top: 1px solid #ccc;
min-height: 80px;
}

Replace:

Code Select Expand

.inner {
padding: 6px 12px 2px 0;
margin: 0 12px 0 0;
border-top: 1px solid #ccc;
min-height: 80px;
word-break: hyphenate;
word-wrap: break-word;
}

Find:

Code Select Expand

.list_posts {
border-top: 1px solid #ccc;
box-shadow: 0 1px 0 #fff inset;
padding-top: 12px;
margin: 0;
overflow: auto;
}

Replace:

Code Select Expand

.list_posts {
border-top: 1px solid #ccc;
box-shadow: 0 1px 0 #fff inset;
padding-top: 12px;
margin: 0;
overflow: auto;
word-break: hyphenate;
word-wrap: break-word;
}