5 ms·
Ask HN: (Solved!) Using CSS to make HN comments only 8 to 10 words wide?
I was idly wondering if anyone had applied a custom style to Hacker News that forced comments to be 8 to 10 words wide?
Something like this:
Comment by Blah:
The best is to use a template literal.
Reply by Foo:
I disagree, you should use str.replace and ignore
template literals.
Reply by Blah:
Respectfully, you are an idiot. Ignoring template literals
for a horrible regex has no place in JavaScript.
Reply by wattle:
I agree, and here's a tangent that doesn't have
much to do with the topic.
The optimum width of a paragraph is 50 to 80 characters with some disagreement on the max width. Which is about 8 to 10 words, or 30 to 50 em according to this question on stackoverflow: https://ux.stackexchange.com/questions/108801/what-is-the-best-number-of-paragraph-width-for-readability
Is it possible to style HN like that?
- detaro 4y agosure, just set a max-width on the comments, like it already does for small screens.
- deleted 4y ago[deleted]
- graderjs 4y agoCombine 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.
- theseobosscom 4y agoInstall User CSS extension if you are using Chrome or Brave browser. Use the following code: .comment { max-width: 65ch; }
- bloopernova 4y agoI've been told that the comment text in my example is confusing to non-English speakers. I'll edit it and keep that in mind in the future.