Number of Characters per HN Line | Hacker News Reader

Number of Characters per HN Line

4 pointsgraycat8 comments

On one page at HN today, I saw a line with 161 characters. Traditionally in formatted text, 161 is way more than usual. In Firefox on my screen, by the time I get the magnification small enough to show the whole line, the characters are way too small to read. Really, for the whole tread, I can't read it.

Please limit the number of characters per line to something easy to read, say, 60. Thanks.

View on HN

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."

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.

No disrespect, but surely that's your problem? Having a widescreen monitor, I appreciate that HN (mostly) takes advantage of it, instead of having most of the screen sitting empty while a relatively narrow colums of text occupies the middle. I find this easy to read and having long lines reduces the need to scroll as much.

If it's not working for you, perhaps a restyling plugin like Stylebot for Chrome or something similar would allow you to adjust the format to your taste.

> No disrespect, but surely that's your problem?

Not really: I have what is called a 17" screen. Such a screen size may still be common on desktop computers and has to be common on laptop computers. For tablets and smart phones, the screen widths are much narrower.

My solution is to copy the text to the clipboard, copy it into my favorite editor, and use a macro I wrote that reflows lines but honors the existing left margins.

The screen I have was a relatively large screen when I bought it. But, sure, the next time I buy a computer, and, thus, put up with all the struggle of getting all my software running and configured again, e.g., get the 2003 version of Microsoft Office running with all its many updates, no doubt I will get a wide screen.

Still, there is an issue: Readability. E.g., long newspapers used pages, like screens, so wide that they could easily have had 161 characters per line but, still, stayed with narrow columns, supposedly for 'readability'. There are suggestions that a narrow column permits less left to right eye movement.

On readability, in

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

below in this thread is

> "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."

I had a 17" screen until last year. I can't say I recall this being a problem, but then I consider layout of plain text something that should ultimately be managed at client side.

Some people visit HN on mobile. A single unwrapped lne will destroy the entire page for all of those people.

Reply on news.ycombinator.com