Wrapping Text with different WrapWidth for Rows

Question

Hello,

I want to add a text view with a asymetric size. The second row should have a greater wrapwidth then the frst, because in the left top corner should be some space left for a button and the text should "surround" this button.

Do I have to split the text and put them into different Views, or by usage of an Attributed Text insert some formattings to generate different paragraphs?

What is the recommanded way to do this?

The wrapping of the texts depends on the chosen language, so I need some detection algorithms to recognize the wrapping and to adapt the wrapwidth of the second row.

Kind Regards Jonas

Answer 1

Hello Jonas,

both approaches are valid:

Option 1: With AttributedText view, the necessary wrap is performed automatically. So it appears to be simple for me. You want the text to surround a button. For this purpose use a transparent bitmap matching the button size and insert the bitmap at the beginning of a text paragraph. Assuming, you have the bitmap prepared and added to the Attributed Set at position 2, then following string would display the bitmap followed by the text:

AttrText.String = "{parl}{img2}Lorem ipsum ...";

Option 2: You can use several Text views and arrange them so that part of the text is displayed in the first view and the rest in the second view. For this purpose:

- configure the upper Text view so that its height is small enough to display exact one text row. The second Text view should be arranged just below the upper Text view.

- configure the Alignment of the BOTH Text views to be AlignHorzLeft, AlignVertTop.

- configure the the both Text views to perform Text Wrap.

- Add a new slot method to your GUI component and connect it to the OnUpdate property of the upper Text view. This is explained in the section Arrange other views on the content of the Text view.

- In the slot method implement following code to obtain a text portion without the first row and assign it to the second Text view:

- The text to display is then assigned to the upper Text view only, The second Text view is updated automatically via above slot method implementation.

Option 3:  More hardcore approach: Do determine the optimal split position you can calculate the width of the text by using the methods of the Resources::Font class. For example, with the method GetTextAdvance() you calculate the width of the text. With a loop you iterate over the string and step step by step determine the amount of characters fitting in the first text view. Knowing this you split the text in two portions.

I hope it helps you further.

Best regards

Paul Banach

Comments

This helps a lot. Thank you so much.

Option 1 is pretty smart. I did not thought about a template/placeholder bitmap.