Code is less than 80 chars wide
Opened this issue · 13 comments
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.
I agree. In the meantime, several of the tutorials look kind of skewed.
I see this problem with most of the tutorials. I'm using Firefox on windows 7. Would this pull request fix the problem?
#33
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.
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.
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.
Sounds like a complicated way to avoid <pre></pre>
.
@sshine Avoid <pre>
? The code is already contained within a <pre>
. The problem is that its ancestor is limiting its width.
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.
Does adambard/learnxinyminutes-docs#2611 also describe behavior from this issue or is it a separate thing?
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?