4 ms·

I was trying to make a web browsing ai agent a few days ago and I was shocked to find that hacker news comments are implemented as table inside table inside tab

I was trying to make a web browsing ai agent a few days ago and I was shocked to find that hacker news comments are implemented as table inside table inside table.

lelanthran 3y ago
I was delighted when I found this out - my userContent.css to make HN more readable (make content have a limited width, set a 1.5em line-height and extra padding-top for all paragraphs). I no longer struggle to read HN on a wide browser which display 250 characters on a single line. Each paragraph is readable, and the paragraph breaks are visibly higher than the line-height.
- djkoolaide 3y ago
  Do you mind sharing this? Sounds like it would solve the exact problem on my ultra-wide monitor.
  - lelanthran 3y ago
    Not at all, copied verbatim from my userContent.css file, full path $FIREFOXPROFILE/chrome/userContent.css: @-moz-document domain(news.ycombinator.com) { .comment { font-size: 12px; line-height: 1.75em; padding: 10px 0 10px 0; max-width: 64ch; display: block; } .commtext { font-size: 12px; line-height: 1.75em; padding: 10px 0 10px 0; max-width: 64ch; display: block; } }
- airstrike 3y ago
  While we're talking userContent.css hacks, I'd be delighted to share my snippet to make code blocks look like (simplified) Mac windows in case anyone else wants to play with it. There's definitely room for improvement but I don't think it looks half-bad: https://i.stack.imgur.com/xcyoE.png https://i.stack.imgur.com/xcyoE.png @-moz-document domain("news.ycombinator.com") { body { font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important; font-size: 11pt; color: #828282; background-color: #1B2835 !important; } * { font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important; } * code { font-family: "Fira Code", "Monaco", "Consolas", "Courier New", monospace !important; margin: 0; padding: 0; font-size: 0.9em; } code:before { content: "⬤⬤⬤"; position: absolute; top: 5px; left: 12px; color: #ccc; letter-spacing: 3px; -webkit-text-fill-color: #ccc; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #223b4f; } code:before::first-letter { color: #ff5f56 !important; } pre { background-color: #234 !important; border-radius: 15px; padding: 30px 0px 10px; border: 0.5px solid #223B4F !important; box-shadow: inset 0 0 1px #123; position: relative; } table#hnmain{ background-color: #1B2835 !important; } a:link { color: #bfbfbf !important; text-decoration: none; } .c00 { color: #cecece !important; } .cdd { color: #768696 !important; } .c5a { color: #465666 !important; } }

I was trying to make a web browsing ai agent a few days ago and I was shocked to find that hacker news comments are implemented as table inside table inside table.

lelanthran 3y ago

I was delighted when I found this out - my userContent.css to make HN more readable (make content have a limited width, set a 1.5em line-height and extra padding-top for all paragraphs). I no longer struggle to read HN on a wide browser which display 250 characters on a single line. Each paragraph is readable, and the paragraph breaks are visibly higher than the line-height.

djkoolaide 3y ago
Do you mind sharing this? Sounds like it would solve the exact problem on my ultra-wide monitor.
- lelanthran 3y ago
  Not at all, copied verbatim from my userContent.css file, full path $FIREFOXPROFILE/chrome/userContent.css: @-moz-document domain(news.ycombinator.com) { .comment { font-size: 12px; line-height: 1.75em; padding: 10px 0 10px 0; max-width: 64ch; display: block; } .commtext { font-size: 12px; line-height: 1.75em; padding: 10px 0 10px 0; max-width: 64ch; display: block; } }
airstrike 3y ago
While we're talking userContent.css hacks, I'd be delighted to share my snippet to make code blocks look like (simplified) Mac windows in case anyone else wants to play with it. There's definitely room for improvement but I don't think it looks half-bad: https://i.stack.imgur.com/xcyoE.png https://i.stack.imgur.com/xcyoE.png @-moz-document domain("news.ycombinator.com") { body { font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important; font-size: 11pt; color: #828282; background-color: #1B2835 !important; } * { font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important; } * code { font-family: "Fira Code", "Monaco", "Consolas", "Courier New", monospace !important; margin: 0; padding: 0; font-size: 0.9em; } code:before { content: "⬤⬤⬤"; position: absolute; top: 5px; left: 12px; color: #ccc; letter-spacing: 3px; -webkit-text-fill-color: #ccc; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #223b4f; } code:before::first-letter { color: #ff5f56 !important; } pre { background-color: #234 !important; border-radius: 15px; padding: 30px 0px 10px; border: 0.5px solid #223B4F !important; box-shadow: inset 0 0 1px #123; position: relative; } table#hnmain{ background-color: #1B2835 !important; } a:link { color: #bfbfbf !important; text-decoration: none; } .c00 { color: #cecece !important; } .cdd { color: #768696 !important; } .c5a { color: #465666 !important; } }