Entering text in a Textbox object expands it when there aren't newlines

[onassar]

I've created a Textbox object with width 400px

When entering text that doesn't have any newlines, it expands the Textbox beyond 400px

Not sure if this is intended behaviour
If it is, would be great to be able to pass in a property to preserve the width and force the text to a newline

[asturur]

Textbox has a minimum width that is the length of the biggest word.
Textbox split lines with fixed with, using space.

So what are you asking is reverse its behaviour.

[onassar]

Thanks for the quick response @asturur!
My thinking is that when someone defines the bounding-box, they've decided "I only want text to appear in this area"

So if they drop in text like a link, it's expanding the box, even though they've already decided what width they'd like.

Is it possible to have it limit the width to what's defined, rather than automatically expanding it?

[asturur]

Maybe adding a limit to the width is possible.
But where would go the extra text?

2015-07-30 17:10 GMT+02:00 Oliver Nassar notifications@github.com:

Thanks for the quick response @asturur https://github.com/asturur!
My thinking is that when someone defines the bounding-box, they've decided
"I only want text to appear in this area"

So if they drop in text like a link, it's expanding the box, even though
they've already decided what width they'd like.

Is it possible to have it limit the width to what's defined, rather than
automatically expanding it?

—
Reply to this email directly or view it on GitHub
#2376 (comment).

[onassar]

The extra text would go to the next line

[asturur]

we need space to split words. is an acceptable requirement i think. don't you?

[onassar]

With html/css, you use the word-wrap: break-word property
Here's before: https://i.imgur.com/ElaH8zI.png
Here's after: https://i.imgur.com/PLkbom1.png

Here's the fiddle: https://jsfiddle.net/nkgmr06a/

[kangax]

There's also an option of reducing text size when it doesn't fit. That's what Apple's Keynote does, for example.

Sent from my iPad

On Jul 30, 2015, at 11:28 AM, Oliver Nassar notifications@github.com wrote:

With html/css, you use the word-wrap: break-word property
Here's before: https://i.imgur.com/ElaH8zI.png
Here's after: https://i.imgur.com/PLkbom1.png

Here's the fiddle: https://jsfiddle.net/nkgmr06a/

—
Reply to this email directly or view it on GitHub.

[travisholliday]

@kangax The reducing text size is probably the best solution. Working on trying to figure that in to an app I am making using Fabric.

[onassar]

@kangax what do you think? I think it makes sense for the text to wrap to the next line rather than lowering the font size (especially if the size has been explicitly defined)

[kangax]

@onassar I think so too; especially if the size is explicitly defined (and it always is; whether by user or through default value)

@jafferhaider @inssein what do you think?

[inssein]

I am away on vacation right now, but the behaviour that @onassar described originally is what is supposed to happen. The box has a fixed width and should never change. If that doesn't work, it's a bug I haven't seen in my implementation.

Furthermore, I think we should add the option to lower font size instead of adding lines, that was something I was hoping to implement later down the road.

[inssein]

Ah wait a minute, I just realized that there were no spaces. Currently minimum width is longest word. We could add word breaking, but I think the current implementation is already complex due to the way we store metadata about the text (formatting and style).

[onassar]

I think word-breaking makes sense, since that would mimic the behaviour of css (see here: https://jsfiddle.net/nkgmr06a/). How tough is something like this?

[onassar]

Any movement here?

[inssein]

@onassar we could certainly add a different word-wrap strategy, but I don't have the time in the near future to implement it.