3 ms·
Combine these two google searches: - "ch width css", e.g: https://www.freecodecamp.org/news/css-unit-guide/#:~:text=The%20CSS%20ch%20unit%20is,with%20proportio
by graderjs 4y ago
Combine these two google searches:
- "ch width css", e.g: https://www.freecodecamp.org/news/css-unit-guide/#:~:text=The%20CSS%20ch%20unit%20is,with%20proportional%20fonts%20like%20Arial https://www.freecodecamp.org/news/css-unit-guide/#:~:text=Th....
- "average length of English word", e.g: https://www.researchgate.net/figure/Average-word-length-in-the-English-language-Different-colours-indicate-the-results-for_fig1_230764201#:~:text=The%20average%20English%20word%20length,such%20as%20international%20or%20relationship https://www.researchgate.net/figure/Average-word-length-in-t....
So:
- 8 to 10 words, call it 9
- average word length: call it 5
- 5 * 9 = 45 word characters
- 9 words that's 8 space characters
- 45 + 8 that's 53 monospace characters
- in monospace all characters should have 1ch width (width of 0-character), so
- css as follows:
:root, * {
font-family: monospace !important;
}
.whatever-comment-class-is, p {
max-width: 53ch;
word-break: break-all;
overflow: hidden;
}
- bloopernova 4y agoThank you! I used ublock origin to add this which seems to work well for my tastes: news.ycombinator.com##.comment:style(max-width: 60ch !important; overflow: hidden !important;) EDIT: I felt that the comment header needed to be increased in visibility so I added this: news.ycombinator.com##.comhead:style(background: #e6e6df; font-weight: italic; color: #686868 !important;) news.ycombinator.com##.hnuser:style(background: #e6e6df; font-style: italic; color: #575757 !important;) ) Note: ublock origin needs to be enabled for these rules to take effect.