Column Spacing in Text Editor

[MrFish]

I'm writing a text editor that doesn't use a textarea. The purpose is so I can give individual sections styles because it's supposed to be something like an online notepad++ (or whatever kind of editor you use). Because of this I need to create a caret div that finds the location you clicked and moves to that spot in the "textarea". The issue is that each character has it's own character width so I can't be sure what location someone clicks on the horizontal axis. Here is what it looks like-In a text editor if you click to far right on the line you will automatically go the the last column in that line. I have implemented this and it works the way it should be since I can't be sure of the character widths the caret is too far off.(this is just right of the last character "f");So does anyone have an ideas how I can judge the correct line widths and caret location?

[MrFish]

I've come up with an interesting solution if anyone is interested. I can find the line the cursor clicks because line heights are constant. So with that I can loop through each letter of the current line and add it to an invisible div that automatically resizes. Once the invisible elements passes the cursor location than the difference is found between the found line width and the previous. If the cursor is less than half way between a letter the caret will fall back behind the letter- and in front if it's more than half way. A little more complicated than I would have liked it but it gets the job done.

[justsomeguy]

That's really the only way of doing it, you have to get the browser to render it and then see how big it is. If you want to see another implementation, the Ext.util.TextMetrics class does that:http://docs.sencha.com/ext-js/4-0/#/api/Ext.util.TextMetrics