A directory of browser-based WYSIWYG editors


Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
Automatic line break

The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.



Feb 25, 2003, 5:05 PM

Post #1 of 2 (5411 views)
Automatic line break Can't Post


I just had a look at V3 alpha and I think it works great. Thanks for all the work you guys put into this. I just have one little wish Smile, could you try and solve this problem:

And, if possible add a feature to stop after a certain nr. of lines (or when the space of the textarea is filled) - perhaps both problems could be solved in one...

Thanks again for all the work you put in!


Feb 26, 2003, 3:07 AM

Post #2 of 2 (5386 views)
Re: [da-stari] Automatic line break [In reply to] Can't Post

There is no generic solution to this problem :( sorry.

But I'll explain why :) This is HTML's way. Any browser will break a text line only if there's some breakable space (i.e. not " ") where the line can be broken. If your line contains 1000 'a' characters it won't be broken.

Now. Complicated JavaScript tricks are possible to break a line. Too complicated, unfortunately. I'll detail.

From JS it is not possible to obtain directly the width of a character, because it depends on too many factors such as font-size, family, style, etc. But you can obtain the width of an HTML element which is embedded in the HTML document.

The solution would be to create a "span" element for each letter of the text and retrieve the offsetWidth for each "span". But this is very tricky, because we should create the span-s in the same context where the text actually is, because their style (font size, family, etc. -- all those factors that determine the element's width) can be influenced by parent elements and by the page style. I used the technique in a very particular environment -- see the JS FX demos on my website, if you are using IE6 or Mozilla. Not for breaking lines, though, but for being able to animate individual letters from a text that is included in the page as standard text, not created from JS.

Still, you get no warranty that the lines will break as intended, unless the page containing the submitted text uses the exact same stylesheets, the final text will have the exact same width as the textarea and finally, the end-users that see your page will have the fonts that you used in the text. The browser might be also important -- I noticed minor differences from IE6 to Mozilla when the browser is doing line breaking. Far too many requirements..

I hope my explanations are clean.. It's practically impossible to have something like this in HTMLArea. But you could try to include such code in your page -- the one that displays the output from HTMLArea.

Anyway, after the lengthy speech, here's a simpler hint that may help you out. On the element that contains the text submitted from HTMLArea assign a style like the following:

style="width: 200px; overflow: auto"

It'll create a horizontal scrollbar for content that overflows the given width. I personally hate horizontal scrollbars. But sometimes they're needed.. ;)
Mihai Bazon,
Applied Web Standards


Search for (options)