[Request] align-text for canvas' api support more alignments

Feature request
1

When lv_canvas’ obj draw a text,
at current api support only 3 text-alignments.

  • LV_LABEL_ALIGN_LEFT
  • LV_LABEL_ALIGN_CENTER
  • LV_LABEL_ALIGN_RIGHT

But if a developer want to align the text by baseline or other type.
It is not easy to align the text.

I observe from the other library such as TFT_eSPI
in the library TFT_eSPI when draw text to the tft,
it supports many type of text-alignments
as the following link

If lvgl’s lv_canvas or lv_draw_label(..) supports for many text-alignments more than at the current point of any version of lvgl,
it will be convenient for manupulating the text-alignment.

Thank you.

2

So do you suggest to replace LV_LABEL_ALIGN_LEFT/RIGHT/CENTER with higher-level alignments which and treat x/y as offset?

Could it be used with other drawings too? E.g. to draw a rectangle to the right top corner.

It’s only my personal opinion but I think with:

  • x
  • y
  • max_w
  • align

you can easily position the label. Or is there complicated in some situations?

3

Example.
When a maker want to display a label on a line,
the maker set only

  • x, y
  • datum : L_BASELINE, C_BASELINE, R_BASELINE

as the following picture,
line is at y = 120
the maker set only x = 120, y = 120 (center of the screen) and datum = C_BASELINE
capture_00069

Or another example
When a maker want to display number on watch-dial,
he just calculate a rotated point around a pivot point.
and set only the rotated point x, y with MC_DATUM for drawing number on the watch-dial.

capture_00064

4

I see, thanks for the examples.

In the case of labels align has a different meaning. It determines the alignment of the lines, similarly to the Left/Center/Right alignment in Office Word.

Do you have an idea about how to handle C_BASELINE with multi-line text?

5

Thank you for meaning of alignment.

C_BASELINE for multi-line text like this way?

situation :
set x, y = (120,120)
if a text is a multi-line text,
the next line is alway x = 120 ?

capture_00070

1 Like
6

I don’t know if this ended up getting any traction but I think that something like this CSS feature Leading-Trim: The Future of Digital Typesetting | CSS-Tricks - CSS-Tricks would accomplish this request as well as some visually wrong alignment I have been facing with labels.

Do you think something similar can be implemented @kisvegabor ?

Edit:
Another source Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Medium

7

Interesting idea! It might be easier to handle than the baseline and can be even more flexible. Could you open an issue about it on GitHub?

1 Like
8

Issue added: Add support for CSS-like Text Leading-Trim · Issue #6131 · lvgl/lvgl · GitHub

1 Like
9

Thank you, I’ll look into it today!