Use minus character instead of hyphen in the zoom control

[damianmoore]

I noticed that the minus sign in the zoom control was probably just a normal hyphen as it was narrow. The proper minus character is the exact same with as the plus character and has consistent vertical alignment. More info here: https://en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes

After replacing the hyphen with the minus from Wikipedia I checked a zoomed in screenshot of it in GIMP. The minus sign was wider than the plus because the font size had been enlarged - presumably because someone thought it looked too small in comparison. Now they can be the same font size which saves a bit of CSS too.

[perliedman]

The same change was rejected in #2496, so even though this sounds like a good idea, it would need to be thoroughly tested on different OS/browser combinations.

[damianmoore]

Strange that I didn't see the closed pull request - apologies. Interesting reading that it didn't display properly on Chrome/OS X. I'll change it to the '\u2212' character to be sure and then do as much testing as I can. The bit where mourner mentions vertical alignment should be fixed already in my pull request as I changed the CSS so they both use the same styles.

[nathancahill]

I signed up for an open source BrowserStack account to test this on different OS/browsers. From what I could see in the free tier, all seem to support the u2212 character in the Lucida Console, Monaco, monospace bold font stack. I'll check again once I have access to all OS/browser combinations.

[nathancahill]

Here's the HTML I'm testing with:

<span style="font: bold 18px 'Lucida Console', Monaco, monospace;">&#x2212;</span>

[damianmoore]

@nathancahill I've switched to your HTML escaped suggestion. Still works for me. Thanks for testing on BrowserStack. I should be able to test a few devices myself tomorrow.

[nathancahill]

Sorry, wasn't a suggestion to use the escaped character in JS, that was just for testing in HTML. Stick with '\u2212' in JS.

[nathancahill]

Tested on all of Leaflet's supported browsers on BrowserStack, u2212 works fine.

[damianmoore]

Here are a few different browser tests I've done if it helps. Versions are the most recent unless otherwise stated. Not sure why Chromium/Chrome buttons are bigger and without box shadows but I don't think it matters.

[perliedman]

👍 Thanks for thorough testing!