Javascript to detect when a word is wrapped

  • Starts off with:

    Everything works up to the point. What I need a line count based on the text wrap or line break.

    Using tokencount(TextObject.Text,newline) won't work.

    Instead of counting the breaks it returns how many lines in the .txt file.

    Result

    Example1 variable = 2

    Example2 variable = 2

    Example3 variable = 2

    The result I am looking for is

    Example1 variable = 5

    Example2 variable = 2

    Example3 variable = 3

    Is there javascript I could use to recognize when a word is wrapped to the next line? I have read other forums with examples using Mutations to observe a change in the text but I am a beginner with Javascript so I don't fully understand the script.

    Note: I just need to count the number of wraps. I have a workaround for text height, width, etc.

  • The wrapping is done in constructs runtime, but I guess you can run through the wrapping logic yourself. The only tool we need is to be able get the width of any text with a given font. The text object has textWidth but last I checked it takes a tick to update in construct which isn’t ideal.

    Here’s a algorithm to find the number of lines with word wrap. I’ll be a bit lazy and just use a single line of text like in your op.

    Global number x=0
    Global number y=0
    Global number w=0
    Global text line=“four score...”
    
    Start of layout
    Repeat tokencount(line, “ “) times
    — set w to text.textWidth(tokenat(line, loopindex, “ “))
    — compare x+w+1 < text.width
    — — add w+1 to x
    — else
    — — add 1 to y
    — — set x to w

    Basically at least. At the end of it y will be the number of lines. It requires resetting x and y if it’s used again.

    Anyways since the textWidth expression is delayed a tick and you’re after how to do it with js here’s an idea.

    This is the function you’re after:

    developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText

    Basically you’d create a canvas object, get a 2d context, set the font of the context and use that above function with the same algorithm as above.

    Admittedly I was a bit sloppy since it’s Adding 1 for a space in front of some lines. But it should give a general idea to refine later to match what construct is doing.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thank you for the information! I think I have it almost working except I can't seem to get this line to work.

    set w to text.textWidth(tokenat(line, loopindex, “ “))

    When I type this it says does not take parameters.

    I am new to some concepts so I may be doing something wrong. This is what I am trying to do.

    CONDITION:SYSTEM Repeat tokencount(line, “ “) times THIS WORKS

    ACTION:SYSTEM set w to text.textWidth(tokenat(line, loopindex, “ “)) THIS DOES NOT WORK

  • I didn’t test it, but yeah seems it doesn’t take parameters in construct. It’s just measuring whatever you set the text to.

    The js function is what’s needed though. I’ll maybe put to and to together another day.

  • since the textWidth expression is delayed a tick

    In C3 it's no longer delayed. You can set text and access textWidth or textHeight immediately.

  • Good to know, I still use c2 though.

    I apologize I didn’t look at the section to see the question was for c3.

    Does the textheight expression take into account new lines and wrapping? If so you could divide it by the height for a single word to get the number of lines.

    If it acts like that js function then I guess you could use the same algorithm above, just set the text before using the textWidth expression.

    And actually for c2 you could do something similar. Create a bunch of dummy text objects with the same font, set each to a word from the text, wait till the next frame, and use the measurements with the algorithm. Then you wouldn’t need to use js at all.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)