[Feature proposal] Additional width ch 50-70

[jenstornell]

This is a feature idea.

What the ch unit is

In short it calculates the width by the number of characters in a text.

https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/

Optimal text line length 50-70

• https://baymard.com/blog/line-length-readability
• https://ux.stackexchange.com/questions/108801/what-is-the-best-number-of-paragraph-width-for-readability

Tailwind suggestion

As soon as I was aware of the ch unit I use it on every site. I think people in general are not yet aware of it.

I suggest three good widths:

• .w-ch-50
• .w-ch-60
• .w-ch-70

Update 2020-05-01

After thinking about it more, the max-width is more important. Also alpabetically names may be more Tailwind like.

.max-w-ch-sm
.max-w-ch-md
.max-w-ch-lg

[nternetinspired]

Unfortunately IE11 treats ch very differently to other browers which, in my experience, makes it pretty useless if you have to support IE11.

[jenstornell]

@nternetinspired When looking into it, you are right.

https://caniuse.com/#feat=ch-unit

IE supports the ch unit, but unlike other browsers its width is that specifically of the "0" glyph, not its surrounding space.

On the other hand IE11 is now 7 years old. I'm not sure how long it's going to be supported by Tailwind? Not forever hopefully. Personally when building stuff I support 2 major versions back. I think that is a common pattern.

Grid is supported by Tailwind, but not supported by IE11. It's also pretty useless if you have to support IE11, but awesome for the rest of us.

[nternetinspired]

The issue is not that it isn't supported, the issue is that is leads to radically different results. Besides, you can get the same results, with x-browser consistency, using em instead.

[royvanv]

Unfortunately IE11 treats ch very differently to other browers which, in my experience, makes it pretty useless if you have to support IE11.

I think a warning about Internet Explorer support should be enough. If you still need IE support (poor dev), either don't use ch or use some hack to support it.

[woodinteractive]

The issue is not that it isn't supported, the issue is that is leads to radically different results. Besides, you can get the same results, with x-browser consistency, using em instead.

em units are exactly one-half a ch unit. So 70ch is the same as 35em. If you can do math, then you don't need to worry about using ch units. The one main "gotcha" is with rem units. rem is based on root font size, whereas em and ch are based on their direct or nearest parent element. As of right now...tailwind predominately uses rem units. I would argue that em units would be more useful than ch units with tailwind since they have better browser support.

[royvanv]

em units are exactly one-half a ch unit.

They are not, check out this demo:
https://codepen.io/royvanv/pen/ZEQwKML

[nternetinspired]

em units are exactly one-half a ch unit. So 70ch is the same as 35em.

This is not correct. While both are relative units, the width of ch is tied to a single glyph, 0 and will vary by typeface.

As of right now...tailwind predominately uses rem units. I would argue that em units would be more useful than ch units with tailwind since they have better browser support.

Whilst I am personally a fan of using em for typography, I would argue that using rem for layout spacing provides a far more predictable and consistent experience, espescially to novices, as you do not have to consider the cascading nature of css. With em you really have to understand and embrace the cascade. In a utility-first approach like Tailwind's, predictability is a huge plus point and, IMHO, greaty outweighs most other concerns.

In browser support terms, if you are not supporting IE8 then rem support is a non-issue. IE has supported rem since 2011.

[ahmedosama5200]

ch are so useful with typography. I would like this to be added to tailwind.

[skix123]

As a workaround we can use arbitrary value, i.e. w-[10ch]

[jturmel]

Has this been given anymore thought?

[wrumsby]

@jturmel you can use max-w-prose which sets a max-width of 65ch as documented in https://tailwindcss.com/docs/max-width