Code Editor Cursor

I’m using Chrome 78.0.3904.87. I just started trying to learn JavaScript using the Code Editor. However, the cursor seems to “migrate” the further right you go. Setting cursor focus at the beginning of a line appears somewhat where’d you expect, but the further you go, the more the actual position of the cursor and where it displays no longer correlate. In fact, there are some lines already where you have to click well beyond the actual text to set the cursor within the displayed text.

This is going to make learning with this Code Editor quite difficult, unfortunately. Is there anything I can do?

Hey there, that definitely sounds annoying!

Do you have any browser extensions installed that affect how web pages are displayed? For example, I use an extension on my home computer for dyslexia/speed reading that makes letters and spaces wider. This often causes issues if I have to input text into a form or text box. Your issue sounds very similar.

If you don’t think a browser extension is the problem, try submitting a bug report with a screenshot of the issue by clicking the 3-dot menu in the top-right of the page and selecting “Send Feedback”.

Hope this helps!
Ben

I thought about your suggestion, and I did realize that I have my Zoom set to 125%. I reduced that back to 100%, and while the migration is definitely reduced, it is sadly still occurring.

I tried to submit a screenshot via the Send Feedback option, but that sadly didn’t work either. So I’ll hope that the description of the issue is enough.

I am putting it on imgur if you are curious to see what I’m seeing: https://imgur.com/a/bHD8TTm

Hey there, thanks for the screenshot.

It looks like the font in the code editor is not a monospace font (meaning each character has equal width, like this). This is why the cursor is misaligned, and could caused by a font setting in your browser.

Try navigating to Chrome’s settings page, and in the Appearance section, select Customize Fonts. Set the “Fixed-Width Font” to “Monaco”, which is a default monospace font. That might do the trick. It might also be necessary to refresh the page after changing the font.

Let me know if that fixes the problem.
Ben

Hi Ben!

So, we have success! But not exactly in the way I expected. Here is the result of my little test.

I went to the Chrome Settings > Appearance > Customize Fonts. I noticed that the setting was already set to “Consolas” which is an existing fixed-width font, which made me sad.

However, out of curiosity, I went ahead and changed all the other fonts to Consolas, refreshed and reloaded. And lo and behold, the cursor focus now matches up with entry!

I tested it with all the settings and, at least for me, it appears Grasshopper is using my “Standard Font” for the Code Editor. I confirmed this by trying a glaring font like Magneto. Sure enough, my Code Editor is now entirely Magneto, which is not great font for this purpose.

Why it doesn’t use the option listed in “Fixed Width Font”, I’m not sure. It seems like it should, considering. Not sure if this is true for other Grasshopper users, but it definitely helped me out.

Looking forward to getting back into learning! Thanks much for your help Ben!

Glad to hear you were able to get past the issue. I’ve passed along your bug report to our engineering team.

Good luck in your coding journey!
Ben