Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Comments on Avatar alt text does not fit in avatar available space

Post

Avatar alt text does not fit in avatar available space

+1
−0

On a slow connection the user avatar may not immediately be available. When it has not yet finished loading there is placeholder text displayed instead (the alt text for the image). However, at the specified font size this does not fit into the space allocated for the avatar, resulting in it overflowing into the Categories bar (screenshot from mobile):

Codidact on mobile showing the user avatar alt text

This is rare to see unless the connection is very slow (I saw this while travelling by train with very low / intermittent mobile signal).

Possible solutions

I don't know the best way to deal with this (or if it even needs dealing with), but the ideas that come to mind are:

  • Decrease the font size so that the word "avatar" no longer needs to wrap mid-word
  • Make the alt text a single letter (perhaps the first letter of the username) and increase the font size so that the letter fills most of the space allocated for the avatar, like a substitute avatar. Even if the real avatar contains transparency, the letter will not show through as the browser will remove the alt text once the image becomes available
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

"user pic"? (2 comments)
"user pic"?
Monica Cellio‭ wrote over 1 year ago

Probably the easiest thing to do is to shorten the alt text. Instead of "user avatar", does "user pic" work?

trichoplax‭ wrote over 1 year ago

In terms of available space, it looks like anything 4 characters or fewer will fit in the available space.

In terms of being understood, I personally see the abbreviation "pic" as sufficiently widely used to not need any further explanation.

Looks like the font size doesn't need to change after all, unless it's ever decided to let users define their own alt text for their avatar...