Find a way to make text more readable on wide screens (add maxwidth)

[sypets]

Update:

• See also pending PR: #100
• See Project "Improve Readability" for all related issues and PR

Problem

Currently, the docs use the entire width. This makes longer blocks of text not easy to read on wide screens.

Example: https://docs.typo3.org/typo3cms/ExtbaseFluidBook/3-BlogExample/Index.html

Solutions

Solution 1: Limit the width of the main text section.

Some examples:

• blogs often limit width of main text, e.g. https://www.copyblogger.com/scannable-content/
• readthedocs also does it: https://flowframework.readthedocs.io/en/latest/TheDefinitiveGuide/PartI/EssentialDesignPatterns.html

[DanielSiepmann]

This should only be a setting as we forked the read the docs theme where this is already an setting.

[marble]

There is an easy solution: Adjust the browser window to the size you like. With our theme YOU decide what you need yourself.

[sypets]

IMHO, telling people to resize their browser is not a solution. IMHO, readability is an important criteria for the success of the docs. If you want people to use your website, you should make it usable (improve usability). If you want people to read your website, you should make it well readable (improve readability: not just the content, but also the formatting and everything else).

Resources that support the suggestion to limit the width of content:

general readability (readability, line length, etc.):

• https://designshack.net/articles/mobile/the-importance-of-designing-for-readability/

line length

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”

http://webtypography.net/2.1.2

---

"for a single-column design should ideally be two to three alphabets long, around 40 to 80 characters. If the lines are too short then the text becomes disjointed, if they are too long the content loses rhythm as the reader searches for the start of each line. Many typographers consider the perfect measure to be 65 characters."

https://spyrestudios.com/10-great-tips-for-improving-your-web-typography/

---

"Line length matters. While people can read faster with longer text lines, they actually prefer shorter lines of texts of 45 to 72 characters. Make sure your lines wrap at this point."

https://www.intechnic.com/blog/best-practices-to-improve-text-readability-for-optimal-user-experience/

---

Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.

we suggest keeping your text within the range of 50-75 characters per line. .. Too short lines also tend to stress readers .... It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).

Baymard Institute: "Readability: the Optimal Line Length"

---

If you make your lines much longer, you might scare your visitors off. Besides, long lines make it more difficult to focus and to correctly jump from one line to the next.

Usabilla: 8 Tips for Better Readability

fontsize:

• https://ia.net/topics/100e2r

typography:

• https://tubikstudio.com/typography-in-ui-guide-for-beginners/
• https://spyrestudios.com/10-great-tips-for-improving-your-web-typography/

Examples of documentation / blog articles that are well readable and restrict the width:

documentation

• developers.google.com: https://developers.google.com/web/tools/chrome-devtools/speed/get-started
• Symfony documentation: https://symfony.com/doc/current/event_dispatcher.html
• readthedocs in general: https://flowframework.readthedocs.io/en/latest/
• bitbucket: https://www.atlassian.com/git/tutorials/making-a-pull-request
• Docker: https://docs.docker.com/get-started/

blogs:

• typo3worx: https://typo3worx.eu/2019/01/symfony-console-in-typo3/

[DavidBruchmann]

|------------------------- 66 ----------------------------------|  
“Anything from 45 to 75 characters is widely regarded as a satis-  
factory length of line for a single-column page set in a serifed  
text face in a text size. The 66-character line (counting both  
letters and spaces) is widely regarded as ideal. For multiple  
column work, a better average is 40 to 50 characters.”  

|-------------------------------- 80 -----------------------------------------|  
“Anything from 45 to 75 characters is widely regarded as a satisfactory length  
of line for a single-column page set in a serifed text face in a text size. The  
66-character line (counting both  letters and spaces) is widely regarded as  
ideal. For multiple column work, a better average is 40 to 50 characters.”  

|------------- 40 --------------------|  |------------- 40 --------------------|  
“Anything from 45 to 75 characters is    “Anything from 45 to 75 characters is  
widely regarded as a satisfactory        widely regarded as a satisfactory  
length of line for a single-column       length of line for a single-column  
page set in a serifed text face in a     page set in a serifed text face in a  
text size. The 66-character line         text size. The 66-character line  
(counting both  letters and spaces) is   (counting both  letters and spaces) is  
widely regarded as ideal. For multiple   widely regarded as ideal. For multiple  
column work, a better average is 40 to   column work, a better average is 40 to  
50 characters.”                          50 characters.”  

|---------------- 45 ----------------------|  |---------------- 45 ----------------------|  
“Anything from 45 to 75 characters is widely  “Anything from 45 to 75 characters is widely  
regarded as a satisfactory length of line     regarded as a satisfactory length of line  
for a single-column page set in a serifed     for a single-column page set in a serifed  
text face in a text size. The 66-character    text face in a text size. The 66-character  
line (counting both  letters and spaces) is   line (counting both  letters and spaces) is  
widely regarded as ideal. For multiple        widely regarded as ideal. For multiple  
column work, a better average is 40 to 50     column work, a better average is 40 to 50  
characters.”                                  characters.”  

|--------------------- 50 ----------------------|  |--------------------- 50 ----------------------|  
“Anything from 45 to 75 characters is widely       “Anything from 45 to 75 characters is widely  
regarded as a satisfactory length of line for a    regarded as a satisfactory length of line for a  
single-column page set in a serifed text face in   single-column page set in a serifed text face in  
a text size. The 66-character line (counting       a text size. The 66-character line (counting  
both  letters and spaces) is widely regarded as    both  letters and spaces) is widely regarded as  
ideal. For multiple column work, a better aver-    ideal. For multiple column work, a better aver-  
age is 40 to 50 characters.”                       age is 40 to 50 characters.”  

[DavidBruchmann]

A good example with different text-lengths is the main-page of https://www.nytimes.com/

[sypets]

tip: There are some browser extensions with which you can change styles for specific URLs. I have used Stylus on Chrome.

I have used this to test some changes in style. You can create a style for specific domain or docs.typo3.org. We could use this to test some style changes pretty easily without having to roll it out on a test server every time.

That way we can do testing on several pages on docs.typo3.org to make sure current layout works well with changes.

Just enter the snippet in the text field, e.g.

.rst-content {
    width: 70%;
}

or

.rst-content {
    overflow: hidden;
    max-width: 66ch;
}

You can create several styles and switch them on and off.

[sypets]

If the width is reduced too much, there are some problems:

1. layout problems on the top "Edit me on GitHub", for example on https://docs.typo3.org/typo3cms/GettingStartedTutorial/OtherBackendModules/BackendLocalization/Index.html

2. Code snippets get horizontal scrollbars, see https://docs.typo3.org/typo3cms/extensions/core/Changelog/9.0/Deprecation-82254-DeprecateGLOBALSTYPO3_CONF_VARSEXTextConf.html

3. tables

Still, most of the content is much better readable with reduced width.

[sypets]

Current PR #100 should be tested and possibly further refined.

[marble]

① I consider this topic fixed in the next, upcoming version.

② The conflict was: Restricted text wide is good for reading, but can make the reading of wide code examples or wide tables really annoying. Or even impossible.

③ We now have a nice solution that fits both worlds in a nice and unobstructive way. It works like this. Usully text width will be limited:

Hower, if you decide to make your window even wider, full screen view will kick in again:

This will happen automatically be means of a media query. And if the window is back to narrow the text width will be lmited again. I like that solution very much. Let's see how it works.

So I consider this issue "solved" for now.