I need a better way to of working with the textarea on the left without relying on the horizontal scroll for large amounts of text. Atm it's a horrible UX editing large amounts of text.

This is an angularjs + fabricjs app. The UX is a work in progress.

I was working on a native form of: http://usablica.github.io/widearea/ Unsure if that solves the problem or is just a bandaid.

Forgot to mention

Editing in the preview will be coming in the future this is something I need to fix temporarily for our launch.

enter image description here

Was thinking of moving in this direction with the UI.

enter image description here

Update 1

After some of the comments going to see if this solves the issue.

enter image description here enter image description here

Update 2

It ended up looking like this: enter image description here

  • The ideal solution would be for the user to edit the text in place, and not use a separate textarea at all. The space available would be the actual space taken by the rendered text. Obviously, it's more difficult to implement. The WideArea is really neat but the issue would be that the user wouldn't be able to see how the text is rendered while typing it.
    – jgthms
    Commented Mar 16, 2014 at 21:34
  • @jgthms That will be our solution in the future, it's a technical challenge vs time available issue atm trying to make what we have work good and then launching it. I wonder what would happen if instead of the WideArea taking up 100% of the screen it only took up the bottom half and scrolled the canvas into the top half area. Commented Mar 16, 2014 at 22:06

3 Answers 3


I am not familiar with the framework but why not have an option to edit the text directly in the preview? Double click, edit and save.

Or double clicking on the preview would load up a centered text area block that you could edit (z-index:9999;horizontal-align:center;)

Have a look at this simple document writer design in Mac Pages.

enter image description here

If you can code it then you should probably not have a text area in the left bar at all.

Your workaround is nice thou :)

  • You raise some excellent points and ty for that image of Pages (I use google docs xD). This is html5 canvas I'm working with it's possible just tricky. Commented Mar 16, 2014 at 23:29
  • The best strategy is usually to look up and use an existing solution that makes sense. Ff you can copy and re-use while also saving you time and making your end product better, then why not :) Commented Mar 17, 2014 at 1:03
  • After I saw that pic I realized it wasn't just the textarea but the entire layout so I just went at it based on this pic and the other one I mentioned above. :) Commented Mar 17, 2014 at 3:23

Im not sure if ive fully understood the question, but couldnt you have the text area 200px high and then as the user inputs their text instead of the text area gaining a scroll bar the text areas height would increase.

  • That's what I had before but as you type it word wraps and the canvas doesn't word wrap so it was inconsistent . Commented Mar 16, 2014 at 22:15

I think being able to edit the text inline would be ideal.

If that's not feasible. Then I would recommend expanding the text-input box when it is selected. Ex. If it's currently 100x100px then make it 400x400px. As well, adding a slight shadow to the box will help make it appear active.

  • Do you mean automatically? On focus, expand the textarea, on blur, make it small again? Commented Mar 17, 2014 at 0:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.