[issue10936] Simple CSS fix for left margin at docs.python.org
New submission from Christopher Dunn <cdunn2001@gmail.com>: This is an easy one. When I zoom my browser in (with Ctrl+ or Apple+) the left-side navigation margin gets bigger and bigger, pushing the useful text off the screen. That has bothered me (and anyone else with 40+ year old eyes) ever since the switch to the newest doc format with Sphinx. There is no fix that will satisfy everyone. People with perfect vision might like to zoom out (with Ctrl- or Apple-), since the margin currently gets smaller and smaller. But we need a compromise. The relevant CSS, in default.css, is this: div.bodywrapper { margin: 0 0 0 230px; } If instead it were something like this: div.bodywrapper { margin: 0 0 0 10%; } then at least the navigation margin would stay the same size always. If you really want it to grow and shrink, then you need some sort of javascript control of its position. ---------- assignee: docs@python components: Documentation messages: 126477 nosy: cdunn2001, docs@python priority: normal severity: normal status: open title: Simple CSS fix for left margin at docs.python.org type: behavior versions: Python 2.7, Python 3.1, Python 3.2, Python 3.3 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Changes by Brian Curtin <curtin@acm.org>: ---------- nosy: +ezio.melotti, georg.brandl _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Ezio Melotti <ezio.melotti@gmail.com> added the comment: If the width is specified with a percentage, a min-width should be specified too. In the py3k doc the sidebar can be collapsed though, so I'm not sure it's worth changing this. Georg? ---------- keywords: +easy stage: -> needs patch _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Fred L. Drake, Jr. <fdrake@acm.org> added the comment: As Ezio noted, the coming versions of the Python 3 documentation provide a way to collapse the sidebar completely. Perhaps a min-width should be specified, but I'm not convinced that's a good idea. The sidebar problem is fairly significant, and the collapsing sidebar alone isn't sufficient. The sidebar is useful since it's the only overall navigation structure (as opposed to the direct links embedded in the content), but there's no real need to ensure it gets "enough" width. I'd rather see a simple adjustment as recommended by Christopher Dunn. I appreciate Ezio's in making the sidebar collapsible, but I think that's just the first step. The sidebar is certainly the most contentious element of the new design, and the most difficult to get right. ---------- nosy: +fdrake _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Ezio Melotti <ezio.melotti@gmail.com> added the comment: The min-width is necessary in case the CSS is changed to resize the sidebar dynamically. If it gets too narrow it would start getting unusable and the text will start overflowing. Possible alternatives are: 1) use a percentage and min-width; 2) like 1) but also collapse the sidebar automatically when its width gets smaller than the min-width; 3) leave a fixed width but make the sidebar mouse-resizable (that will conflict with the collapsibility though and is less trivial to do); ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
On Thu, Jan 20, 2011 at 11:18 PM, Ezio Melotti <report@bugs.python.org> wrote:
If it gets too narrow it would start getting unusable and the text will start overflowing.
If someone is zooming that much, it's because they really need the size of the text more than anything (trust me; I've tried to work while my eyes were dilated; size is *everything* at that point). The worst thing to do in such situations is to get in the way of the browser's normal behavior.
Ezio Melotti <ezio.melotti@gmail.com> added the comment: I did some tests using 20% instead of 230px and found the following problems: 1) while zooming, even if the width of the sidebar doesn't change, the font size does, overflowing from the sidebar; 2) min-width can't be used because the width of the sidebar is given by the margin-left of the bodywrapper, and there's no min-margin-left property that can be used instead; The font size can probably be changed to fit the width of the sidebar, but the min-width problem remains (I'm thinking about small screens -- e.g. smartphones -- where the sidebar would end up having a width of ~130-160px (I haven't (yet) tested it there though)). ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Christopher Dunn <cdunn2001@gmail.com> added the comment: I see what @ezio means about the apparent overflow when the bodywrapper left margin is at 20%. (It's not really overflow, since the sidebar is actually the width of the screen.) How about this change to basic.css? 44 div.sphinxsidebar { 45 float: left; 46 width: 20%; /* was 230px */ 47 margin-left: -100%; 48 font-size: 90%; 49 } It looks pretty good to me. The only thing that overflows is the search-input box. CSS for that is set in both basic.css and default.css (which takes precedence) as: 104 div.sphinxsidebar input { 105 border: 1px solid #98dbcc; 106 font-family: sans-serif; 107 font-size: 1em; 108 max-width: 100%; 109 } I added line 108 (max-width). And now everything looks decent when zoomed in. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Christopher Dunn <cdunn2001@gmail.com> added the comment: For narrow-width screens, there really shouldn't be a sidebar. Maybe a dynamic element would be better. Could it unhide and overlap the main body with a click or mouse-over? Then the main body could take the full screen width. Just an idea. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Fred L. Drake, Jr. <fdrake@acm.org> added the comment: On Fri, Jan 21, 2011 at 2:58 AM, Christopher Dunn <report@bugs.python.org> wrote:
For narrow-width screens, there really shouldn't be a sidebar. Maybe a dynamic element would be better.
Right. I'd be in favor of removing the sidebar and having a pop-out ToC navigator of some sort. Most of the time, most of us are looking at the content, not at how to navigate the content. Spending so much screen real-estate on navigation is painful. Large, hi-res screens just aren't *that* cheap yet. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Éric Araujo <merwok@netwok.org> added the comment: Also, laptops and handheld devices have a limited screen size. -1 on a pop-up, for obvious usability reasons. ---------- nosy: +eric.araujo _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Christopher Dunn <cdunn2001@gmail.com> added the comment: @eric.araujo: Not a 'pop-up', that you would have to click to close. But something dynamic, based on mouse location. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Christopher Dunn <cdunn2001@gmail.com> added the comment: I was just trying to help fix the CSS, and I think I've done that. If we're reconsidering the behavior of the nav sidebar, then I'd like to point out that if you're far down the page, the sidebar is blank to your right. From a usability point of view, it's already broken. It was a neat idea, but a ToC for the page would serve the purpose better. My monitor is quite large, and rotated 90 degrees, so it's narrow and tall. A web-page can be infinitely long, but its practical width is limited to the user's screen, which is different for every user. That's why HTML was designed the way it is, with auto-word-wrap. When you have a bunch of stuff that you want to fit within a window, a sidebar makes more sense. For Python docs, I'd vote to drop it altogether, as attractive-looking as it is. But if you really want it, give it its own vertical scrollbar, so that a relevant portion is always visible. Then people can talk about dynamic controls. That's just my opinion. I created this bug because, when I zoon, the sidebar consumes most of my screen with no visible text. It's such a huge problem that I was afraid someone had already submitted this. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Ezio Melotti <ezio.melotti@gmail.com> added the comment: There's #4965 for that. Last time I tried there was some problem with it, maybe I'll try again in future. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Changes by Ezio Melotti <ezio.melotti@gmail.com>: ---------- versions: +Python 3.4 -Python 3.1 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue10936> _______________________________________
Chirag Garg <chrggrg2018@gmail.com> added the comment: Yes, it is creating a vision problem as the text is creating a problem. And the CSS script of @cdunn2001 is correct also there is a need to change the navigation bar. ---------- nosy: +codevil_2o _______________________________________ Python tracker <report@bugs.python.org> <https://bugs.python.org/issue10936> _______________________________________
Change by Irit Katriel <iritkatriel@yahoo.com>: ---------- versions: +Python 3.10, Python 3.8, Python 3.9 -Python 2.7, Python 3.2, Python 3.3, Python 3.4 _______________________________________ Python tracker <report@bugs.python.org> <https://bugs.python.org/issue10936> _______________________________________
participants (8)
-
Brian Curtin -
Chirag Garg
-
Christopher Dunn
-
Ezio Melotti
-
Fred Drake -
Fred L. Drake, Jr.
-
Irit Katriel
-
Éric Araujo