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.

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

report: use narrow formatting for opportunity units #14723

Merged
merged 2 commits into from
Jan 31, 2023
Merged

report: use narrow formatting for opportunity units #14723

merged 2 commits into from
Jan 31, 2023

Conversation

brendankenny
Copy link
Member

fixes #14337

Everyone (including at least a few standards bodies) seem to agree the narrow s is way better than the short sec. We seemed in agreement that sec is weird as well, so making the switch.

That also allows us to narrow the text area again. It doesn't really make much sense to be specifying in terms of font-size, so I switched us over to using 7ch, which for Roboto is roughly equivalent to the 4x we were using before #14619. ch isn't perfect if it's not a monospaced type, but it's a much more logical relative unit for a width.

We could maybe go narrower, but unfortunately some locales still use a space before the unit and a period after for narrow formatting, so this lets us get xx.xxs for most locales and x.xx s. everywhere without wrapping (Tamil appears to result in the longest opportunity time strings).

We could bump it up to 7.5ch? Or just live with the . wrapping to the next line in that case until opportunity rendering is refactored (notably just sample_v2's first 3.30 wraps in Tamil on main with the current calc(5 * var(--report-font-size)) since it's rendered as 3.30 விநாடி).

Before:
A portion of a Lighthouse report showing numeric values rendered as strings like '3.30 sec'

After:
A portion of a Lighthouse report showing numeric values rendered as strings like '3.30s'

Tamil:
A portion of a Lighthouse report showing numeric values localized for Tamil without line wrapping

@brendankenny brendankenny requested a review from a team as a code owner January 27, 2023 20:23
@brendankenny brendankenny requested review from adamraine and removed request for a team January 27, 2023 20:23
Copy link
Collaborator

@connorjclark connorjclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s SGTM

I'd prefer to keep the additional space. I confirmed that 7.5ch is enough to render xx.xx in Tamil without wrapping.

@alexnj
Copy link
Member

alexnj commented Jan 28, 2023

There should be a space between time numeric value and unit.

@brendankenny
Copy link
Member Author

There should be a space between time numeric value and unit.

The space/no-space comes from Intl.FormatNumber, which is from the CLDR and a decision well upstream.

Space is my preference too, but I would also prefer treating s as an SI symbol and not something to be localized, but until we make a solid case for that, deferring to Intl seems like our best option.

@alexnj
Copy link
Member

alexnj commented Jan 28, 2023

@connorjclark connorjclark merged commit 2f6ed6f into main Jan 31, 2023
@connorjclark connorjclark deleted the s-sec branch January 31, 2023 21:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

s or sec in report opportunities
5 participants