@abstract LabelWords does not allow for a nice line break with '\n' or '\u000D'.
Note that I am trying to work with in combination with flip:true to enable right alignment (rtl together with lineAlign:RIGHT does not show any change).
Thanks a lot!
Okay - just took a look... ya... LabelWords is a Wrapper and as far as I can remember and from looking at things... there is nothing to force a line break in a Wrapper - aside from specifying a width that would cause the break in the right place - but then other lines would break there too. Even multiple spaces to move things along so it then breaks do not seem to add space. We could probably adjust that in the parsing so rather than splitting multiple spaces as one space, we could split them into words of spaces and therefore move items along with spaces. But not sure if that is all that helpful - especially if the text is dynamic. But if you think it would help, we could add a parameter to splitSingleSpace or something like that.
@abstract What I'm trying to do is write sections with a lot of text and break them accordingly by topic.
Here's an example of what I tried to do. You can see that the line breaks in a non-fluent way: ZIM Editor - JavaScript Canvas - Code Creativity!
In practice, I need this for multiple instances of texts with several sections of several lines at a time. Some of the words need to be colored or highlighted, and in addition, occasionally it is appropriate to break the line by topic, and this can only be done manually according to logic.
Do you think your proposal would fit this?
Tnx!!
Does the text need to be responsive? Here is a sample where we parse some text into a format:
If you have a sample of what you want, then we may be able to advice further.
1 Like
@abstract - I loved your text design, it's a really, really beautiful example!
I don't have a specific text as an example, because my texts change. These are text fragments for different lessons, where occasionally the requirement is to highlight different individual words in the middle of the text, or color them, or create a background for a single word in a different color for emphasis.
I actually tried to create a kind of template, so that I could use it in all the relevant lessons.
Let's say I need exactly the text as you showed in your beautiful example, but in addition I also need to highlight the word 'skating', and also color the words 'come to lunch' and 'sandwiches'. Also, the background of the words 'my mother' will be yellow.
There should be a little more space between each fragment than the normal space between lines.
Is this understandable enough?
Thank you very much!
1 Like
Just thinking here:
LabelLetters has formatting but does not have a lineWidth to be able to automatically wrap, you have to put \n. So adding lineWidth would solve it - just tricky as we are spitting on letters and we would want the wrap to be on the word - but probably doable.
LabelWords has the wrapping but no formatting on each word - aside from STYLE with series, etc. or going back and changing the format after the Wrapper is made. BUT Wrapper does not support new lines. The only way I could see new lines in a wrapper would be to make them separate wrappers and then push the wrappers down when the one above gets larger in height.
Probably LabelLetters is the easiest to work on - we can try adding a lineWidth parameter. Too bad that certain formatting changes the size of a letter/word otherwise we could predetermine the wrapping with a normal Label - and even then use the labelWidth and labelHeight together to make it fit within a box. Add the \n where the Label wraps and pass the result into the LabelLetters.
Just working on a few other things... will try and see if this works hopefully later today.
1 Like
Here we can break automatically but after a word is too long. Now we have to figure out how to go back to the previous space and break there. And there is a lot going on...
We could either look ahead - but that is awkward as there are all sorts of tests for the html of the letter. Or we add a \n at the previous space and remake all the letters from the start. I think that may be the route to go.
Hmm... maybe instead of remaking the letters we can just make them all. Then go through them and iteratively place them. Ya. So leave it how it is where it makes a long line. Then run that through the lineWidth test.
1 Like
Hmmm... the lineAlign messes up the calculations... I guess I can measure the distance from the first letter in the line rather than from 0. No... better to just align left if lineWidth then deal with alignment later after breaking into lines.
1 Like
Getting there
Just have to do the final placing - but will work on that tomorrow.
1 Like
Thanks @abstract, I really appreciate your efforts! And it's going to look great!
Also, I hope everything works well with the right alignment like in Hebrew.
Thank you very very much! 
1 Like
const text = new LabelLetters({
label:"Will this wind be so <font color=purple>mighty</font> as to lay low the mountains of the earth?",
lineWidth:412,
lineAlign:RIGHT
})
We have patched it in to ZIM 017 - do a refresh.
LabelLetters has rtl so we think it will work as expected but if not, show us what the problem is and we can have a look.
1 Like
this is good news!
i had to use html tags in LabelLetters but the width had to be fixed
i spent quite a lot of time trying to break the lines with the tags. that proved to be not a good idea
i ended up using the createjs.Text object where you can set its lineWidth property and then using the getMetrics method to obtain the lines first without the tags
i inserted the line breaks using \n and because i knew what was between the tags i then inserted the tags into the text string
it worked for what i was trying to do (i only had font, b and i tags)
it is not 100% accurate however, since bold text takes more space
2 Likes
@abstract, Here's what happens to me:
-- None of the options are quite in the correct order
-- The correct order of the sentence, as I expect it to be, is this:
i tested the new version with hundreds of html formatted texts (latin and greek letters) and worked just fine
@Netanela, you might find this useful. i used this function to get the lines (plain text, no tags included)
function splitToLines (text, width, fontSize, fontFamily) {
const txt = new createjs.Text(text, `${fontSize}px ${fontFamily}`);
txt.lineWidth = width;
return txt.getMetrics().lines;
}
joined the lines with '\n', inserted the tags into the strings and made the LabelLetters.text property equal to those strings
So @Netanela - it looks like it is exactly backwards - so the letters array needs to be reversed for RTL. Will have a look but it may be tomorrow night... I have a rave tonight. Might get it done be we are supposed to be watching the Wild Robot at dinner.
1 Like
Yes - we considered catching the wraps with lineWidth on a a Label but then we have the font tag with different sizes too.
1 Like
Thanks @pank
For now, it still doesn't work out so well for me:
https://zimjs.com/beam/splittolinesstillnotworking/show
@Netanela - for the example I posted 3 days ago, it looks like it is exactly backwards compared to your expected order - so the letters array needs to be reversed for RTL. Does that seem right? We were just waiting for a confirmation before trying that. Off to an open house now, then a dinner but will try again soon.
@abstract
From the options I listed above: ZIM Editor - JavaScript Canvas - Code Creativity!
The third (and sixth) text was already the best: the words read well from right to left, but the problem is in the order of the parts: The first part of the text appears on the left, followed by the second part to its right, and then the third part to its right.
The order should be reversed: the first part of the text should appear on the right, followed by the second part to its left, and then the third part to its left.
There are two things here:
- The letters should start on the right and continue on the left, and
- The parts of the sentence should also start on the right and continue on the left.
Thanks
By the way, the translation of the text is: 'Thank you very much to Dan Zen for your efforts and beautiful work'.
PS. I don't know how to upload a nice link like you uploaded above, directly into the editor. How do you do that?
Thanks!