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.

Sign up for GitHub

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

Jump to bottom

[Vim] Cursor width too small when use keycap Vim #3256

Closed
DelightRun opened this issue May 12, 2015 · 11 comments · Fixed by #6765
Closed

[Vim] Cursor width too small when use keycap Vim #3256

DelightRun opened this issue May 12, 2015 · 11 comments · Fixed by #6765
Labels
vim

Comments

@DelightRun
Copy link

Hello, everyone!
I use my code mirror with keymap Vim, and when on Vim Mode, my little green cursor's width is just 3.5px(in demo, is 9px). So I don't know what's going wrong, please help me.

And here is a screen snap.
cut
@mightyguava
Copy link
Contributor

Hmm, either the CSS is messed up, or vim is trying to make the cursor 0 characters wide. I can't tell from just the picture. Do you have a reproducible example or a link to whatever you took the screenshot of?

@DelightRun
Copy link
Author

Of course, the page is on http://changxu.wang/test.html.
Oh, by the way, my browser is Safari with Mac OS X 10.10, and when I use Chrome, the problem disappear.
But the offical demo is OK with my Safari

@mightyguava
Copy link
Contributor

Here's the bug:

The cursor is just a space rendered over text. It renders to the same width as the text because CodeMirror uses the default monospace font in the browser.

Text inside your CodeMirror instance is rendering with a non-monospace font. This is pretty obvious if you type something like lalalalala. Given that the cursor is a space, it gets a super thin space.

The non-monospace font seems to be caused by the lang="zh-CN in your <html> tag. I guess whatever font Safari uses for rendering Chinese monospace text isn't actually monospace.

My suggested fix is to have a CSS rule like the below to override the monospace font to whatever you want it to be.

.code-editor-codemirror .CodeMirror {
  font-family: Courier;
}

@marijnh do you have any thoughts on a fix we can do on our side?

@marijnh
Copy link
Member

marijnh commented May 13, 2015

@mightyguava We could set up the vim mode to force the width of the cursor(s) to be the actual width of the character they are on top of after every selection update. It's more expensive, but should give better results.

@DelightRun
Copy link
Author

Thank you for your solution, it works! Thank you very much..

And, I’m agree with @marijn Haverbeke: we can set font-family of .CodeMirror in codemirror.css to a specific monospace font like Source Pro or Courier.

Should I submit a Pull Request for that?

在 2015年5月13日，下午9:32，Marijn Haverbeke notifications@github.com 写道：

@mightyguava https://github.com/mightyguava We could set up the vim mode to force the width of the cursor(s) to be the actual width of the character they are on top of after every selection update. It's more expensive, but should give better results.

—
Reply to this email directly or view it on GitHub #3256 (comment).

@marijnh
Copy link
Member

marijnh commented May 13, 2015

And, I’m agree with @marijn Haverbeke: we can set font-family of .CodeMirror in codemirror.css to a specific monospace font like Source Pro or Courier.

That's not what I suggested at all. Browsers are supposed to give pre tags a sensible default fixed-width font. I'd say that what Safari is doing here is a bug in Safari. CodeMirror has no business prescribing a font to use, but should just use the default one and/or let users override it.

@mightyguava
Copy link
Contributor

@DelightRun I believe @marijnh means to have vim mode dynamically use the actual width of the character the cursor is on top of instead of relying on the monospace font. Different browsers and OS use different fonts and we don't want to interfere with those.

@marijnh how do I go about doing this? Using charCoords() to get the size, compute the width, and then setting it directly on the cursor div?

@DelightRun
Copy link
Author

@marijinh OK, I just didn’t realize that it’s a Safari's Bug. Thanks for your help again.

@yunchi Luo Is there a possible to let CodeMirror’s Vim Mode support some font’s, i.e. Chinese characters?

在 2015年5月13日，下午9:49，Yunchi Luo notifications@github.com 写道：

@DelightRun https://github.com/DelightRun I believe @marijnh https://github.com/marijnh means to have vim mode use the actual width of the character the cursor is on top of instead of relying on the monospace font. Different browsers and OS use different fonts and we don't want to interfere with those.

@marijnh https://github.com/marijnh how do I go about doing this? Using charCoords() to get the size, compute the width, and then setting it directly on the cursor div?

—
Reply to this email directly or view it on GitHub #3256 (comment).

@marijnh
Copy link
Member

marijnh commented May 13, 2015

how do I go about doing this? Using charCoords() to get the size, compute the width, and then setting it directly on the cursor div?

@mightyguava Exactly. But on second though this is a bit scary -- it is almost guaranteed to add another dom-layout-round-trip and the payoff doesn't seem great enough to justify that. Alternatively, we could support it in the core, but still, not sure if it's that important.

@mightyguava
Copy link
Contributor

But on second though this is a bit scary -- it is almost guaranteed to add another dom-layout-round-trip and the payoff doesn't seem great enough to justify that.

@marijnh Yes, I agree with that. The bug appears to be isolated to Safari for CJK pages and possibly other languages. If this problems comes up again, we can add it as a dynamicallySizeFatCursor option in vim mode or in core.

@DelightRun CodeMirror should support arbitrary Unicode characters, assuming the font provides those characters as expected. Are you referring to a different issue?

@marijnh marijnh added the vim label Sep 2, 2015
@scottdraves scottdraves mentioned this issue Feb 11, 2016
Closed
@Menci Menci mentioned this issue Aug 10, 2016
Closed
@krydos
Copy link
Contributor

krydos commented Aug 14, 2021 •
edited

Just want to mention that the bug is reproducible in every browser. It's not about Safari only.

Works much better with monospace.

BUT
In case of markdown a theme can define that a header (for example) should have bigger font and in that case we'll see the same bug.
Even though this issue appears for any mode, I think markdown is the place where we can see it most of the time just because it makes sense to make headers bigger with css.

Below is monospaced-font.
image

If you want to reproduce this issue quickly just go ahead and update either:

  • lib/codemirror.css -> .CodeMirror -> delete font-family: monospace;
    • to break the cursor width for every non-monospaced font
  • lib/codemirror.css -> .cm-header, .cm-strong {font-weight: bold;} -> replace with .cm-header, .cm-strong {font-weight: bold; font-size: 40px;}
    • to break the cursor width for headers in markdown
    • go to mode/markdown/index.html and set keyMap: 'vim' there. Open mode/markdown/index.html in your browser.

Not sure how to fix it efficiently. As @marijnh mentioned it's not really good idea to touch DOM on every cursor-position-change.

Any ideas how on we can detect a char size under the cursor? Maybe we can cheat a little bit and at least detect a char size per line...

EDIT 1:
We do already check and cache a char size. But at some point in cursorCoords we override left and right point of coordinates, AFAIU, to squeeze a cursor into a bar or what's even more probable is to draw that cursor after a character.

@krydos krydos mentioned this issue Aug 14, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
vim
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[vim] fix fat cursor for non-monospace fonts krydos/CodeMirror
4 participants
@marijnh @krydos @mightyguava @DelightRun