Label text misaligned

CesiumJS
1

I’m experiencing the bug here: Small fonts have misaligned glyphs · Issue #8474 · CesiumGS/cesium · GitHub
where label text doesn’t look right.
I tried the suggestion to use a canvas in a billboard here: Small fonts have misaligned glyphs · Issue #8474 · CesiumGS/cesium · GitHub

The billboard solution worked great when there were just a few. When I had dozens, some of them have problems. You can see in this screenshot the label on the top (uses billboard) has “p” and “f” letters that are messed up. The label on the bottom (traditional label) has letters that aren’t aligned.

image

Is there any other workaround to this bug?

2

I found that keeping the font at 30px and using scale or scaleByDistance made it look much better. And in some cases scaleByDistance worked better than scale. I set nearValue and farValue to the same thing.

3

Are there any other workarounds to this issue?
Using the ‘scale’ property still results in the same misaligned text for me, and the ‘scaleByDistance’ property does not work at all for me.

4

Hi @barrettn, welcome to the community!
Sorry to hear the existing workarounds are not working for you. Could you add some information about your use case, operating system, and browser to the issue at Small fonts have misaligned glyphs · Issue #8474 · CesiumGS/cesium · GitHub? This could help us with prioritization and debugging.

5

@jjhembd I was actually able to get the ‘scaleByDistance’ property to work with this syntax:

      scaleByDistance: {
        nearFarScalar: [1.5e2, 0.14, 1.5e7, 0.14]
      },

I am building CZML objects in a backend runtime without access to Cesium API’s, so I have to define the Cesium objects with plain javascript. That’s why I was having the issue.