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

Add 65ch widths for better readability #2574

Merged

Conversation

Soviut
Copy link
Contributor

@Soviut Soviut commented Oct 16, 2020

This pull request is based on this discussion #2495

It introduces a new width of 65ch intended to maximize readability. A 65 character line length is generally agreed to be the maximum readable width for text. Tailwind Typography already uses a 65ch max-width so this will make it easier to match that behaviour.

The new size has been implemented for both width and maxWidth as well as all responsive variants.

<div class="w-read"></div>
<div class="max-w-read"></div>
<div class="lg:w-read"></div>
<div class="lg:max-w-read"></div>

Tests have been updated accordingly.

This will eventually require a documentation update in both the width and max-width pages. Most likely it would benefit from its own short section (after screen width) in each explaining why 65ch is considered readable.

@swyxio
Copy link
Contributor

swyxio commented Oct 16, 2020

nice PR but generally would be nice to wait for maintainers to approve the feature before coding it. in this case I don't think it's a valuable feature because it is extra api surface area not consistent with anything else in Tailwind, could be easily added via extends or typography plugin

@Soviut
Copy link
Contributor Author

Soviut commented Oct 16, 2020

@sw-yx Thanks. I wasn't sure what the process was for actually getting it fully accepted, but I did read the contribution guidelines. The change wasn't that big so if it doesn't get accepted it's no big deal. If anything this was a good excuse to familiarize myself with the source code.

@adamwathan
Copy link
Member

I'm torn on if we should add this to core or if it should be provided as part of the typography plugin. Either way I think max-w-prose and w-prose would be the best names, we actually use max-w-prose already in Tailwind UI so we definitely need to add it either in core or to the typography plugin.

What do you think, any strong reason to add it here vs. in the typography plugin or vice versa? 🤔

@Soviut
Copy link
Contributor Author

Soviut commented Oct 17, 2020

@adamwathan Thanks for the feedback.

I feel like readability is more universal and independent from Typography's primarily primary goal, which is to style generated markup where you can't inject utility classes. In cases where you have static text, the Typography plugin can become redundant since you have direct access to the markup. However, you still may want readable line lengths/widths.

If this were built into the Tailwind core, Typography could take advantage of it and alias it. It also means that you could more easily do readable line lengths are certain breakpoints and not others while using Typography.

Finally, regarding the name, I think the prose word is a Typography-only term. It makes sense in that context since you're applying blanket styles to document-format text (ie: prose). However, I don't think this is appropriate in the core where the primary purpose of this new width is readability regardless of what it's applied to. I went with read so that it's as short as possible, like full, but still has an identifiable purpose.

@adamwathan
Copy link
Member

Good points! I have thought about it more and I'm happy to merge but I'd like to make the executive decision to use the word prose over read if you don't mind making that update, and only adding it to the maxWidth utility by default and not to width.

Thanks for this! ❤️

@Soviut
Copy link
Contributor Author

Soviut commented Oct 21, 2020

@adamwathan absolutely. I'll get on that shortly.

Also, I'd be curious what the rationale is for there being different width and maxWidth values? I understand with regard to a readable width like this, but for any future contributions, it might help clarify things.

@Soviut Soviut force-pushed the Add-65ch-widths-for-better-readability branch from 462d3b5 to 4c7deb4 Compare October 21, 2020 04:10
@Soviut
Copy link
Contributor Author

Soviut commented Oct 21, 2020

@adamwathan the updates have been made. max-w-prose and all tests pass.

@adamwathan adamwathan merged commit 923e7af into tailwindlabs:master Oct 22, 2020
@adamwathan
Copy link
Member

Awesome thank you!

Also, I'd be curious what the rationale is for there being different width and maxWidth values? I understand with regard to a readable width like this, but for any future contributions, it might help clarify things.

Generally the maxWidth values are wider/layout level values for constraining content, and the width values are for explicitly sizing things. I think in a perfect world all of the values in each would be available in both but we try to curate pretty carefully to keep the file size reasonable for dev tools performance reasons.

@Soviut
Copy link
Contributor Author

Soviut commented Oct 22, 2020

@adamwathan Makes sense. Perhaps that's something to put behind a feature flag? includeAllWidths: true ? Maybe this could be part of a new discussion.

@fli
Copy link

fli commented Oct 26, 2020

This tends to give you quite long lines for proportional fonts because most characters that you use in writing are narrower than the 0 character. (see https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/)

With one serif font I'm using I'm getting 100 character line widths with 65ch and with another sans-serif font I get 85 character line widths. (Mono fonts work fine of course)

Not sure if there's an elegant way to solve it, maybe the user should just override in tailwind.config.js and have a quick explainer in the docs.
Just thought I'd flag it!

@Soviut
Copy link
Contributor Author

Soviut commented Oct 26, 2020

@fli The 65ch unit won't actually limit the lines to 65 characters, it is simply a width to produce optimal line length for readability. This means it reduces eye travel along the line which makes it easier for your eye to track to the next line without getting lost.

I fully agree that this should be documented.

@fli
Copy link

fli commented Oct 27, 2020

@Soviut Sorry I might've been unclear. I think we're agreeing that the optimal line length is one where on average the number of characters in a line is around 65? I think for most fonts 65ch won't give you 65 characters on average per line.

@Soviut
Copy link
Contributor Author

Soviut commented Oct 27, 2020

@fli 65ch (of zeros) is the maximum width, not the maximum character count. There is no problem with fonts being able to fit more characters into a single line because it's still a readable length. It's the distance your eye has to travel to read a line and then get back to the beginning of the next line. Fitting more characters on a line does not change that.

If you choose different fonts, the width that 65ch produces will be different because the width of the 0 character.

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

Successfully merging this pull request may close these issues.

4 participants