Jump to content

Column Spacing in Text Editor


MrFish
 Share

Recommended Posts

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-screenshot8v.pngIn 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.screenshot10d.png(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?

Link to comment
Share on other sites

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.screenshot4ks.pngscreenshot2kw.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...