Ace editor monospace fonts issues with cursor spacing

Question

I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.

Here's another SO question about the issue. ace editor cursor behaves incorrectly

My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.

When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts

input, textarea, input[type="submit"]:focus, div {
  outline: 0 none;
  font-family: 'Open Sans', sans-serif;
}

If I add to my css

.ace-editor {
  font-family: monospace !important;
}

I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.

Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.

If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works. Going to the computed properties, is shows the font-family to once again be 'Open Sans'.

So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.

I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.

Epitomize

Answer 1

The issue is caused by div included in bootstrap rule. It is too broad and breaks character width measurements for ace. You can add

.ace_editor div {
    font: inherit!important
}

as a workaround. Would be good to also report an issue to the creator of your bootstrap template.

Silvana

Thanks you so much. Hours of playing with this solved (by you) I'll report it to the bootstrap creator too. – Epitomize

My case was body * { font-family: ... } so .ace_editor * {font-family: ...} do the job for me. – Jackdaw

Answer 2

The most direct fix would be to apply the style directly to the text line, at least for ace 1.9 that I am using.

.ace_line span {
    font-family: monospace;  
}

Cytolysis