Bicycle route text shield are hard to read

[Florimondable]

« Perhaps it would be more correct to file a bug report / feature request on github, but as it still seems early days (v. 0.3.6) in CyclOSM, as well as I'm an old hand in OSM with a wiki account (and I read and write a lot of it), so I'm comfortable asking this here. I find the route "shields" of dark blue (lcn) and purple (rcn) with white alphanumeric text on them to be exceedingly hard to read. Even as I use a 5K Retina screen, I don't think it is my video or my eyeballs, I think it is the choice of text color, and likely font, type size and most probably "weight" of the font used which contributes to this. (I'm an ex-employee of both Apple and Adobe, though I do have eyeballs. Plus, I like this renderer VERY much and want to find its many wonderful features actually usable). Is there any way that on lcn and rcn route shields, a "heavier weight" font (bold?, extra bold?) can be used to make these alphanumerics easier to read? Thank you. Stevea (talk) 19:52, 7 July 2020 (UTC) » https://wiki.openstreetmap.org/wiki/Talk:CyclOSM

[michaelblyons]

Is the route shield width a constant × number-of-chars? Having a W character (relatively wide) in the route shield pushes the edges of the first and last char off the shield.

[Florimondable]

@michaelblyons do you have an example ?

[michaelblyons]

shown here.

[Phyks]

Shields are statically generated in advance, for a fixed number of chars. This is done in this script: https://github.com/cyclosm/cyclosm-cartocss-style/blob/master/scripts/generate_shields.py.

We used to have shields with extra margins which were making them too prominent in dense areas (https://www.cyclosm.org/#map=13/48.8633/2.3463/cyclosm for example). It might be worth doing some try and error with this script to improve the margins for wide characters.

If you are interested in this topic, let me know and I'll be happy to walk you through this.

Best,

[michaelblyons]

Thanks for the notes! I'll take a look at the Python and at your densely-routed area.

[hiddewie]

The last months the text on the shields is very 'thin' and the letters are almost impossible to read for some routes. If this is another issue I will open a separate one.

See screenshot at https://www.cyclosm.org/#map=9/37.5282/-7.2839/cyclosm

Other screenshot at https://www.cyclosm.org/#map=8/43.967/0.379/cyclosm

[Phyks]

Could you date "the last months"?

Nothing should have changed: https://github.com/cyclosm/cyclosm-cartocss-style/blame/master/labels.mss#L587

The only possible change seems to be https://github.com/cyclosm/cyclosm-cartocss-style/commit/f4de5270f001413c106272aa4abc04555c6e7348 which is more than a year old.

[Florimondable]

The shields in your pictures @hiddewie are indeed hard to read. But on my side the rendering is ok :

May be just an issue with the compression of your pictures ?

[hiddewie]

Could you date "the last months"?

Not really. I have been seeing it for quite some time but I never made an issue in this repository, sorry!

I will locally try a git bisect and try to reproduce the problem.

But on my side the rendering is ok

Oh that is very interesting. The screenshots you just posted show exactly the same problems in my browser: the labels are very hard to read.

Then I compared to Firefox. Comparison screenshot below (left: Brave browser (Chromium based), right: Firefox browser):

So this seems a browser issue.

I tried to generate many screenshot on virtual machines with BrowserStack (URL = https://www.openstreetmap.org/#map=8/44.056/0.228&layers=Y because the cyclosm website shows the full-page popup on initial load). Unfortunately, there is no Brave browser there. See the results in https://www.browserstack.com/screenshots/7d74e27b6fae0e72746ffb12f4e0bde1e567e157.