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

Inaccurate cursor positioning on Safari #502

Closed
shootingfly opened this issue Jan 12, 2018 · 12 comments
Closed

Inaccurate cursor positioning on Safari #502

shootingfly opened this issue Jan 12, 2018 · 12 comments

Comments

@shootingfly
Copy link

shootingfly commented Jan 12, 2018 •
edited
Loading

I can get accurate cursor position on Chrome, Firefox, IE, except safari.
dingtalk20180112145504

To solve the problem, I have to open jsoneditor.js and delete font-family.
jsoneditor.js#36892

	.ace-jsoneditor.ace_editor {\
	font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;\
	line-height: 1.3;\
	background-color: #fff;\
	}\

Another way is to add style to page.

  .ace-jsoneditor.ace_editor {
    font-family: courier;
  }

Is it a bug?
@josdejong
Copy link
Owner

josdejong commented Jan 13, 2018 •
edited
Loading

Thanks for reporting. I opened http://jsoneditoronline.org Safari 10.1 and 11, which seems to work fine. Does this website work fine for you too?

Can it be that you haven't defined charset on your webpage or something? Like:

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <script type="text/javascript" src="app.min.js" charset="utf-8"></script>
</head>

@shootingfly
Copy link
Author

shootingfly commented Jan 17, 2018 •
edited
Loading

@josdejong
Thanks for answering. The website works fine for me, but it is not because charset. I have set it.
If I use an non-monospaced font, it will go wrong.

I haven't install two fonts (droid sans mono and consolas), so Safari will render a kind of monospace font. On Chrome, Courier is my default monospaced font. But Safari will relate to the language of html. Mine is Chinese.

<html lang="zh-CN">

When I remove the lang attribute or set it to 'en' or 'jp', all will be ok.
Another way is to install some fonts, such as consolas, droid sans mono.

...so it may because that Safari cannot give me a right monospaced font.

@josdejong
Copy link
Owner

Looks indeed like Ace editor only works with monospaced fonts: ajaxorg/ace#460.

I suppose though that normally there are monospaced fonts installed on Mac and Safari (normally Consolas I think?). At least looks like that's the most logic solution: make sure there is a mono font available.

@shootingfly
Copy link
Author

shootingfly commented Jan 18, 2018 •
edited
Loading

Thanks. The ace issue has been existed for a long time, since 2011.
Courier is one of monospaced fonts and almost installed in every system.
Is it possible to change the order of the font-family in code?
Old

font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;\

New

font-family: droid sans mono, consolas,  courier, courier new,  monospace, sans-serif;\

@josdejong
Copy link
Owner

That makes sense, putting the generic "monospace" last. In that case I will add a few more fonts, something like:

font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;

josdejong added a commit that referenced this issue Jan 18, 2018
@josdejong
Consistently use the same font everywhere (see #502)
f03b64f
@josdejong
Copy link
Owner

@shootingfly I've just released v5.13.2, which should have reordered font-family, can you check whether this solves your issue?

@shootingfly
Copy link
Author

@josdejong Yeah! It solves my issue. Thanks.

@josdejong
Copy link
Owner

👍

@josdejong josdejong mentioned this issue Feb 21, 2018
Closed
@danielkrich
Copy link

Hi there! Happens to me as well, on Chrome - version 78.0.3904.108 (Official Build) (64-bit)
I have a general css file with:

* {
      font-family: 'Source Sans Pro', sans-serif;
}

And for some reason the json editor is not overriding this font.
Any ideas? @josdejong 🙏🏼

josdejong added a commit that referenced this issue Dec 16, 2019
@josdejong
Fixed #502: CSS rule * { font-family: ... } resulting in Ace editor…
7c3695d 
… (`code` mode) not having a mono-space font anymore
@josdejong
Copy link
Owner

Ah, that's interesting! Thanks for sharing Daniel. Ace editor has a lot of nested components and simply defines the font-family in the root element, making use of the cascading feature of CSS. Your * { ... } rule overrules everything. It's quite an aggressive rule...

We can quite easily fix this by doing:

* {
  font-family: 'Source Sans Pro', sans-serif;
}

.ace_editor * {
    font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
}

I've addressed this in #7c3695d (fix not yet published)

@josdejong
Copy link
Owner

@danielkrich this has been fixed now in v8.1.0

@danielkrich
Copy link

Will check. Thanks a lot @josdejong, highly appreciated! 👏

@sumanthratna sumanthratna mentioned this issue Apr 8, 2020
Closed
@Lissy93 Lissy93 mentioned this issue Oct 9, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@josdejong @danielkrich @shootingfly