How to use subscript and superscript text in libgdx?

Question

How to use subscript and superscript text and number in Libgdx.

Answer 1

I'm afraid there is no default mechanism to make subscript or superscript but it seems to be quite simple when using Scene2d and its Label class.

The idea is to render normal label with your text (like for example some number) and then calculate and add to stage smaller version of the label with text of subscript or superscript. The code would looks like:

    Label label = new Label("2", skin, "default");
    Label subscript = new Label("n", skin, "smaller");

    subscript.setPosition(label.getX() + label.getWidth() + xLittleOffset, label.getY() + yOffset);

If you don't want to hold two styles of the Label you can just create subscript as default version of it and just apply some scale.

    Label subscript = new Label("n", skin, "default");
    subscript.setFontScale(0.5f);

    ...

---

Of course it is possible to achieve it without using Scene2d but simple batch rendering, just render smaller text after normal, using some y axis offset using

draw(Batch batch, java.lang.CharSequence str, float x, float y, float targetWidth, int halign, boolean wrap)

version of draw function. The code would be like:

    BitmapFont font = createTheFont(); // here you are creating the font

    //...

    //in your render function:
    batch.begin();

    font.draw(batch, "2", x, y, width, halign, false);

    font.setScale(.2f);
    font.draw(batch, "n", x + width, y + someOffset, n_width, halign, false);

    batch.end();

---

If you need to render subscript/superscript inside a Label or text it will be a little harder but not impossible - all you need to do is to calculate position of your glyph some way and leave a little space for it adding some spaces in original.

Calculating glyph position is rather hard but possible you can iterate over Label GlyphRuns and its xAdvances values (which are somekind of left offset). Try to figure out it yourself basing on following:

    float x, y; //positions of glyph after which you want to add subscipt/superscript

    for(GlyphRun run : label.getGlyphLayout().runs)
    {
        for(int i = 0; i < run.xAdvances.size - 1; i++)
        {
            x += run.xAdvances.get(i));
        }

        //now you are after run so you can modify y position
        y += rowHeight; //I'm not sure but it probably should be that rowHeight = label.getStyle().font.getLineHeight();
    }

Look at this article to learn something more about glyphs, fonts etc in the new Libgdx version

Unfortunately I don't have a good idea how to achieve it when using batch

You can read more about Scene2d here: https://github.com/libgdx/libgdx/wiki/Scene2d

Answer 2

I extended accepted answer to be more robust and general and Now it can be used in tables along with pre and post text in a scientific notation.

It also added a function to parse computer scientific notation parser

code is in this gist

Answer 3

Get subScript and superScript in libgdx.

private Group createSubScript(String str1, String str2, LabelStyle labelStyle) {
    Group grp = new Group();
    Label label1 = new Label(str1, labelStyle);
    // label1.setPosition(20, 80);
    grp.addActor(label1);
    Label subscript = new Label(str2, labelStyle);
    subscript.setFontScale(0.7f);
    subscript.setPosition(label1.getX() + label1.getWidth(), label1.getY() - 4);
    grp.addActor(subscript);
    return grp;
}

private Group createSuperScript(String str1, String str2, LabelStyle labelStyle) {
    Group grp = new Group();
    Label label1 = new Label(str1, labelStyle);
    // label1.setPosition(20, 80);
    grp.addActor(label1);
    Label subscript = new Label(str2, labelStyle);
    subscript.setFontScale(0.7f);
    subscript.setPosition(label1.getX() + label1.getWidth(), label1.getY() + 4);
    grp.addActor(subscript);
    return grp;
}