Dvui: Problem with displaying unicode characters

Help
,
1

Hi,

im currently playing around with the dvui gui. As a starting point I took the src/examples/app.zig file from the dvui repo as a starting point. I want to place some unicode characters in the frame. So as an example I modified the frame() function in the following way:

pub fn frame() !dvui.App.Result {
    {
        var hbox = dvui.box(
            @src(),
            .{ .dir = .horizontal },
            .{
                .style = .window,
                .background = true,
                .expand = .both,
            },
        );
        dvui.label(
            @src(),
            "¯\\_(ツ)_/¯",
            .{},
            .{
                .gravity_y = 0.5,
                .gravity_x = 0.5,
            },
        );

        std.debug.print("¯\\_(ツ)_/¯", .{});
        defer hbox.deinit();
    }

When compiling the frame shows the characters in the middle of the window, but the japanese katakana (tsu) character that forms the eyes and the smile is replaced by a box.

I added a print to the terminal to check whether it was a problem with unicode strings in general, but that seemed to work fine.
I guess it is a problem with the default fonts in dvui, but I cannot figure out how to properly use custom fonts.
In the AppInit function in the example file there is a comment about loading custom ttf fonts. That seems to work.

    // Add your own bundled font files...:
    // try dvui.addFont("NOTO", @embedFile("../src/fonts/NotoSansKR-Regular.ttf"), null);

But how do I actually use it in the label where I display text?
The last argument of the dvui.label has a .font member, but I cannot figure out how to reference the font that I loaded in the beginning.

I would appreciate any help, pointers to the relevant sources, or documentation.
Thanks

2

I’m not familiar with dvui, but it seems the .font member expects a dvui.Font.

Does it work to create it using .find(.{.family = "NOTO"})? It also has fields to set the size and style, but those have a default value.

1 Like
3

Thanks for your help. It was not quite correct, so here is what I found after a little bit more digging:

.font = .{ .family = dvui.Font.array("NOTO")

.family does not simply take a string. It needs to be converted into a sentinelled string of a certain length. No idea why the function is called array, and not something like fromStr or getFromStr.
But it works now.

4

You should not need to do that. The DVUI code contains lots of lines similar to the one below:

        .font_body = .find(.{ .family = "Aleo" }),

If you confirm it is not working, please log an issue with a reproduction.
All it needs is a 0 terminated string, which Zig constant strings are.

The way you are doing it is certainly not standard, and I’m not actually sure why it is working for you.

Also note that DVUI’s support for unicode is pretty minimal. It can display unicode text, but I expect lots of other things won’t work. Calculating word-breaks in text entries as one example.

1 Like
5

Sorry that was less than easy, and thanks for digging into it.

@phatchman is right, the general way to reference a font for a specific widget is .font = .find().

Font and Unicode support in dvui is a very active area of development and we haven’t had time to make onboarding less painful so far. Sorry!

2 Likes
6

Thank you for your reply. I can confirm that

.font = .find(.{ .family = "noto" }),

works perfectly fine.

@TerenceTux sorry, I copied not the entire line you posted. Thats why I got a type missmatch, so it looked like it did not work.