How would you highlight text in a TextLayout?

[lcarsos]

I might just be very thick, is there a way to highlight a word inside a TextLayout? I thought it would work just like changing the text color, or size like the bottom of the text layout demo. I can change the color of text, and using the color_fill_hover option works, but only if the text is also selected.

{
    var layout = dvui.textLayout(@src(), .{}, .{});
    defer layout.deinit();

    const opts: dvui.Options = .{
        .color_accent = .{ .color = dvui.Color.yellow },
        .color_fill = .{ .color = dvui.Color.yellow },
        .color_fill_hover = .{ .color = dvui.Color.yellow },
    };

    layout.addText("This text can be ", .{});
    layout.addText("highlighted", opts);
    layout.addText(". But this won't be.", .{});
}
{
    const opts: dvui.Options = .{
        .color_accent = .{ .color = dvui.Color.yellow },
        .color_fill = .{ .color = dvui.Color.yellow },
    };
    var layout = dvui.textLayout(@src(), .{}, opts);
    defer layout.deinit();

    layout.addText("This text can be ", .{});
    layout.addText("highlighted", opts);
    layout.addText(". But this won't be.", .{});
}

I thought I might be able to be clever, and have adjacent TextLayouts, but being separate widgets they get drawn on separate lines.

[RedPhoenixQ]

TextLayoutWidget appears to not do anything with background (except for selection highlighting). I don't think there is a way to do this currently, except modifying TextLayoutWidget or doing the rendering manually with dvui.renderText.

Text rendering should probably allow background colors. I'll see how hard it would be to make your code work, because I think it should.

[RedPhoenixQ]

I just pushed #481. You could try those changes as see if it achieves what you were looking for (by using the branch as your dvui dependency or applying the diff to your local copy)

[david-vanderson]

@lcarsos You are right, there is no way currently, sorry! We are working on it, follow #481 - Thank you @RedPhoenixQ!

[lcarsos]

Yep, that does the thing. Dang it, tho! You guys are just too fast. I was fishing for easy first tickets, and was wondering if I just couldn't read the docs.

The highlight hugs pretty close to the text. As an extension on top of this, for the thing that I actually want to do in my project, I'm trying to add padding, and border radiuses around the text. Would you suggest that I keep on extending functionality into TextLayout? Or am I at the point that I need to be making by own custom widget?

[david-vanderson]

Let's try to extend TextLayout, since otherwise you'd have to reimplement so much stuff. Also I assume if you want something then other people will too.

Can you file an issue or PR with details about what you want? That way we can provide advice and help think through the implications. If you are looking to implement it yourself, then put that into the description. Thanks!

[RedPhoenixQ]

Oh sorry! I'll merge #481 and then you are free to extend it. The only reason it couldn't be added to TextLayout is that is would be slightly confusing that the padding option only applies visually, and doesn't move where the text gets displayed.