Text wrap

[RangerMauve]

Hi, what's the appropriate way to handle wrapping text?

Preferably with text that's been created with the AttributedString API.

[RangerMauve]

Sorry, let me clarify a little.

I understand that you can use the DrawTextLayout API in order to draw text with wrapping within an area, but that only works if the area takes up all the space in a container.

My use case is rendering a markdown document using libui. This requires me to have a vertical layout that combines paragraphs of text along with other elements like images.

My ideal would be that an Area filled with text would automatically set it's height so that I could stack them on top of each other with other content in between.

Does this seem possible with the library in it's current state?

Right now I'm trying how to figure out how to build something that attempts to draw the text in an area and resizes the area to just fit the text.

[RangerMauve]

Oh dang, just noticed that UIImage isn't supported yet. 😅 I guess I'll focus on plain text rendering for now, then.

[mischnic]

My ideal would be that an Area filled with text would automatically set it's height so that I could stack them on top of each other with other content in between.

Area controls are always stretchy (I think). You would be better off with using a single area and rendering everything inside. You should be able to get the actual width and height the DrawTextLayout takes up and do the layout yourself with this information.

(This works fine in normal areas, but not so much in scrolling areas: andlabs/libui#401)

[RangerMauve]

Any ideas on how I should handle mixed content in the future? Or is that even realistic?

I'm definately going to need to rely on scrolling since the markdown documents could be quite long.

Maybe libui isn't the right approach for doing something like this. 😅

[RangerMauve]

Also, this might not be the point of the issue, but how would I set multiple attributes at once?

Can I use appendAttributed to make something both italic and underlined?

It doesn't look like it's possible, but I might be missing something. 😅

[mischnic]

Any ideas on how I should handle mixed content in the future? Or is that even realistic?

I think you should be able to pull this off.
(My bad, the issue I linked exists because I created a textlayout with width=0. - They should work fine.)

Do you want to create something like this?

Maybe libui isn't the right approach for doing something like this. 😅

Yet.... 😄 ?

[mischnic]

Also, this might not be the point of the issue, but how would I set multiple attributes at once?
Can I use appendAttributed to make something both italic and underlined?
It doesn't look like it's possible, but I might be missing something. 😅

That is possible: you can pass as many attributes to appendAttributed as you want:

libui-node/examples/text.js

Lines 48 to 50 in 8e3bc58

	str.appendAttributed('underline color',
	FontAttribute.newUnderline(libui.textUnderline.double),
	FontAttribute.newUnderlineColor(libui.textUnderlineColor.custom, new libui.Color(1.0, 0.0, 0.5, 1.0)));

Also described (not as clear) here: https://github.com/parro-it/libui-node/blob/master/docs/attributedstring.md#appendattributed

[RangerMauve]

Do you want to create something like this?

Yeah, sort of like that, but it'd look like similar to how Github renders markdown content with Images and stuff spaced between the sections of text.

So far my biggest blockers are:

• No support for images in the node binding
• No support for hyperlinks in the text rendering

I think that combined this makes libui a bad target for rendering markdown content. I'll probably park that idea or concede with supporting a subset for now.

you can pass as many attributes to appendAttributed as you want

Dang! I totally missed that.

Thank you for the help! I'll see what I can do with this. 😁

[mischnic]

A webview might come in the near future (there an issue in andlabs/libui), so you could create a html file from markdown and show that.

[RangerMauve]

Yeah, part of why I'm going this route is to experiment with UIs that don't use the web.

My long-term goal is to create something like Firefox's reader view where instead of using the DOM and CSS, I'll extract the semantic content from the page and use native UI elements to render it.

I got this idea after being frusterated with browsers taking up hundreds of megabytes of ram to show just a little content. The goal is to use less system resources, though, I'm not sure how realistic that will be. 😅

The content I want to render in the end will look kind of like markdown, so that's why I'm starting with getting that to render with libui.

[mischnic]

Hyperlinks in attributed string: andlabs/libui#303
Drawing images (not in tables): andlabs/libui#318
(The uiImage that is used by the table API is rather an icon that can have multiple resolutions, e.g. for High-DPI and normal displays. So not really "image".)

[RangerMauve]

Thanks! I've subscribed to both of those so I can see when they're ready. :D

[VarLad]

@RangerMauve
Were you able to achieve this？
I need gui to display rendered markdown too...