search

retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.06k stars 204 forks source link

Allow words to break for the ToC #633

Closed patricklafrance closed 1 year ago

patricklafrance commented 1 year ago

Currently, if a word in the ToC is too long, an horizontal scroll is added and the user can scroll to see the whole word:

image

While it's a good default fail-safe mecanism, I believe it would be better to allow long words to break and only rely on the horizontal scroll for major cases:

.simplebar-content > li {
    word-break: break-word;
}

After the addition of the CSS:

image

Thank you,

Patrick

geoffreymcgill commented 1 year ago

Hi @patricklafrance. Can you provide more context or explanation, specifically regarding the following statement:

it would be better to allow long words to break and only rely on the horizontal scroll for major cases:

What do you mean by major cases?

If the heading is defineDevRemoteModuleConfig, do you feel Retype should split into two values, such as defineDevRemoteModule and Config?

patricklafrance commented 1 year ago

What do you mean by major cases?

If it's a very large header like:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam justo lacus, viverra vel egestas ac, facilisis quis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus."

(I am not sure why someone would come up with such an header thought)

It will probably be broken on multiple lines anyway. While thinking about this, I am not sure when it's a good thing to introduce the horizontal scrollbar. Do you have any usecases for which the horizontal scrollbar proved to be usefull?

If the heading is defineDevRemoteModuleConfig, do you feel Retype should split into two values, such as defineDevRemoteModule and Config?

Yes, I think it should be broken into two values defineDevRemoteModule and Config. IMO, it is more convenient for the user than scrolling horizontally.

To clarify, it's not exactly two values, it's the same value but rendered on 2 lines by the browsers because of CSS word-break: break-word;.

patricklafrance commented 1 year ago

If you are wondering what it would looks like, I added it as custom CSS to our public documentation websites:

geoffreymcgill commented 1 year ago

break-word has been applied to the ToC items and Headings. The change will be included in the next release of Retype.

@patricklafrance Thanks for pointing out this issue.