How can I align the bottom of two text lables

How-to
1

I’m on v9.0

I’m trying to make two text labels with different font sizes align as if they were written on the same horizontal line. The code I’ve tried is

int align_content_bottom(lv_obj_t *reference, lv_obj_t *alignee) {
    syslog(LOG_ERR, "aligning");
    lv_area_t refarea;
    lv_area_t algnarea;
    lv_obj_update_layout(alignee);
    lv_obj_get_content_coords(reference, &refarea);
    lv_obj_get_content_coords(alignee, &algnarea);
    
    lv_obj_set_y(alignee, lv_obj_get_y(alignee) - (algnarea.y2 - refarea.y2));
    lv_obj_update_layout(alignee);
    return 0;
}

Although the content bottoms are listed as the same, the alignee is always below the reference, regardless of which uses the bigger font. I may be misunderstanding the content area, but how can I find the true bottom of the text which is drawn?

2

Hey,

You can calculate is the required offset like this:

    lv_obj_t * label1 = lv_label_create(lv_screen_active());
    lv_label_set_text(label1, "Asyb.");
    lv_obj_set_style_text_font(label1, &lv_font_montserrat_40, 0);

    lv_obj_t * label2 = lv_label_create(lv_screen_active());
    lv_label_set_text(label2, "It is a text. ");
    lv_obj_set_style_text_font(label2, &lv_font_montserrat_16, 0);
    lv_obj_set_x(label2, 150);

    int32_t y = lv_font_montserrat_40.line_height - lv_font_montserrat_40.base_line;
    y -= lv_font_montserrat_16.line_height - lv_font_montserrat_16.base_line;
    lv_obj_set_style_translate_y(label2, y, 0);

image

1 Like
3

Going back to this problem after a while I made a function which aligns the baseline of one object to the baseline of another based on the above reply:

int align_text_base_line_to(lv_obj_t *obj, lv_obj_t *base) {
    const lv_font_t *obj_font = lv_obj_get_style_text_font(obj, LV_PART_MAIN);
    const lv_font_t *base_font = lv_obj_get_style_text_font(base, LV_PART_MAIN);
    if (!obj_font || !base_font)
        return -1;

    int y = base_font->line_height - base_font->base_line;
    y -= obj_font->line_height - obj_font->base_line;
    lv_obj_set_y(obj, lv_obj_get_y(base) + y);
    return 0;
}

Thank you for your help. Hope this cuts a corner off the next person trying to do this.