How to align text which has different size

For my widget I want to write text in the same line. Important text, such as numbers should be written bigger.

Before I used a textarea and the text had same size.

Now I use drawtext() but the smaller text I cannot align on the bottom together with the bigger text.

Should I use getTextDimensions() and add spacing?

function drawText(dc) {
        var spacing = 2;
        var weekNumberWidth = dc.getTextWidthInPixels(_currentWoP.get(:week).toString(), Graphics.FONT_SYSTEM_MEDIUM);
        var textWopWidth = dc.getTextWidthInPixels(WatchUi.loadResource(Rez.Strings.wop), Graphics.FONT_SYSTEM_TINY);
        var exactWeekWidth = dc.getTextWidthInPixels(" ("+ (_currentWoP.get(:exactWeek)+"W + "), Graphics.FONT_SYSTEM_MEDIUM);
        var exactDayWidth = dc.getTextWidthInPixels(_currentWoP.get(:dayInWeek) +")",Graphics.FONT_SMALL);
        var label1X = (dc.getWidth() - (weekNumberWidth + spacing + textWopWidth + spacing + exactWeekWidth + spacing + exactDayWidth)) / 2;
        var label2X = label1X + weekNumberWidth  + spacing;
        var label3X = label2X + textWopWidth  + spacing;
        System.println("DrawText");
        dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_WHITE);
        dc.drawText(label1X, dc.getHeight()/2, Graphics.FONT_SYSTEM_MEDIUM, _currentWoP.get(:week), Graphics.TEXT_JUSTIFY_LEFT | Graphics.TEXT_JUSTIFY_VCENTER);
        dc.drawText(label2X, dc.getHeight()/2,Graphics.FONT_SYSTEM_TINY, WatchUi.loadResource(Rez.Strings.wop), Graphics.TEXT_JUSTIFY_LEFT );
        dc.drawText(label3X, dc.getHeight()/2,Graphics.FONT_SYSTEM_MEDIUM, "("+ (_currentWoP.get(:exactWeek)+"W + "), Graphics.TEXT_JUSTIFY_LEFT| Graphics.TEXT_JUSTIFY_VCENTER);

Top Replies

the-ninth 1 month ago +2

Stumbled upon this old post when looking for a solution for this today.

After some further research I did find an easy solution. Graphics.getFontDescent() gives the pixels a font takes up below the baseline…

All Replies

flocsy🤠 over 2 years ago

You forgot to add | TEXT_JUSTIFY_VCENTER in the 2nd drawText IMHO

Marios007 over 2 years ago in reply to flocsy🤠

That doesn't work. i tried before. Then it is just centered.

I want that it is aligned on the bottom

flocsy🤠 over 2 years ago in reply to Marios007

But isn't that what you want?

Either way, you want to use the same vertical alignement for all 3. Either with or without TEXT_JUSTIFY_VCENTER, but the same for all 3.

Marios007 over 2 years ago in reply to flocsy🤠

No. I want bottom alignment not center alignment. I guess it is available as an option

Example made with Word ( text is written on same line (height) no matter which size the text have)

jim_m_58 over 2 years ago in reply to Marios007

In CIQ, you have to do that yourself, probably by adjusting the "y" for the different fonts. And that's not consistent between the devices.

the-ninth 1 month ago

Stumbled upon this old post when looking for a solution for this today.

After some further research I did find an easy solution. Graphics.getFontDescent() gives the pixels a font takes up below the baseline, and based on that you can move your smaller font into the right position..

Here an example, where this is applied to two vertically centered text elements. The formula would be adusted if you work without the vertical centering.

var font1 = Graphics.FONT_SMALL;
var font2 = Graphics.FONT_XTINY;
var height1 = Graphics.getFontHeight( font1 );
var height2 = Graphics.getFontHeight( font2 );
var descent1 = Graphics.getFontDescent( font1 );
var descent2 = Graphics.getFontDescent( font2 );
var adjustment = height1/2 - descent1 - ( height2/2 - descent2 );
dc.drawText( dc.getWidth() / 3, dc.getHeight() / 2, font1, "Hello ", Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER );
dc.drawText( dc.getWidth() / 3 * 2, dc.getHeight() / 2 + adjustment, font2, "world", Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER );