Left aligned cropped text rendering

[Luis Grimaldo]

Hi,

I've been trying to render the text "Hello world!" within a (imaginary bounding) box that purposely doesn't fit the word itself. To illustrate the box's width in this example I've delimited the text in the following illustration by "|", I'd like this text to be left aligned and truncated by using ellipsis (on the left) as pictured here |...world!|.

My current approach is using the skparagraph class, by using a ParagraphBuilder that takes in a paragraph style with ellipsis enabled and set to "...", text align set to kRight (have tried kEnd too) and maxLine set to 1 as that's all I need for now. Then upon calling Build() I just render the resulting Paragraph object. However, the rendered image shows |Hello...|. Not sure if this is a bug... How can I accomplish the desire rendering?

Thanks,

Luis

[jlav...@google.com]

You also have to set text direction on paragraph, for instance: paragraph_style.setTextDirection(TextDirection::kRtl);

Ellipsis is attached accordingly to text direction, not to text align.

[Luis Grimaldo]

If I do setTextDirection to kRtl it shows |...Hello| which is still not what I'd like. What can I do to get |...worldl!| ?

[jlav...@google.com]

Well, I could think of one way of doing it but I do not like it much.

You have to tell SkParagraph that your text is actually RTL (by adding control symbols u202E at the beginning and u202C and the end of the text).

It will then treat the text backwards and will cut it the way you want.

Then you have yo revert your text to negate the effect of  these control symbols: u"\u202E!dlrow olleH\u202C".

This text works as you want, I just double checked.

Notice, that reverting the text programmatically is not that easy since you cannot assume that every codepoint takes only one byte so you cannot revert it byte by byte.

I would convert the text into UTF32, revert it there (since in UTF32 every codepoint takes single position) and then convert it back to UTF16.

Let me know if it works for you.

[Luis Grimaldo]

I would rather not do that because programmatically converting to RTL is fairly difficult, there are a lot of rules other than just appending those characters and inverting the text. I am trying to implement a text field, also I would like to have the option to RTL when the end user actually have an RTL language. Does Flutter use skparagraph, asking because I see a lot of comments mentioning Flutter? can we use a lower level API (maybe in skia itself) to accomplish this?

[jlav...@google.com]

Yes, Flutter is using SkParagraph. 

For RTL language the ellipsis will be placed correctly. For LTR language (as in your example) there is no good way to make SkParagraph treat it as RTL without reverting the text.

[John Stiles]

In a RTL language, is |…Hello| not the correct truncation of |Hello world!| for a text box?

I am not an RTL language user but I wouldn't have expected truncated text to show the end of the string in any text-direction. 

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/a68ebe0a-92ed-4b76-bf60-124ba8e37cc6n%40googlegroups.com.

[jlav...@google.com]

In RTL |…Hello| is the correct truncation.

[Luis Grimaldo]

what I am trying to accomplish is implementing a text field (similar to the iOS one), where when you overflow, typing in LTR language, it aligns the text backwards to always show what you are typing and it shows an ellipsis at the other end, such as |...world!|

[Julia Lavrova]

Unless you use a trick similar to the one I suggested you will have to implement this behavior yourself.

SkParagraph always cuts off text from the end and adds an ellipsis there.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/6475aceb-6886-498c-bf02-3cff26528c5cn%40googlegroups.com.