Skip to:
Content

BuddyPress.org

Opened 9 months ago

Last modified 7 months ago

#9281 assigned defect (bug)

Unreadable posts

Reported by: sooskriszta's profile sooskriszta Owned by: johnjamesjacoby's profile johnjamesjacoby
Milestone: BuddyPress.org Sites Priority: high
Severity: major Version:
Component: BuddyPress.org Sites Keywords: has-screenshots
Cc: emaralive

Description

BuddyPress.org forums are unreadable! And I am not talking about the content. Not sure, how/when it was decided that the font colour should be light grey #AAA and the font should be paper-light (font-weight 100) with a slim sans-serif font Inter. But the result is that the forums are completely unreadable. I wonder if senior leadership @imath @jjj @boonebgorges etc have not visited the forums in ages or what, but I can't believe anyone visiting the forums decided that it is a good idea to keep these as is.

Not to mention that the weeks-long moderation queues are not becoming, but that's a different topic entirely.

To begin with, the change request is that color attribute be changed to black #000.

Attachments (4)

Screenshot 2025-04-27 125125.png (162.8 KB) - added by sooskriszta 9 months ago.
Screenshot of my recent post - still awaiting moderation
Screenshot 2025-04-27 164820.png (199.4 KB) - added by sooskriszta 9 months ago.
jjj-2025-04-28-at-12-55-02-UTC@2x.png (767.5 KB) - added by johnjamesjacoby 9 months ago.
Screenshot 2025-06-08 132720.png (336.4 KB) - added by sooskriszta 7 months ago.
font-weight set to 100

Download all attachments as: .zip

Change History (13)

@sooskriszta
9 months ago

Screenshot of my recent post - still awaiting moderation

#1 @johnjamesjacoby
9 months ago

  • Owner set to johnjamesjacoby
  • Status changed from new to assigned

I'll look into this.

I'm not immediately seeing what you are, but we'll figure it out and make it right.

Note that closed and pending topics are intended to look somewhat greyed out, but maybe I can improve that a bit too.

#2 @emaralive
9 months ago

  • Cc emaralive added

#3 follow-up: @sooskriszta
7 months ago

Everything appears like that to me - style.css is setting font-weight to 100.

BTW, my pending post is still pending...now for over 8 weeks!

@sooskriszta
7 months ago

font-weight set to 100

#4 in reply to: ↑ 3 @emaralive
7 months ago

Replying to sooskriszta:

Everything appears like that to me - style.css is setting font-weight to 100.

BTW, my pending post is still pending...now for over 8 weeks!

@sooskriszta - There appears to be something going on with the CSS that might be specific to you or to some but not all, which may be platform and/or browser specific. For example, for me, with Linux (platform) and Chromium (browser), I don't see what you're are seeing, however if I switch to Firefox then I can see what you have conveyed (text in left hand column is lighter, making it harder to read against a white background). What I find puzzling is that your latest screenshot shows some evidence of a Chrome based browser and as previously mentioned I'm not seeing that with Chromium.

Last but not least, I found your topic and have released it from moderation.

Last edited 7 months ago by emaralive (previous) (diff)

#5 @dcavins
7 months ago

I also don't see what you are seeing (Mac, Firefox, Chrome or Safari). Can you try opening the forum in a private browser window, or find some way to load it without your extensions/add-ons? There are some styling add-ons that might do something like that.

I do see the following CSS rule that we should probably change:
--bbbase-font-base: 100 16px/1.5 'Inter', sans-serif;
100 is svelte and popular, but not super great for accessibility/contrast.

Another possibility: My browsers are not using the font "Inter" so maybe that is why it is OK. @sooskriszta way at the bottom of the computed tab in your browser's inspector, what doss it read for "rendered fonts" for you?

Mine reads:
Rendered Fonts
Family name: Helvetica
PostScript name: Helvetica-Light
Font origin: Local file(214 glyphs)

Thanks!

Last edited 7 months ago by dcavins (previous) (diff)

#6 @emaralive
7 months ago

@dcavins - FWIW, I concur with the font "Inter" being the potential issue. For me, Chromium claims "Arial" as the rendered font (32 bit Linux). However, again for me, Firefox (64 bit Linux) claims "DejaVu Sans" as the rendered font and thus the lightness in appearance; bumping the font weight to 400 is the point where the appearance would be the same as I'm seeing with Chromium (64 bit Linux) which claims the rendered font to be:

Family name: Liberation Sans (Fontations)
PostScript name: LiberationSans
Font origin: Local file(21 glyphs)

However, utilizing Firefox, if I change the font from "Inter" to "Arial" (original font weight of 100); Firefox now claims the rendered font to be "Liberation Sans" which matches what Chromium claims and the appearance seems to be the same for both browsers on the Linux platform.

So, things appear to be as clear as "mud" 🤷‍♂️

Last edited 7 months ago by emaralive (previous) (diff)

#7 @dcavins
7 months ago

Yes, fonts in browsers can be kind of mysterious. By that, I mean you don't really know what the user is getting when you specify font families. Thanks for checking it out!

#8 @emaralive
7 months ago

Upon additional review, it appears that system fonts have a play in the game of "which font do I render as an alternative?", e.g., specified font is not installed and a browser picking the closest alternative. For example, Firefox, when I specified "Helvetica" the rendered font changed to "Nimbus Sans" and appears to be acceptable at a font weight of 100. Looking at the installed fonts for a 64 bit Linux box, neither "Arial" nor "Helvetica" are installed by default, but the corresponding alternative are "Liberation Sans" and "Nimbus Sans", respectively. I suppose the font listing could include more possible fonts, e.g.:

--bbbase-font-base: 100 16px/1.5 'Inter', arial, helvetica, sans-serif;

Which might be an acceptable change, until we find out we need to include, yet, another font. Thoughts?

This ticket was mentioned in Slack in #buddypress by emaralive. View the logs.


7 months ago

Note: See TracTickets for help on using tickets.