Including spaces between Magnitude and Unit in Scale Control Formatting

[kathirgounder]

Tackling Scale Control Formatting Consistency Issue #12620. Decided that including spaces between magnitude and unit in the Scale Control for all units would be the best practice, this will also ensure consistency between the legacySetScale (includes spaces) function and _setScale (currently does not include spaces).

Before:

After:

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• write tests for all new functionality
• document any changes to public APIs
• post benchmark scores
• manually test the debug page
• tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Adding Spaces between Magnitude and Unit in the Scale Control for all units</changelog>

[CLAassistant]

All committers have signed the CLA.

[mourner]

If we're removing the space, for consistency, we should also remove it in legacySetScale (that's used when Intl.NumberFormat isn't available).

However, I'm wondering if it would be better to change it the other way around — looking at the formatting docs, we could replace "narrow" in options with "short" and that would add the space. And the non-breaking part could be enforced in CSS (white-space: nowrap). Not sure. What do you think?

[kathirgounder]

If we're removing the space, for consistency, we should also remove it in legacySetScale (that's used when Intl.NumberFormat isn't available).

However, I'm wondering if it would be better to change it the other way around — looking at the formatting docs, we could replace "narrow" in options with "short" and that would add the space. And the non-breaking part could be enforced in CSS (white-space: nowrap). Not sure. What do you think?

Hey @mourner !! Thanks for the comment (also big fan of your leaflet work, trying to be like you one day!) I think I agree with changing it to the other way around, I like the space between the magnitude and unit ! I will try to draft something up

Edit: Seems like there's actually a discrepancy between the legacySetScale and _setscale as the legacysetscale actually includes a non-breaking space (it doesn't use intl.numberFormat) between the magnitude and the unit for all types of units not just nautical, so I like adding the space in _setScale even more now

[mourner]

And the non-breaking part could be enforced in CSS (white-space: nowrap).

Nice! Let's also make sure the label doesn't get wrapped by setting it as nowrap in CSS, since narrow puts a regular space and not a non-breaking one.

[kathirgounder]

And the non-breaking part could be enforced in CSS (white-space: nowrap).

Nice! Let's also make sure the label doesn't get wrapped by setting it as nowrap in CSS, since narrow puts a regular space and not a non-breaking one.

Hi @mourner ! Thanks again for the review, I should've mentioned it in my update, seems like you guys already added the 'nowrap' property in the CSS file in this pr to tackle the same wrapping issue: https://github.com/mapbox/mapbox-gl-js/pull/11850/files#diff-ddbd4aa8b3bad8f105e53a268b99db49be5ad58f3db5e57719baf9afb9ddc9c3

mapbox-gl-js/src/css/mapbox-gl.css

Line 521 in e82dae3

white-space: nowrap;

If I need to enforce it somewhere else as well, please let me know! Thank you!