How to display text in Hindi Using LVGL?

,

Description

How to display some text using Hindi Fonts

What MCU/Processor/Board and compiler are you using?

I am testing this behavior on the Simulator

What LVGL version are you using?

8.3.11

What do you want to achieve?

Just wanted to display the text in the Hindi language. For example, as seen in the below screenshot, the space is not rendered properly, and the second text is also not correct.
“Hello World” text in Hindi is हैलो वर्ल्ड , but it is not rendered properly.

What have you tried so far?

Read forums but couldn’t make this simple program work.

Code to reproduce

I use the LVGL simulator project and then used Square Line Studio to convert fonts, and tried to display it on the label.

The code block(s) should be formatted like:

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    /*Initialize LittlevGL*/
    lv_init();

    /*Initialize the HAL for LittlevGL*/
    lv_win32_init(hInstance, SW_SHOWNORMAL, 800, 480, NULL);

    /*Output prompt information to the console, you can also use printf() to print directly*/
    LV_LOG_USER("LVGL initialization completed!");

    /*Run the demo*/
    // lv_demo_widgets();
    ui_init();

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }
    return 0;
}

and then the ui_init function, which is generated using Square Line Studio is as below.

void ui_Screen1_screen_init(void)
{
    ui_Screen1 = lv_obj_create(NULL);
    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags

    ui_Label1 = lv_label_create(ui_Screen1);
    lv_obj_set_width(ui_Label1, 800);
    lv_obj_set_height(ui_Label1, 100);
    lv_obj_set_align(ui_Label1, LV_ALIGN_CENTER);
    lv_label_set_long_mode(ui_Label1, LV_LABEL_LONG_SCROLL);
    lv_label_set_text(ui_Label1, "हैलो वर्ल्ड");
    lv_obj_set_style_text_align(ui_Label1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(ui_Label1, &ui_font_Akshar40, LV_PART_MAIN | LV_STATE_DEFAULT);

}

Screenshot and/or video

I am using Akshar font, If use this font in Word, the document works fine, as shown below. (I don’t know if this is the correct criteria to judge a font)
image

So basically I have two problems, one is space not rendered and the second is why the second word is not rendered properly.
I converted this “Akshar” font using Square Line Studio, as shown below.

As shown above, in the “font manager” screen of Square Line Studio, I converted the Symbol also for space, but it doesn’t work.
The second problem of the second word is not rendered properly, I can’t type it properly in the Square Line Studio itself, as shown below.

So even in Square Line Studio, it is rendered strangely, but in “code” it is written properly.
Either I am doing something wrong or don’t know, please help me to fix this problem, or LVGL doesn’t support the Hindi language?
The following is the font that I am using. Thanks
Akshar-Unicode.zip (249.6 KB)

@kisvegabor
@glory-man
Apologies for tagging you guys, if possible please try to help me, this is a simple “Hello World” for displaying something in the Hindi language.

Hi,

Let’s start with the probably simpler problem.

  • Are you sure the “space” character is really a simple space character? Could you type it manually?
  • Are you sure that the font has a “space” symbol? On Windows probably there is a fallback so even if there is no “space” in the font, it will be sued from an other one.

Hi,

Let’s start with the probably simpler problem.

  • Are you sure the “space” character is really a simple space character? Could you type it manually?
  • Are you sure that the font has a “space” symbol? On Windows probably there is a fallback so even if there is no “space” in the font, it will be sued from an other one.

@kisvegabor thanks for your response.
Regarding the first point.

  • Are you sure the “space” character is really a simple space character? Could you type it manually?
    I typed it manually by deleting the existing space, which doesn’t change anything, as seen below.

Regarding the Second point.

  • Are you sure that the font has a “space” symbol? On Windows probably there is a fallback so even if there is no “space” in the font, it will be sued from an other one.

I really don’t understand it completely, but I shared the Square Line Studio Screenshot, where I included the “space” symbol while generating fonts.

What I understood in one of the forum posts that you have worked on some projects that included Hindi fonts, and they worked fine.

But I am not able to work, out of the box, so what I mistake I am doing.

There is a YouTube channel, that posts a lot of videos related to LVGL, a few days back the guy posted a multi-language support short video.
LVGL 9, multi-language demo. Test with Added Korean & Japanese #LVGL #embeddedprojects #thatproject (youtube.com)
And even here the Hindi Language is not displayed properly, although the space works fine for him, unfortunately I don’t have sample project to cross-check.
image

Could you attach c-source file with ui_screen1_screen_init() & generated font c-file?

Here is the generated font.
ui_font_Akshar40.c (352.3 KB)
This one is ui_screen1_screen_init()
ui_Screen1.c (830 Bytes)
The rest are the files generated by Square Line Studio.
ui.c (1.2 KB)
ui.h (609 Bytes)
ui_events.h (296 Bytes)
ui_helpers.c (7.5 KB)
ui_helpers.h (3.7 KB)

Let me know what you think and what mistake I am making.

Can someone please give me some hints?

Ahhh, I’ve just spotted the problem. :person_facepalming:
In the symbol field you need to type a “space” character. Now you have “0x20” there which means: add a “0”, an “x” and a “2” symbol.
Alternatively you can write this in the Range field: 0x20, 0x900-0x97f

1 Like

Many Thanks @kisvegabor one problem is fixed.

But still, the second letter is not correct.
What could be the reason for this? In-correct font? I tried with a couple of fonts and it behaves similarly.

It seems like lvgl work correctly. I see your ui_Screen1.c and code of your second word. It coded with following sequence
e0 a4 b5 e0 a4 b0 e0 a5 8d e0 a4 b2 e0 a5 8d e0 a4 a1
e0 a4 b5 - utf8 code 935 - व DEVANAGARI LETTER VA
e0 a4 b0 - 930 - र DEVANAGARI LETTER RA
e0 a5 8d - 94D - $् DEVANAGARI SIGN VIRAMA
e0 a4 b2 - 932 - ल DEVANAGARI LETTER LA
e0 a4 a1 - 924 - त DEVANAGARI LETTER TA
It uses combine system which put 94D symbol under 930 - and gives र्, and 94D under 932 - gives ल्. But it seems like combine system is more complex, and 930 94D 932 94D 924 codes should be combined into one symbol र्ल्ड.
Devanagari utf8 code chart

thanks @glory-man for your efforts.
does this mean it is not possible to display Hindi fonts? What is your understanding?

In the same forum, @kisvegabor mentioned that he used Hindi fonts in a project and it works fine, I wonder how he was able to.

All you need is text shaping, but LVGL(even V9) not supports text shaping.

I played some tricks in LVGL and implemented showing Bengali as following picture,

However, at last, the customer said Bengali input method is also needed. Then game is over. maybe QT MCU can save me.

Text shaping is so important, I do not understand why LVGL not support it. QT MCU does well in text shaping.

1 Like

Thanks @james.Liu for your response.
Can you please explain, what tricks you did to display the Bengali language?
Because I have to display, no textual feedback is needed, if you share your knowledge with me it would be of great help. Thanks in advance.

Personally I don’t know the rules of the Bengali script. Any hint and input would be highly appreciated.

Right now there is really no complex text shaping in LVGL. What is can do is:

  • Use UTF-8 decoding on all texts
  • Handle Arabic/Persian/Hebrew with Left to Right and mixed writing directions
  • Handle the special placement rules of Arabic/Persian
  • Pinyin-IME for Chinese input

What is not working

  • Bengali and other Indian languages are just partially supported as they not processed in special way.
  • Korean text input is very tricky. I implemented it in a project but it’s not parts of LVGL yet.
  • Other special languages e.g. Thai, are not tested yet (at least by me)

Any contribution in these features would be highly appreciated!

Hi
We are encountering an issue with word rendering, particularly for the Tamil language. Could you please confirm if a solution has been implemented for this?

I am attempting to render the Tamil word ‘பிரைம்’ using LVGL, but the output appears incorrectly as ‘பிரனம்.’ Could you please assist.

I have generated Tamil fonts using the LVGL font generator.

Unicode for ரை

/* U+0BC8 "ை" */
0x1f, 0x9f, 0x8, 0x1c, 0x64, 0x5, 0xe, 0xe2,
0x61, 0xcc, 0x88, 0x61, 0x22, 0x18, 0x48, 0x85,
0x32, 0x62, 0x78, 0x71, 0x80,

I have Code attached the code.

lv_obj_set_style_bg_color(lv_scr_act(), lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_t* shutDownLabel = lv_label_create(lv_layer_sys());
lv_label_set_text(shutDownLabel, “பிரைம்”);
lv_obj_set_style_text_font(shutDownLabel, &Tamil_Alphabets_BOLD, LV_PART_MAIN);
lv_obj_set_style_text_color(shutDownLabel, lv_color_hex(0x000000), LV_PART_MAIN);
lv_obj_set_style_text_align(shutDownLabel, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);
lv_obj_align(shutDownLabel, LV_ALIGN_CENTER, 0, 0);