njtynhj

Multi tool use

Sorry for the vague title, but I'm not exactly sure what to call this. I'm making an assignment planner using HTML and JavaScript, and I've ran into a bit of a problem while trying to make a feature to snap your text to the nearest line.

The planner itself looks like this

The "Snap to Line" feature works by checking the Y coordinate of the note (which is an input element) and checking the nearest line. I know it's not good practice, but to make it easier everything is a fixed size, so I have an array of every line's Y coordinate it could snap to:

[58,80,102,124,146,168,190,212,234,257,279,301,323,345,367,389,411,434,458,480,502,524,546,568,590,612]

When the user creates a note or change's its position, this bit of code runs:

So it gets the element's height, then finds the Y coordinate of the closest line and subtracts half the height of the element to find the proper coordinates.

I arbitrarily used height/2 as opposed to height. I thought that since the coordinate is of the line, it would need to be exactly height higher up, which makes perfect sense, but in practice for whatever reason that didn't work, and height/2 was able to give me better, somewhat better results.

However, if I use the function, it doesn't exactly work. I've tried many different methods but I can't seem to figure it out. This is the result. As you can see, it works pretty well for smaller heights, but it's as if there's an offset relative to the height of the element that affects the position. Is the problem because my method is terribly wrong? (probably) Or is there just some factor that I've been forgetting?

There aren't any borders, no margins, the padding is only 1px, but that shouldn't matter anyway since I use getComputedStyle (which I believe takes everything into account) to find the height and not the font size.

The code surrounding this feature is only a small part in a decently sized project, but I'm posting the entire document so that it may be easier to fix this.

Thanks!

note: the window with the planner on it is a popup, so your browser might block it

The code (too many characters for this post so it's on pastebin)

EDIT: I think I found the problem, no surprise that I found it just as I posted this. First of all, I needed to use height and not height/2 (no surprise there, makes sense). I though I needed to use height/2 because I was testing with small heights and the snap points were a few pixels off (7, to be exact) which made it seem like height/2 was better. Two, the main problem, is that since I used height instead of font-size, the height was the height of the entire element which meant that the bottom of the P hit the line instead of going past it.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.