-
What version of
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Please note that I edited the css that has been generated by a production side. This is not perfect by any means and should only illustrate what I mean |
Beta Was this translation helpful? Give feedback.
-
|
Hey @micartey! The default column width is chosen to have a reasonable line length (a.k.a measure) for comfortable reading of body text. In other words, it’s optimised such that when a reader needs to scan back from the end of one line in a paragraph to the start of the next, the distance is comfortable enough for the reading experience to flow. (This is always a balancing act with typography — too narrow and these jumps are too frequent, too wide and these jumps are harder for the eye to track.) In your screenshot the content is admittedly mostly not text, and there are certainly examples like this that can benefit from a wider width. This is supported by setting the :root {
--sl-content-width: 70rem;
}Even then, I still restricted body text to not use all that space to avoid very long lines that are uncomfortable to read (see https://starlight-examples.netlify.app/examples/custom-title-link/ for an example): .sl-markdown-content :is(p, li) {
max-width: 45rem;
}Depending on your content, that might be too simple and some more styles are needed to handle different circumstances, but hopefully that can point you in the right direction! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you this helps a lot! |
Beta Was this translation helpful? Give feedback.
Hey @micartey! The default column width is chosen to have a reasonable line length (a.k.a measure) for comfortable reading of body text. In other words, it’s optimised such that when a reader needs to scan back from the end of one line in a paragraph to the start of the next, the distance is comfortable enough for the reading experience to flow. (This is always a balancing act with typography — too narrow and these jumps are too frequent, too wide and these jumps are harder for the eye to track.)
In your screenshot the content is admittedly mostly not text, and there are certainly examples like this that can benefit from a wider width.
This is supported by setting the
--sl-content-widthc…