10

I would like to find out where the web browser wrapped text in a given div.

The motivation for this is a WYSIWYG editor that uses contenteditable. Users write text in there, and depending on the width of the editable field, the font, and other factors, it wraps at certain locations. I would like to know where these occur.

I can only think of very hackish solutions (e.g., insert a span around each character, loop over these spans, get their offsetTop property, and make a note whenever it changes). Is there a better/standard way of doing this?

Sjlver
  • 1,227
  • 1
  • 12
  • 28
  • 1
    What are wanting to do with the info? Are you adding elements at the breakpoints, or just needing to know how many breaks, etc? – kthornbloom Oct 03 '16 at 13:05
  • We would like to use this information get the same result when rendering the content to other formats. In other words, the user edits the content on the web and sees lines breaking at particular locations. Then the user submits the data to the server. The server should render a PDF that looks as similar as possible. – Sjlver Oct 03 '16 at 13:18
  • 2
    There are many answers to this question in SO and outside: https://github.com/xdamman/js-line-wrap-detector http://stackoverflow.com/questions/12887372/detect-browser-wrapped-lines-via-javascript – fnune Oct 03 '16 at 13:22
  • @fausto-na thanks for the links! You must have had the better search terms than I... for I did search without success. If you make your comment an answer I'd be happy to accept it. – Sjlver Oct 03 '16 at 15:45
  • Alright, there you go. Good luck – fnune Oct 03 '16 at 15:55
  • It seems like every solution around is about wraping every word in a `span`. I am curious though, there must be a way to find the actual width of a letter depending on the font-family, weight and size then sum up the widths of all the letters compare with the width of the parent div and its padding but then, it seems to me that it would be a lot less efficient than simply wrapping every word inside a `span` – Mouradif Oct 07 '16 at 16:01

1 Answers1

0
document.getElementById("body").onchange = function() {myFunction()};

      function myFunction() {
            //Your eval script to log where changes took place
      }

Or 

document.getElementById('body').addEventListener('change', myFunction());
O'jan G
  • 11
  • 6