Line height is too low

[eugen1j]

Hello!

I have a strange behavior of Ace editor on websites. Editor lines overlap each other.

https://ace.c9.io/

https://editor.swagger.io/

Here the same problem in Postman:
postmanlabs/postman-app-support#6760

Environment:

• Chrome Version 81.0.4044.138
• MacOS Catalina 10.15.4

How can I solve this problem?

[nightwing]

Hi, this is very strange, seems like line height is not calculated correctly, but i could not reproduce the issue.

Does this happen on firefox too?

What happens when running editor.renderer.$textLayer.$fontMetrics.$measureSizes() in browser console on ace.c9.io ?

[eugen1j]

@nightwing

Chrome:

{
    height: 5, 
    width: 7.203125
}

Firefox looks good:

 { 
    height: 14, 
    width: 7.19921875 
}

[nightwing]

Thanks! I am very sorry but i have to ask you for more help, because i don't have any idea what could cause the height of measure node to be smaller than the font size.

Could you try running the following code

console.log(el.getBoundingClientRect())
console.log(el.style.cssText)
el = editor.renderer.$textLayer.$fontMetrics.$measureNode; 
el.style.visibility = "visible"; 
el.style.background="gold"
el.style.zIndex = 10000;
el.parentNode.style.overflow = ""
el.clientHeight

and if the above doens't help

editor.container.style.lineHeight=2 

Also sometimes issues like this can be caused by browser extensions, could you check if editor works in an incognito tab?

[eugen1j]

@nightwing Yes, sure.

I try the following code in an incognito tab with no luck.

editor.container.style.lineHeight=2 

This code helps to expand rows

Also, I find this bug in Postman postmanlabs/postman-app-support#6760

[nightwing]

Interesting, this looks like a bug in chrome.
could you try running getComputedStyle(editor.container).lineHeight to see if the value is default "normal" as it should be
Then try to explicitly set line height editor.container.lineHeight = "normal" ,
and then try another font editor.container.style.fontFamily = "Courier", maybe this will help us to isolate minimal testcase that reproduces the issue.

[eugen1j]

Yes, editor.container.style.fontFamily = "Courier" fixes the problem

So, how can I set default fontFamily for Chrome and Postman?

[nightwing]

Maybe there is a broken/(not supported by chrome) font installed on your computer.
Try running the following code several times until you find the one which is rendered with 5px height, and then one which is rendered normally.

editor.fonts = editor.fonts || 'Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace'.split(/,\s*/)
editor.container.style.fontFamily = editor.fonts.shift()

Then try finding the file for that font. (the file may be useful for submitting to chrome bug tracker)

[eugen1j]

Yes, it was a problem with font Monaco on my computer. I had two copies of this font, one was broken. I deleted it using Font Book for MacOS. Now the editor looks good.

Thank you, @nightwing!

[nightwing]

Is there a way you can recover the deleted font file? I think we should report the bug to chrome, because firefox didn't have a problem with that font.

[eugen1j]

@nightwing I had two copies of font Monaco. I suppose Firefox used the first, correct font file.

The second one looked bad in Font Book so it isn't chrome's bug.