Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Center align docs (with margins) for better readability on high-res displays #3171

Open
1 of 5 tasks
aryanprince opened this issue Dec 28, 2024 · 0 comments
Open
1 of 5 tasks

Comments

@aryanprince
Copy link

I'm submitting a...

  • Regression
  • Bug report
  • Feature request
  • Documentation issue or request (new chapter/page)
  • Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

Let me start off by saying that I opened this issue only because I struggled to read through the docs when trying to learn NestJS, because of the lack of margins entirely on larger viewports. And I believe I may not be alone here.

The NestJS docs website takes up the entire width on high-res displays (4K and higher for example) without any margins on the sides. This results in very long lines (~350 characters per line) which makes it much harder to read compared to 80-90 characters per line for Next.js docs. Quick search online recommends anything less than 100 characters per line for it to be readable (source).

Currently what I do as a temporary fix is to either resize their browser window to take up 50% width of my screen, or zoom in to improve the reading experience (but this makes text larger than I prefer). But I would ideally like to go through the docs with full focus by just reading it in a full-screen window.

Expected behavior

The docs should have proper margins/max-width on high-res displays, similar to other modern docs sites. Looking at some examples, I see 3 kinds of docs layouts (screenshots below):

  1. Centered content + centered margins on both sides like Next.js, Anthropic (uses Mintlify), and Hono (uses VitePress). This is the best approach in my opinion.
  2. Centered content but sidebars aligned to screen edges like AdonisJS
  3. Left-aligned content with a set max-width like Laravel docs (though centered content is easier to read)

All these approaches make it much easier and nicer experience to read through the content - and keeping the width manageable (15-20 words per line in examples above instead of NestJS' current ~45 words per line).

Minimal reproduction of the problem with instructions

  1. Open docs.nestjs.com on a high-res display (like 1440p/4K). Can replicate the same behaviour by zooming out on a smaller resolution monitor as well.
  2. Notice how the content spans the entire width without margins
  3. Compare with Next.js docs or AdonisJS docs to see the difference in readability

What is the motivation / use case for changing the behavior?

Most modern docs sites have max-width/margins for better readability on high-res displays. This is a widely accepted practice in technical documentation as it improves the reading experience significantly.

Environment

Others:

  • Tested on 4K (3840x2160) and 1440p (2560x1440) displays
  • Affects all major browsers (Chrome, Firefox, Safari)
  • Issue is specifically noticeable on high-res displays

Screenshots

Here are some screenshots of some other modern docs sites that have centered layouts:

Next.js (centered content + centered sidebars)

Next js

Anthropic (centered content + centered sidebars)

Anthropic (Mintlify)

Hono (centered content + centered sidebars)

Hono (VitePress)

AdonisJS (centered content + centered sidebars)

AdonisJS

Laravel (left aligned content + left aligned sidebar)

CleanShot 2024-12-28 at 23 02 43

NestJS (spans entire display width)

NestJS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant