Limit Width of Content

[pradyunsg]

cf: pypa/pypa-docs-theme#9

Currently, this theme allows for the content to extend to the complete width of the page. This results in some extremely bad UX since essentially there are lines of text stretching across the entire width of your screen.

Limiting the width of the content would create a nicer reading experience.

[pradyunsg]

Ping?

[JulienPalard]

I agree, I though the "limit" was like 70 character per line for a comfortable reading.

I'm no CSS expert but if an em is a character "box" and the ratio of the box in unpredictable, then it's hard to set the line width in term of number of characters.

Look like 35em yields like 75 chars per line with our font, which gives this "thing":
https://screenshots.firefox.com/348ppi53g4wnbizz/docs.python.org

For code blocks readability, I think we should allow for like 80 characters, as code blocks can easily go after 80 chars. An em of 45 gives exactly 80 chars per line in code blocks, but lines of 98 chars (https://screenshots.firefox.com/VGc6S3SUY0sdGo3Q/docs.python.org) which is too much, but better than whole screens, we make diverge the size of text and code blocks to search a nice mid-point.

[methane]

FWIW, https://developers.google.com/web/fundamentals/design-and-ux/responsive/#optimize_text_for_reading

[JulienPalard]

Asked to a few friends (thanks Bruno, Antoine and Florian), they proposed this:

What do you think?

[methane]

It's much better than now.
I feel header width should be limited too, with little larger max-width.

[pradyunsg]

Hi @JulienPalard and @methane!

@JulienPalard that is indeed what I was visualizing. Further, I agree with @methane that even the header should be limited in width, except I imagine that would cause issues with the search bar and navigation.

[JulienPalard]

@Mariatta Any feedback on this?

[freddrake]

On Wed, Dec 20, 2017 at 9:14 AM, Pradyun Gedam ***@***.***> wrote: I agree with @methane <https://github.com/methane> that even the header should be limited in width, except I imagine that would cause issues with the search bar and navigation.

I don't even have a clue how many nights I lost trying to get navigation bars right with the Python docs. Limiting the width of the header is definitely going to exhibit problems, but nothing that won't also be a problem if you use a window that's reasonably sized for the content width. We have that problem now, so I'm not convinced it should be considered a blocker. ​ -Fred

…

-- Fred L. Drake, Jr. <fred at fdrake.net> "A storm broke loose in my mind." --Albert Einstein

[terryjreedy]

I have a wide-screen monitor and " Python » Documentation » The Python Standard Library » 18. Interprocess Communication and Networking » 18.5. asyncio — Asynchronous I/O, event loop, coroutines and tasks »" with embedded language and version boxes (which is a bit ugly) + the | index | modules | next | previous | buttons take up most the width. The search box is on a line by itself, below the gray separater line. I think the language and version boxed are in the wrong order and misplaced -- see mockup below.

If I narrow the window to what would be the content width, the title is wrapped onto the second line, with the search bar, with the separator line moved down. Not nice. A more balance design would give the top line a constant, shorter width.

Python |_version_| >> Documentation |__language__| [quick search] |index|...|prev|

The second line, with the changing title, which should always be above the gray separater, would usually fit the width you want.

The Python Standard Library » 18. Interprocess Communication and Networking » 18.5. asyncio — Asynchronous I/O, event loop, coroutines and tasks »"

Let the browser wrap the second line when necessary. That should not be often, as the chapter and sections titles in this example are both longer than usual. The title line would fit without wrapping even more often if the redundant prefix 'The Python' were omitted.

[Mariatta]

I don't like the empty gray space that is in the screenshot.
And it seems odd that the menu bar extends the entire screen, but the content does not.

[freddrake]

Looks like my earlier comment lost the screen shot from my email:

Agree with you @Mariatta , need one color for the menu and another for the empty space on the right.