Badge title is unreadable when long

[alvaromontoro]

Describe the bug

The title of the badges is too small to read in some cases. In particular, the title of the DigitalOcean App Platform Hackathon on DEV Badge is unreadable on smaller screens.

To Reproduce

1. Go to the Digital Ocean Hackathon badge page

Expected behavior

The title of all badges should be readable.

Screenshots

Desktop (please complete the following information):

• OS, version: MacOS Catalina
• Browser, version: All browsers.

Smartphone (please complete the following information):

• Device: iPhone/Android
• OS, version: All
• Browser, version: All

Additional context

The size of the badge title is calculated dynamically based on a fixed value (1.66vw) and another value based on the badge title length:

forem/app/views/badges/show.html.erb

Line 5 in c842d1a

<h1 style="text-align: center;font-size:calc(1.66vw + <%= 34 - (@badge.title.size / 1.1).to_i %>px);max-width:96%;margin: 30px auto;padding-top:8px;">🏅 <%= @badge.title %> Badge 🏅</h1>

The badge-specific value for the DigitalOcean App Platform Hackathon on DEV Badge translates into a negative number:

1. "Participant — DigitalOcean App Platform Hackathon on DEV" = 56 characters
2. 56 / 1.1 = 50 (rounded down)
3. 34 - 50 = -16

And that causes the title to have a size of zero or lower for screens smaller than 964px (also, it isn't easy to read on larger screens).

One option would be to make the badge-title size fixed for all the badges instead of depending on their length... but that should be a design decision and not my call :)

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[SiddharthShyniben]

I guess making it absolute would fix the problem. I don't know ruby, But i guess it would look something like:

  <h1 style="text-align: center;font-size:calc(1.66vw + <%= (34 - (@badge.title.size / 1.1).to_i).abs %>px);max-width:96%;margin: 30px auto;padding-top:8px;">🏅 <%= @badge.title %> Badge 🏅</h1>

[alvaromontoro]

@SiddharthShyniben that would definitely solve the problem.

To be honest, I don't fully understand why the font size needs to change from badge to badge. Why not the same for all? It seems it is so all the titles occupy (more or less) the same space, but it results in tiny titles for long badges (the DigitalOcean hackathon badge) and huge titles for short ones (the CSS badge). It may not have a big impact on bigger screens, but the difference is considerable on smaller screens.

[SiddharthShyniben]

You are right @alvaromontoro .

It looks like this is there for the bug smash. Can you assign this to me?

[rhymes]

@SiddharthShyniben done :)

[Link2Twenty]

Variable font size is fine but I don't think calculating it this way makes much sense. Basing it on screen width in a calc seems a little odd.

That being said if you wanted to keep it fancy you could clamp the values something like

 <h1 style="text-align: center;font-size:calc(min(max(1.5em, 1.66vw), 2em) + <%= 34 - (@badge.title.size / 1.1).to_i %>px);max-width:96%;margin: 30px auto;padding-top:8px;">🏅 <%= @badge.title %> Badge 🏅</h1> 

Even with this approach though once a title reaches 64 characters long the issue will come back.

---

I think the best approaches are either have a fixed size for all titles or have 3 sized depending on the length of the title.

0 - 12 characters large font
13 - 32 characters medium font
33+ small font

[SiddharthShyniben]

Thank you @rhymes !

I just did a bit of math and I think hardcoding the font-size is OK. Something like min(3em, 7vw) min(2.7em, 7vw) looks good. I'll test it on a bunch of screen sizes and badge lengths and report here.

[SiddharthShyniben]

I tried this on every screen size the devtools could give me, and many badge lengths and my solution looks good!

[alvaromontoro]

@Link2Twenty I like the idea of clamping, but would go with clamp instead of combining min and max. To solve the issue with the negative values, we could move the clamp/min/max outside the calc. For example, Instead of doing this:

font-size:calc(min(max(1.5em, 1.66vw), 2em) + <%= 34 - (@badge.title.size / 1.1).to_i %>px)

we could do something like this:

font-size:clamp(1.5em, calc(1.66vw + <%= 34 - (@badge.title.size / 1.1).to_i %>px), 2em)

If the result of the calc is negative, the font size will be 1.5em; if the result is positive, the largest it will be is 2em.

[cmgorton]

@alvaromontoro I know you had wanted to work on this too. Just noticing it was assigned already. If this gets solved, I will make sure you get awarded for the bug smash too. Thanks for opening this issue.

[alvaromontoro]

@cmgorton it's fine (thanks!). I'll find another ticket :)

[cmgorton]

@cmgorton it's fine (thanks!). I'll find another ticket :)

If you find another bug in the repo not yet labelled bug smash let me know. We can probably add the label to it 😄

[Ahnaf780]

Thanks