Jsoneditor: Inaccurate cursor positioning on Safari

Created on 12 Jan 2018 · 12Comments · Source: josdejong/jsoneditor

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?

Source

shootingfly

Most helpful comment

Looks indeed like Ace editor only works with monospaced fonts: https://github.com/ajaxorg/ace/issues/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.

josdejong on 17 Jan 2018

👍2

All 12 comments

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>

josdejong on 13 Jan 2018

@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.

shootingfly on 17 Jan 2018

Looks indeed like Ace editor only works with monospaced fonts: https://github.com/ajaxorg/ace/issues/460.

josdejong on 17 Jan 2018

👍2

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;\

shootingfly on 18 Jan 2018

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 on 18 Jan 2018

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

josdejong on 18 Jan 2018

@josdejong Yeah! It solves my issue. Thanks.

shootingfly on 19 Jan 2018

:+1:

josdejong on 19 Jan 2018

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 🙏🏼

danielkrich on 16 Dec 2019

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 on 16 Dec 2019

👍1

@danielkrich this has been fixed now in v8.1.0

josdejong on 18 Dec 2019

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

danielkrich on 22 Dec 2019

Was this page helpful?

0 / 5 - 0 ratings