Openstreetmap-carto: Fine-tuning text-dy?

[daganzdaanda]

This came out of #3510 (see comment and the following)

The distance between icons and text (=text-dy) is not perfect. In the past, we had a lot of cases where labels did not show up because there was not enough room for tall letters.
Now, it seems that we are erring on the side of caution and often the icon seems too far away from the label. Also, text-dy is pretty random if you look in the code (Why does car_rental have 10 while boat_rental has 13 at the same zoom? )

In the issue above, @jeisenbe is trying to fix text-dy for a few icons individually. Maybe this could be done more generally?

---

How is text-dy used when rendering the label? What does it measure?
The CartoCSS documentation says

text-dy
Type: float

Default Value: 0 (Text will not be displaced.)

Displace text by fixed amount, in pixels, +/- along the Y axis. With “dummy” placement-type, a positive value displaces downwards. With “simple” placement-type, it is either up, down or unchanged, depending on the placement selected. With “line” placement-type, a positive value displaces above the path.

So this means that it is not relative to any icon, it's just a fixed number of pixels to move.
The documentation on "text-vertical-alignment" says

text-vertical-alignment
Type: keyword

Possible values: top middle bottom auto

Default Value: auto (Default affected by value of dy; “top” for dy>0, “bottom” for dy<0.)

Position of label relative to point position.

So text-dy>0 means text-vertical-alignment=top. But what is "top", the X-height? If it were the height of the highest letter in the text, we would never have a problem with invisible labels because of accents.

Ideally, one would be able to say "leave a 4px gap between the icon and the top of the highest letter in the label". There is a mapnik issue about that from 2014, support automatic calculation of text dy, but it's still open and as far as I can see this has gone nowhere. But what does this comment from @springmeyer mean? He writes

One note: some diff moved to using the tallest glyph height in a run (aka text_item) rather than the height of X, which I think is the best approach, but let me know if this complicates anything you are seeing.

That sounds great! -- Does this mean we can set text-dy to e.g. 2px everywhere and any label would still fit?

[daganzdaanda]

I now noticed that I did open issue #1640 about the dot already in 2015, but it still bothers my visual feelings ;)

If we don't have to fear any high letters anymore, then let's reduce text-dy for almost everything.
I've looked for "tall" letters on wikipedia, here are some examples in Latin, Thai and Tibetan:

ÉÈÉÈ ◌็ไม้ไต่คู้ กิ่งส བྱེད སྡུཨཽ

But this extreme unicode nonsense takes the cake and might be the ultimate rendering test: °͌͌͌͌͌͌͌͌

If text-dy still uses x-height, we might try and allow the icon and very high letters to overlap. Is that even possible with CartoCSS and Mapnik?

Also, in #767 @pnorman explained some of the problems back in 2014.
It will probably not make a difference that we're now using SVG icons? Or could one do _"a bit of trivial math and examining the MSS"_ now with SVG instead of PNG?

[daganzdaanda]

Also related #2248

[jeisenbe]

"But this extreme unicode nonsense takes the cake..."
I hope we don't need to plan for such invented text. I don't believe such characters exist in real names.

If these characters are the tallest (ÉÈ ◌็ไม้ไ ต่คู้กิ่ བྱེད སྡུཨཽ), then we can reduce text-dy to 10 for most icons:

Even text-dy: 8 would work for most icons; this makes sense because the icon is 14x14. But this looks a little crowded with these exceptionally tall characters:

But text-dy: 7 is too short for some icons:

I don't believe there is any need for text-dy greater than 12; this would work even with a 16x16 pixel icon and extra-tall text. But we would need to check each icon svg to make sure there are none taller than 14x14 if we want to got to a uniform text-dy 10 for large icons. And there are some smaller icons that can do with less.

[jeisenbe]

I believe that slipway is the only icon larger than 14x14 currently.
I've also confirmed that the adjustment with text-dy is based on the top of the text in the label, so the height of the characters does not matter.
Based on this, almost every icon should work at text-dy 10 or less, except slipway. Some icons currently have less text-dy because they are not the full 14x14 pixel size.

[Adamant36]

Perhaps Thomasz-W could make a slipway icon that's 14x14 pixels. It would be good if there wasn't an outlier.

[sommerluk]

Also Myanmar should be tested. Text like http://www.openstreetmap.org/node/4311140131#map=14/21.8905/96.0426 could be tested.

[Tomasz-W]

leisure=slipway 14x14 icon proposal:

Gist link: https://gist.github.com/Tomasz-W/c453ba8bc0ab15404d40098a947879e2

current one:

[kocio-pl]

Nice, that looks sane and recognizable for me!

[Tomasz-W]

@Adamant36 Can you include it in https://github.com/gravitystorm/openstreetmap-carto/pull/3533?

[Adamant36]

@Tomasz-W, sure. I'll add it tomorrow.

[Tomasz-W]

If I understand correctly, this issue is about distance between icon and a label.
Just for the note: icon above is 14x10 exactly, I presume there are another ones where not all 14x14 space is used.

[jeisenbe]

I've found that the text-dy function adjusts the location of the text based on the top of the tallest characters, therefore it is not necessary to test all possible characters. I've also found that with 14 pixel tall icons, text-dy of 10 is sufficient. So I would like to change all of the current instances of text-dy 11, 12, and 13 to be a uniform 11. This affects a large number of icons, though in most cases it is only 1 or 2 pixels difference.

1) Current master:

Text-dy 10

2) Current master

Text-dy 10

3) Current master

Text-dy 10

This is a subtle improvement, but it makes the text more closely associated with the icon and should save a few pixels of space; this is helpful in crowded parts of the map.

It looks like a few features would be better with text-dy reduced further, eg tourism=hotel, natural=cave, and slipway. The new icon for slipway is 10 pixels tall, according to @Tomasz-W, so it would make sense to use text-dy 8.

[jeisenbe]

Tests with tall characters in the Myanmar scrip, and with É. As you can see, the text is adjusted down automatically. These images are with text-dy: 10

[jeisenbe]

Here's text-dy: 8 for banks, post offices, community centres, slipways, toll booths, fast food, hotels, and caravan sites:

Current master:

text-dy 8:

[Adamant36]

It would be good if there was a before and after. Otherwise, its hard to tell a two pixel difference. For instance, the last example looks good, but there's nothing to compare it to. So how do I know it had anything to do with the text-dy being adjusted?

[jeisenbe]

@Adamant36, I've updated the last example to compare with the current master.

The branch is also available here for testing: https://github.com/jeisenbe/openstreetmap-carto/tree/text-dy

[Adamant36]

@jeisenbe, thanks. It looks better adjusted. The amenity icons could use a little breathing room. But that's the price of standardization I guess. Do you know if they are slightly lower because they aren't centered in 14x14 grid or is it just how text-dy works? Also, I take it this would make it easier to combine features in the same block of code since they will have the same properties? That's something I've been wanting to do for a while now.

[jeisenbe]

@Adamant36, which amenity icons seem to be too close to the text? Bank, Post Office and Community Centre, in the most recent post, or others?

Do you know if they are slightly lower because they aren't centered...

I don't understand. What seems to be slightly lower?

[Adamant36]

Yeah, Bank, Post Office, and Community Centre. Those ones are slightly lower and could be up a tad more.

It seems to work good with everything else though. Including the other amenity icons.

[dieterdreist]

This one looks a bit confusing ;-)

[jeisenbe]

Oh that’s hilarious, what are the odds?
On Wed, Dec 5, 2018 at 6:39 PM dieterdreist [e-mail]
wrote:

This one looks a bit confusing ;-)
[image: screen shot 2018-12-05 at 10 38 04]
https://user-images.githubusercontent.com/581288/49504464-ffbb5b00-f879-11e8-9384-efee53e28473.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gravitystorm/openstreetmap-carto/issues/3512#issuecomment-444421353,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AoxshDnjdXYoqXw4El_098ohA6XQLxteks5u15RFgaJpZM4YeSRN
.

[daganzdaanda]

Thank you very much for this work and the comparisons!
It's also great that the old problem of interference between icon and label has been solved (apparently already in 2014, but nobody realized it until now :-P )

Your examples look much better already! I guess we can take away as a rule that dy = (icon height / 2) + 4px seems to work fine.

Could you check the generic dots, too?

OT - Why do we use italics for dog park, fitness centre and fitness station? Are there other examples of italic labels used with icons?

[jeisenbe]

Yeah, Bank, Post Office, and Community Centre. Those ones are slightly lower and could be up a tad more.

It may be that the SVG file has the icon below the centerline for these. I'll try them withtext-dy: 9 - this is what amenity_bank uses currently:

text-dy-9 for the 3 amenities, 8 for others in this image:

Compared to current master:

[jeisenbe]

Thank you very much for this work and the comparisons!
It's also great that the old problem of interference between icon and label has been solved (apparently already in 2014, but nobody realized it until now :-P )

I don't think it's fully solved. If you look at this comment: https://github.com/gravitystorm/openstreetmap-carto/issues/3512#issuecomment-438898336 , you'll see that with text-dy: 7 there were a number of labels that did not render (when the icon was a full 14px tall)

Your examples look much better already! I guess we can take away as a rule that dy = (icon height / 2) + 4px seems to work fine.

I think it's text-dy=(icon_height/2 + 3px); eg 14px tall icon => text-dy: 10 and 10px tall => text-dy: 8.

Could you check the generic dots, too?

Such as shop=, office=? Any others?

OT - Why do we use italics for dog park, fitness centre and fitness station? Are there other examples of italic labels used with icons?

Good question. They are also under the "landcover" label section, so they get: text-face-name: @landcover-face-name; apparently this is also showing up when the name labels are rendered on nodes.

[Adamant36]

may be that the SVG file has the icon below the centerline for these

Maybe @Tomasz-W can check the SVG files and centerline them if they aren't already.

[Tomasz-W]

@Adamant36 Which ones?

[Adamant36]

Bank, post office, and community center. As seen in this message
https://github.com/gravitystorm/openstreetmap-carto/issues/3512#issuecomment-444344340 in the second image (text-dy 8) they are slightly lower then the other icons.

[Tomasz-W]

I've checked them, all of mentioned icons are centered, so it's propably some kind of optical illusion.

[jeisenbe]

I'm considering making a PR for this. Are there any other icons that need the text-dy adjusted?