Code is less than 80 chars wide

[rgson]

The content area's width of 840px is not sufficiently wide to accommodate 80 characters per line when using Chrome on a completely fresh install of Linux Mint 17.3. Specifically, only 70 characters are displayed per line using this setup.

The same effect is also observed using Chromium, and on Kubuntu 15.10. The issue is thus likely seen in other Chromium-based browsers and on other Ubuntu-based distros as well.

The problem seems to arise due to a slightly larger letter spacing when using the aforementioned combinations, perhaps due to differences in the underlying font rendering engines.

The simplest solution would be to increase the width of the content container (to approximately 950px). Another alternative could be to reduce the letter spacing in the code section (by approximately 0.013em). However, both of these solutions would also affect other platforms where this issue isn't present, perhaps making it somewhat less straight-forward depending on the project's priorities.

[NPrescott]

Not limited to Chrome/Chromium on Ubuntu. I can report the same for Firefox 45.0.2 on OS X:

I think it would make sense to up the container width, there's lots of horizontal whitespace to work with. I can confirm 950px fixes the issue on my end.

[sshine]

I agree. In the meantime, several of the tutorials look kind of skewed.

[robochat]

I see this problem with most of the tutorials. I'm using Firefox on windows 7. Would this pull request fix the problem?
#33

[rgson]

Seems the current width is seldom quite right, then, seeing as we currently have reports of this happening in both Chrome and Firefox on Linux, OS X and Windows.

@robochat #33 may well fix it in many cases, though the new number also seems rather arbitrary/unreliable. Unless I'm mistaken, em is determined by the height of the font (and not its width). If that's the case then 60 em is still not guaranteed to be wide enough.

The ch unit could possibly be used to get some level of guarantee. It's supposed to be the actual width of the character 0. In a monospace font it should thus be the actual width of all characters. However, there seems to be some compatibility issues with IE (http://caniuse.com/#feat=ch-unit). It'd also have to be applied to the code section of the page instead of to .container in order for it to measure the correct font.

Another alternative would be Javascript; to programmatically measure the width of a character and change the width of the code section to hold 80 of them. A reasonable default would of course be kept in the CSS as fallback.

[robochat]

Yes em is determined by the height of the font but realistically it seems that this value of 60em or one like it will work for most font sizes and font rendering engines. It just needs to work more reliably than it does at the moment. This seems much simpler than the other two solutions although they could be tried if this doesn't work. I guess the key point would be to test this fix on a range of systems.

[rgson]

Absolutely, I totally agree. In my opinion, any change that improves the situation is a step in the right direction, even if it may not work for all OS/browser combinations. Perhaps I should've made that clearer in my last reply. My intent was just to mention the potential for remaining issues - I'd nonetheless like to see #33 accepted.

[sshine]

Sounds like a complicated way to avoid <pre></pre>.

[rgson]

@sshine Avoid <pre>? The code is already contained within a <pre>. The problem is that its ancestor is limiting its width.

[samcv]

#33 Has been merged but learnxinyminutes.com hasn't been updated with the changes. If I generate the page locally it generates fine, but if I revert #33 then it renders just like learnxinyminutes.com is. @adambard ?

[robochat]

I no longer see this problem when I view the site on safari or firefox. So I'm not sure why it is not working for you. Actually, I think that the problem with the red tutorial is that the lines are longer than 80 characters.

[Menelion]

Does adambard/learnxinyminutes-docs#2611 also describe behavior from this issue or is it a separate thing?

[rgson]

@Oire Seems like it's the same problem, but a different proposed solution.

[mrwest808]

Not sure if this belongs in a separate issue. I often find myself trying to read learnxinyminutes.com on my mobile, and with the lines wrapping it's quite hard (especially in portrait mode).

One potential solution could be to avoid line wrapping and let content overflow on the x-axis, similar to how inline code blocks behave inside Markdown files on GitHub? This could be solved by adding a CSS rule like below.

.highlight pre {
    overflow-x: auto;
    white-space: pre;
}

Perhaps I'm missing something essential here, any reason this would be a bad idea?