Closed cippaciong closed 2 months ago
Thanks for filing the issue, @cippaciong.
TL;DR: We can address readability concerns and personal line-length preferences by doing the following:
Details (for those who care)...
Some people will inevitably feel that the new markdown container width looks/feels too narrow. The criticism isn't necessarily wrong. All of the Docsify alternatives I tested have line lengths greater than 80 (see below). Every one of those alternatives also renders both left and right sidebars which help fill the horizontal space. Docsify, by comparison, will have a narrower overall content width which some people may not care for. There are a few additional things we can do to try and reduce (but not eliminate) these concerns:
Increase the default font size in Docsify's default themes to 16px. Larger font sizes requires a wider markdown container to fit the same number of characters per line. Consider how font size affects the markdown container size when using Source Sans Pro (the web font used in Docsify's vue.css
theme):
Source Sans Pro (used in vue.css)
Consider alternative fonts that are more visually appealing (wider) at the desired line length. Consider how switching to San Francisco (the default sans-serif font on macOS) affects the markdown container size compared to Source Sans Pro (above):
San Francisco (macOS)
For comparison, here are the default line length, font size, and content container width values from a few Docsify alternatives:
Finally, here are the line lengths using Docsify's vue.css
theme and the previous max-width value of 800px
:
Source Sans Pro (used in vue.css)
Based on these numbers, reverting the max-width to 800px
(#1017) is not our best option. I think the best option is a font-relative max-width value that falls somewhere between 80-90 characters per line @ 16px.
Thanks @cippaciong for identifying this issue and @jhildenbiddle for the detailed analysis and possible options etc.
In addition to numerical line lengths I think we could consider a few other aspects as well. For example, many folks have grown accustomed to the information density of the current 80% of screen width currently in Docsify (and possibly manually adjust their Browser windows to their liking). In addition, with digital text there are also other aspects coming into play such as the need to scroll to read and how much scrolling is involved etc.
Here is a helpful article that highlights these additional aspects for reference: https://www.roboleary.net/webdev/2023/03/10/ideal-line-length-digital-text.html
I don't think there is an ideal answer to a revised Markdown section width for Docsify, and the current 80% of screen has a lot of readability issues. 800px width may not be ideal either, but given the display of digital text and related aspects, somewhere around there some good candidates might still exist.
This issue has been addressed by PR #2469. The changes will be available when Docsify v5 is released.
Once v5 is release, this issue can be resolved by modifying the following theme property:
:root {
--content-max-width: 72ch;
}
Feature request
Reset .
markdown-section
max-width
to800px
or a similar valueProblem or desire
Docsify used to limit articles
max-width
to800px
but this was changed to80%
in #1017, claiming that such value would look better on wider screens.As already mentioned by @jhildenbiddle in a comment to that PR, I think this was a mistake since that would negatively affect the readability of the content.
IMO that change lead to two regressions:
80%
would introduce unwanted margins in that scenario. See for example this comment and #1273Proposal
Restore .markdown-section max-width to
800px
or a similar value.Implementation
I'm not an expert, but I should manage to submit a PR if maintainers consider this change acceptable