Align Label in columns

Hey ,
I would like to have a label that contains 3 rows.
I am using \n char to create a new line, but it seems that the columns of my label are never aligned.
Is there a way to compute my string at runtime so i will get my columns aligned?

@Itay_ba

Thank you for your question! Based on how we configure various sandcastle demos and my personal experience with our API, I’m assuming that you are using the InfoBox object to create your label. Is this correct?

If so, it is important to note that this object uses iframe to display the description box. Thus, I suspect that this is really more of an iframe question. iframe and web dev related forums will likely be your best resource here.

-Sam

@sam.rothstein thank you for your answer.
Actually I am using Cesium Label class.

When you mention rows, \n, and columns, then I wonder whether this might be an issue of the font that is being used. For example, when adding a label like this

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: 
        "One row         :   1.23\n" + 
        "Another row     :  23.4\n" + 
        "And one more row: -34.5",
    },
  });

then the “columns” will not be aligned, and it will look like this:

Cesium Labels 01

If this is the case, then one solution could be to use a Monospace font - as in

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      font: "24px Monospace",
      text: 
        " One row         :   1.23\n" + 
        "Another row     :  23.4\n" + 
        "And one more row: -34.5",
    },
  });

(Note that there is one additional space at the beginning of the first line. I don’t know why this is required - and this might, in fact, be a bug (!?), but without that, the first line wasn’t aligned properly).

The result would then be

Cesium Labels 02

If this is not what you’ve been talking about: Sorry for interrupting.

Hi @Marco13 thank you for your input.
This is what I was talking about.

1 Like