Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Back arrow on 404 page is bottom-aligned #15791

Open
dholbert opened this issue Dec 27, 2024 · 7 comments
Open

Back arrow on 404 page is bottom-aligned #15791

dholbert opened this issue Dec 27, 2024 · 7 comments
Labels
Bug 🐛 Something's not working the way it should

Comments

@dholbert
Copy link

dholbert commented Dec 27, 2024 •
edited
Loading

Description

The <-- Go back message on the mozilla.org 404 page has the back-arrow awkwardly positioned at the bottom of the line right now.

I think this is really a bug/quirk of the new "Mozilla Text" font, so I'll try to find the right place to report it as a font bug, but for now I'm filing it as a site bug since it's visible on the site.
EDIT: As discovered in comments below, we're picking this glyph up from "Liberation Sans", which is the default substitution for Arial on Ubuntu.

Steps to reproduce

  1. Visit https://www.mozilla.org/en-US/bogus-not-a-real-page/ (or any gibberish not-a-real-page URL on the www.mozilla.org domain)

Expected result

You should see "Go back" with a vertically-centered arrow next to it.

Actual result

The arrow looks awkwardly not-centered; it's noticeably too far down.
image

Environment

Firefox 135.0a1 (2024-12-23) on Ubuntu 24.10
Chrome 133.0.6888.2 (Official Build) dev (64-bit)
(i.e. this isn't a browser-specific behavior)
@dholbert dholbert added the Bug 🐛 Something's not working the way it should label Dec 27, 2024
@dholbert
Copy link
Author

If I add this CSS to the site in devtools...

.back-button { font-family: sans-serif }

...to use a different font for this element (and its arrow), then this looks more nicely-centered to me:
image

(I'm not suggesting we actually do that; just mentioning it for diagnostic purposes, to demonstrate that this is specific to this particular font.)

@dholbert
Copy link
Author

Hmm, I see the same issue (in Chrome and Firefox) if I just pick Arial as my font, too -- here's a reduced testcase (with a large font to make it easier to see):

data:text/html,<!DOCTYPE html><meta charset="utf-8"><body style="font: 40px Arial">%E2%86%90Go Back

This renders like so in Firefox and Chrome:
image

So this isn't specific to the Mozilla font; there just must not be as much of a guarantee about the vertical positioning of this arrow as I was imagining.

@dholbert
Copy link
Author

FWIW the UTF codepoint that we're currently using here is this one:
https://codepoints.net/U+2190?lang=en
https://www.fileformat.info/info/unicode/char/2190/index.htm

@janbrasna
Copy link
Contributor

Chances are the glyph is not even part of that font, and it's some kind of a fallback, picking up something from the stack like Arial or Helvetica. @dholbert Out of curiosity, if you change the page lang to /cs/ or /ar/ does anything change for you regarding this arrow?

This is how it looks on macOS 15 fwiw: (gecko left, webkit right)

Screenshot 2024-12-28 at 0 05 16

@dholbert
Copy link
Author

You're right - it looks like the arrow is from Liberation Sans.

https://www.mozilla.org/cs/bogus-not-a-real-page/ renders with a different, bigger arrow in Firefox and Chrome, which looks vertically centered to me.

https://www.mozilla.org/ar/bogus-not-a-real-page/ renders with a different arrow that looks vertically centered in Firefox, but in Chrome I think I'm still getting the "Liberation Sans" bottom-aligned one.

@dholbert
Copy link
Author

If I add font-family: sans-serif; to the .back-button::before rule, then we pick up one that looks good:

.back-button::before {
  content: "← ";
  font-family: sans-serif;

Screenshot:
image

That lets us bypass Arial from the --body-font-family: "Mozilla Text",Inter,"Helvetica Neue",Arial,X-LocaleSpecific,sans-serif; font-family list here, which is what's matching to Liberation Sans which gives us the low-biased leftarrow here.

@dholbert dholbert mentioned this issue Dec 28, 2024
Open
@dholbert
Copy link
Author

I filed an issue in the Liberation Sans repo ( liberationfonts/liberation-fonts#71 ) to see if they might want to adjust their version of this glyph to make it more centered.

Not holding my breath, since it looks like the last commit in that repo was 3 years ago. :) So we might still want to consider working around this on mozilla.org as well (by e.g. specifying a generic font family -- and not Arial -- for this backarrow, per my previous comment.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug 🐛 Something's not working the way it should
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dholbert @janbrasna