Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor position incorrect on Mac error #4794

Closed
emilyxxie opened this issue Jun 9, 2015 · 11 comments
Closed

Cursor position incorrect on Mac error #4794

emilyxxie opened this issue Jun 9, 2015 · 11 comments

Comments

@emilyxxie
Copy link
Contributor

I have the latest version of these ace.js file from this repo, the ace builds, but when typing into the editor on my Mac, the cursor position is off by one.

Thanks!
Emily

@nightwing
Copy link
Member

Do you see the same issue on ace.c9.io?
Incorrect cursor position is most likely caused by non-monospace font

@emilyxxie
Copy link
Contributor Author

Nope, we did not see the same issue on ace.c9.io on the Mac.

I'm pretty sure the font I'm using is a monospace font:
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace

@matthew-dean
Copy link

I just discovered this can happen if you override letter-spacing for the editor. With letter-spacing: 0 I got an incorrect cursor position on Windows nearly always, and an incorrect cursor position sometimes on Mac if I resized the window. I was using a monospace font as well, but for some reason Ace doesn't like a zero-width letter spacing setting (not sure if that's documented anywhere). As soon as I deleted that in my theme stylesheet, and it defaulted back to a letter spacing of like 0.110135213058 or something like that, then the cursor positioned perfectly on both platforms.

Hope that helps.

@nightwing
Copy link
Member

@matthew-dean were you setting letter-spacing: 0 on editor or some element inside the editor?

@matthew-dean
Copy link

@nightwing I was setting it on the .ace_editor element. I looked again at where the values were being set.

It looks like, on my body element, I have letter-spacing: 0.1px. (It's outputting letter-spacing: 0.100000001490116px which is a Less.js rounding issue, not related to Ace.) So, later, I guess I decided that was too much spacing for the code, and set letter-spacing: 0 on the main .ace_editor editor div.

I had issues where the cursor position was wrong on resize on Mac. Then, when I tested on Windows (this is all in Google Chrome), the cursor position was always wrong. When I removed letter-spacing: 0, it fixed Windows and surprisingly, fixed the resizing bug on Mac. So, I was wrong that it was the "default" letter-spacing. Probably Ace expects a zero letter spacing. But for some reason my CSS was mucking up the calculation of cursor position. It looks like it's trying to take letter-spacing into account (LS: 0 = left: 32px, LS: 0.1px = left: 32.40125px for cursor), so I can't account for why it was incorrect. All I know is what fixed it. ¯\_(ツ)_/¯

Any ideas?

@doomsayer13
Copy link

Try to add to your code this:

` .ace_editor, .ace_editor div {
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

    .ace_line {
        font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

        span {
            font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        }
    }
}`

@olavomello
Copy link

@doomsayer13 Perfect dude ! Solved ! Tkz !!!

@yvsrikanth
Copy link

yvsrikanth commented Nov 9, 2017

added it a css file which loads before when ace editor loads
` .ace_editor, .ace_editor div {
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

.ace_line {
    font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

    span {
        font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    }
}

}`
but still not working for me. @doomsayer13 can you suggest me what else i can check

@sujiangyin
Copy link

Try to add to your code this:

` .ace_editor, .ace_editor div {
font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

    .ace_line {
        font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

        span {
            font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        }
    }
}`

had you solve that?what suggest can you support to me?i met the same question

@doomsayer13
Copy link

Sorry guys, I'm not hacking anymore the ace editor.
Try to move to monaco editor:
https://microsoft.github.io/monaco-editor/

@andrewnester andrewnester transferred this issue from ajaxorg/ace-builds May 30, 2022
@andrewnester
Copy link
Contributor

Might be related to #2548

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants