I've noticed that my eyes often want to quickly skim quoted text (which is a bit smaller) compared to unquoted text and it sometimes takes an effort for me to read it properly. I browse the forum from two different computers with two different monitor resolutions (one a fair bit higher than the other) and I recently (~1 year ago) had my eyes tested (grateful to not need glasses yet; must be all those carrots -- thanks, mom!) so although I haven't ruled it out, I don't think it's me or my setup.
I'm aware that I can fix this for myself by making things bigger with browser settings and whatnot, but while I was poking around the forum's CSS I found what I think is behind my problem: normal text is set to 13px, quoted text is set to 11px and quote titles are set to 10px. Now, quoted text should appear smaller than normal text, and quote titles should appear smaller than quoted text (ignoring boldness), so I'm not proposing making them all the same size (that looks really goofy, I tried it) but I think making it go 13px/12px/11px is better than 13px/11px/10px.
I think this is more important than it might seem, because I believe it subtly affects how people read posts (i.e. subconsciously avoiding carefully reading quoted text, which is often as -- and sometimes more -- important than unquoted text in terms of fully understanding a given post).
Here's what 13px/11px/10px (how it is now) looks like:
And here's what 13px/12px/11px (what I'm proposing) looks like:
Anybody else prefer the second one?
Edit: The above screenshots are a little hard to accurately gauge the difference on because of
font hinting and the like, so take them with a grain of salt (i.e. the same stylesheet adjustments will likely look a bit different on your system).
Not that theymos needs it (it's a trivial change), but for completeness' sake, here's the stylesheet patch:
--- ./style_before.css 2022-11-27 10:03:55.091702000 +0000
+++ ./style_after.css 2022-11-27 10:06:29.647700841 +0000
@@ -120,25 +120,25 @@
{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #f1f2f4;
border: 1px solid #d0d0e0;
padding: 5px;
margin: 1px 3px 6px 6px;
- font-size: 11px;
+ font-size: 12px;
line-height: 1.4em;
}
/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #fff;
font-family: "courier new", "times new roman", monospace;
font-size: 12px;
line-height: 1.3em;
@@ -152,25 +152,25 @@
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}
/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #476C8E;
text-decoration: none;
font-style: normal;
font-weight: bold;
- font-size: 10px;
+ font-size: 11px;
line-height: 1.2em;
margin-left: 6px;
}
/* Generally, those [?] icons. This makes your cursor a help icon. */
.help
{
cursor: help;
}
/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction