[core] Icon text fit padding is not applied correctly on SDF images.

[fabian-guerra]

When using a symbol layer with an SDF icon and setting the padding to have an even space e.g. 5, 5, 5, 5 the rendered padding is incorrect.

Steps to reproduce

1. Add an SDF icon:

    UIImage *background = [UIImage imageNamed:@"background"];
    UIImage *backgroundSDF = [background imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    [style setImage:backgroundSDF forName:@"myimage"];

2. Style a symbol layer

MGLSymbolStyleLayer *symbolStyleLayer = (MGLSymbolStyleLayer *)[style layerWithIdentifier:@"symbol-layer"];
    symbolStyleLayer.iconImageName = [NSExpression expressionForConstantValue:@"myimage"];
    symbolStyleLayer.iconTextFit = [NSExpression expressionForConstantValue:[NSValue valueWithMGLIconTextFit:MGLIconTextFitBoth]];
    symbolStyleLayer.iconScale = [NSExpression expressionForConstantValue:@1.0];
  ->UIEdgeInsets padding = UIEdgeInsetsMake(5, 5, 5, 5); // padding is evenly distributed
    symbolStyleLayer.iconTextFitPadding = [NSExpression expressionForConstantValue:[NSValue valueWithUIEdgeInsets:padding]];
    
    symbolStyleLayer.iconColor = [NSExpression expressionForConstantValue:UIColor.whiteColor];
    UIColor *haloColor = [UIColor colorWithRed:(51.0/255) green:(117.0/255) blue:(197.0/255) alpha:1.0];
    symbolStyleLayer.iconHaloColor = [NSExpression expressionForConstantValue:haloColor];
    symbolStyleLayer.iconHaloWidth = [NSExpression expressionForConstantValue:@4.0];

    symbolStyleLayer.textHaloColor = [NSExpression expressionForConstantValue:UIColor.whiteColor];
    symbolStyleLayer.textHaloWidth = [NSExpression expressionForConstantValue:@0.5];
    symbolStyleLayer.textHaloBlur = [NSExpression expressionForConstantValue:@0.5];
    symbolStyleLayer.textColor = [NSExpression expressionForConstantValue:haloColor];

Expected behavior

The rendered symbol should have even padding.

Actual behavior

Configuration

Mapbox SDK versions: 5.2.0
iOS/macOS versions: 12.4
Device/simulator models: iPhone X
Xcode version: 10.3

[chloekraw]

@alexshalamov, from a previous discussion about this implementation in gl-native, you said:

The aspect ratio of an [SDF] is changed based on a text length, thus, side borders become thin / thick if proportions vary too much comparing to an original aspect ratio of an [SDF].

One option is to create, let's say, 3 SDF images for most common 3 string lengths and then select optimal one based on a string length.

Do you think that’s the explanation for what’s going on here? This screenshot doesn’t contain many labels, but when @fabian-guerra and I were looking at the simulator, it looked like using even edge padding consistently made the bottom padding thinner than the top padding. As you noted, there was variation in the left right padding based on label character length.

Ultimately, we concluded that (5, 6, 8, 6) as (top, left, bottom, right) padding values produced the best results in our testing.

[alexshalamov]

@chloekraw Tested with master and padding is calculated correctly.

5px

10px

And yes, borders may become thicker or thinner if text box changes image's aspect ratio.

[chloekraw]

Thanks @alexshalamov. @LukasPaczos can you reproduce on Android?

[fabian-guerra]

@alexshalamov I'm still seeing this issue with master are you using runtime styling and iOS?

[alexshalamov]

@fabian-guerra I use glfw-app (linux) and padding is set within the style.

[fabian-guerra]

@alexshalamov I'm using runtime styling and double checked the values from iOS where passed correctly to core and I can reproduce this issue on master.

[LukasPaczos]

I think the issue is also reproducible on Android. In the below example, I added a 5px top and bottom padding using RTS, each box is also 5x5px. You can see that at the top you can fit 2 boxes which would mean that the top padding is twice the size of the bottom one, even though they were set equally to 5px.

This would confirm what @fabian-guerra is seeing on iOS, but I'm not sure if my methodology is correct. Can that be related to the glyphs themselves? Can they be offset?

[alexshalamov]

@LukasPaczos talked with @fabian-guerra, issue could be related to runtime styling, as I cannot reproduce bug when property is set via style json. Will take a look tomorrow.

[alexshalamov]

Tried to reproduce with style that @fabian-guerra gave me, I can see that padding between text box and icon is correct, however, inside text box glyphs are shifted, that could be due to the other symbol layer properties:

• line width
• justification
• anchor
• section scale

With default style values

            "layout": {
                "icon-image": "plate",
                "icon-text-fit": "both",
                "text-font": [
                    "DIN Offc Pro Regular",
                    "Arial Unicode MS Regular"
                ],
                "symbol-placement": "point",
                "icon-text-fit-padding": [10, 10, 10, 10],
                "text-field": "垂直ラベル"
            },

I get following result:

[chloekraw]

Thanks to @alexshalamov @fabian-guerra's thorough investigative efforts, we've confirmed there's no bug in core. The issue is caused by differing font baselines and mapbox/mapbox-gl-js#191 is needed in -native to resolve.

Specifically in the OP, there's extra top padding in Noto Sans CJK JP Medium.