Hacker News Reader

Comment by jcr | Hacker News Reader

graycat, could you dig through your browser history and email me the given link (email in profile)? I know you were being kind and intentionally avoiding revealing the specific post.

In most cases, lines that are so long that they make a mess of the usual HN display are handled to prevent making browsers need to do side scrolling. I have a hunch that I know what happened but I'd like to look at the example.

http://paulgraham.com/gfaq.html > "Why is the text on your site so narrow? It wastes screen space."

> "The aim of web design is not to use all available screen space. It is legibility. Text is most legible with no more than 70 characters per line."

View on HN

The thread was

http://www.polygon.com/2014/7/15/5897811/ninja-pizza-girl-te...

My post was

https://news.ycombinator.com/item?id=8045788

That post and that thread have a lot of lines with 161 or so characters.

As promised, I looked into it and did some testing. There's an old trolling tactic of posting something excessively long (wide, actually) so the browser expands the width of page beyond the width of the screen. The result is a side-scrolling page that is difficult to read. The code behind HN and most forum software have detection and mitigation for these types of side-scrolling attacks. If you had found something that was successfully blowing out the width of the page into a side-scroller then that would be a HN bug worth reporting.

The screenshot below is with a slightly older Firefox version 18.0.2 using a newly created user profile, without any plug-ins or add-ons, so everything is at default settings. The menu colors and green-on-black text colors are due to how the underlying graphics toolkit (gtk) used by firefox is configured on the system.

As you can tell from the image size, the display is running at 1920x1080 resolution, and although it doesn't matter, the screen is 18.5 inch diagonal (408mm x 230mm).

http://www.designtools.org/pix/graycat01.png

The longest line displayed in the image is 250 characters when using default browser settings and font (typeface) sizes. If you increase the font size, you decrease the number of characters per line. For example this image has 137 characters per line.

http://www.designtools.org/pix/graycat01a.png

Setting "Preferences -> Content -> Fonts & Colors -> Advanced Button -> Minimum Font Size" can save your eyesight at the cost of making some badly written websites look worse than usual.

If the default display is still too wide for your tastes when using a larger font size, you have two options; (1) reduce the width of your browser window, or (2) write a browser plugin or addon to reformat everything to the way you want it.

HN allows for posting pre-formatted text in comments for when someone wants to post source code. The reason is the typical re-wrapping of text in a browser would make a real mess of source code formatting. To post pre-formatted text (code) to HN, just insert two leading spaces at the start of the pre-formatted lines. Unfortunately, this feature often gets accidentally misused for things like quotes. An example of misuse is in your own post:

https://news.ycombinator.com/item?id=8042618

You indented the URL to businessinsider.com with spaces, so it was turned into pre-formatted text and was not rendered as a clickable URL.

If you're curious about formatting options on HN, they're listed here:

http://news.ycombinator.com/formatdoc

Since HN does not re-wrap the pre-formatted text, it can be wider than the page, and would normally make a side-scrolling display, but by using CSS, only the pre-formatted portion has a horizontal scroll bar. In the image below, you can see how these "too-wide" lines are in their own little scrollable boxes.

http://www.designtools.org/pix/graycat02.png

Side-scrolling little boxes of text might be annoying, but it's better than making a mess of pre-formatted source code, so it's supposed to work this way.

If for some reason you're not getting the little scrollable boxes for the excessively long pre-formatted lines, then either your browser is much older than mine (unlikely) or some configuration, plugin, or addon you're using is making a mess of things. You can test this by creating a new user profile in firefox.

You mentioned ms-office, so it seems you're still running ms-windows. I think firefox on ms-windows creates a startup link to its profile manager on installation, but if I'm wrong, just use the command line:

  C:/> firefox -ProfileManager

If you're still seeing excessively long pre-formatted lines without being in little scrollable boxes, then you'll need to update your web browser.

If you're having trouble with something else (and I've totally misunderstood you), then please post link to a screen capture image of what you're seeing, or you could email it to me if you prefer.

Thanks for the detailed response.

I didn't really think that the lines with 161 characters were pre-formatted.

Most of the pages at HN look fine on my version of Firefox -- 27.0.1.

I have understood and used the HN feature for pre-formatted simple text, say, programming language source code, and I'm sorry about indenting the URL. I'll try not to do that in the future.

I would have expected that if a formatted page is too wide for the Firefox screen window, then there would be horizontal scroll bars at the bottom of the HN window in Firefox. Looking at some CSS documentation, apparently there is a CSS keyword overflow-x which controls, at least for a DIV, if there are horizontal scroll bars.

In the HTML/CSS of the Web pages I've written, I said nothing about overflow-x and get scroll bars when the data to be displayed is larger than the associated Firefox window. I don't know why that isn't standard on Web pages.

Thanks for your help.

Reply on news.ycombinator.com