Add adjustment to rendering glyphs

[Kanahiro]

close #1002

In based on discussion in the issue and mapbox/tiny-sdf#44 (comment), adjustment codes are added, results are following, it seems good. Someone who review my codes, please judge whether these codes are not backport to mapbox-gl-js.

before

after(topAdjustment = 27)

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• 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.
• Suggest a changelog category: bug/feature/docs/etc. or "skip changelog".
• Add an entry inside this element for inclusion in the maplibre-gl-js changelog: <changelog></changelog>.

[HarelM]

Thanks for taking the time to open this PR!
Do you think you can try and add a render test so that this won't happen in the future?
I think the style you linked in the issue can be a great input to the render tests.
See here for more info:
https://github.com/maplibre/maplibre-gl-js/tree/main/test/integration#writing-new-tests

[github-actions]

Bundle size report:

Size Change: -184 B
Total Size Before: 194 kB
Total Size After: 194 kB

Output file	Before	After	Change
maplibre-gl.js	185 kB	185 kB	+3 B
maplibre-gl.css	9.43 kB	9.25 kB	-187 B

ℹ️ View Details

Source file	Before	After	Change
src/render/glyph_manager.ts	946 B	949 B	+3 B

[Kanahiro]

I've tried to make a test with same style in the issue but the issue is not reproduced in test-render, I'm not sure but is this only on browser problem...?

// style.json
{
    "version": 8,
    "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
    "sources": {
        "sample": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": [0, 0]
                        },
                        "properties": {
                            "name_en": "abc",
                            "name_ja": "あいう",
                            "name_ch": "阿衣乌"
                        }
                    }
                ]
            }
        }
    },
    "layers": [
        {
            "id": "sample-text-left",
            "type": "symbol",
            "source": "sample",
            "layout": {
                "text-anchor": "top",
                "text-field": "{name_ja}\n{name_en}",
                "text-font": ["NotoCJK"],
                "text-offset": [-10, 0]
            }
        },
        {
            "id": "sample-text-center",
            "type": "symbol",
            "source": "sample",
            "layout": {
                "text-anchor": "top",
                "text-field": "{name_ja}{name_en}{name_ch}",
                "text-font": ["NotoCJK"],
                "text-offset": [0, 0]
            }
        },
        {
            "id": "sample-text-right",
            "type": "symbol",
            "source": "sample",
            "layout": {
                "text-anchor": "top",
                "text-field": "{name_en}\n{name_ch}",
                "text-font": ["NotoCJK"],
                "text-offset": [10, 0]
            }
        }
    ]
}

Even though use completly same style to https://jsbin.com/yocutiwata/edit?html,output, the problem is not reproduced.

[HarelM]

This might explain why we didn't see this issue... :-/
Can you fix lint?
Can you share the images that were created? You see the text correctly in the generated image? Can you share the image here?

[Kanahiro]

This image rendered with above style.json, this is correct.
Positions of texts are not changed even whenconst top Adjustment = 27 is not written.

[HarelM]

OK, I'll open an issue to see how this can be improved in the future in terms of testing in the browser maybe and not using node execution, as it seems that there are changes between the outputs (which is not that surprising to be honest).
In any case, this issue still needs to be fixed regardless, so please fix the lint errors and I'll merge this.
Thanks again for all your work!