CM matching elements taller than active line

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.

http://brackets.io

MIT License

33.25k stars 7.63k forks source link

CM matching elements taller than active line #8644

Open cheesypoof opened 10 years ago

cheesypoof commented 10 years ago

The CodeMirror matching tag and bracket elements are taller than the active line. A quick workaround is to apply display: inline-block to .CodeMirror-matchingtag and .CodeMirror-matchingbracket. I don't know if this affects any other aspect of the editor though...

tag-matching

It would be great if this could be resolved as it complicates theme creation - you can't use a non-opaque background-color without producing an unwanted border-top effect.

Mark-Simulacrum commented 10 years ago

Should this be reported to the CodeMirror repository, or should this be fixed in Brackets?

I can fix and open a PR if this should be fixed in Brackets.

TomMalbran commented 10 years ago

This is mostly an issue with CSS and you can only see it on very large font size. It looks like a rounding issue. The same issue can be seen with the search highlight. Anyway using display: inline-block breaks lots of things, since the spans can wrap at the end of a line but the divs can't. We already tried it and had to remove it.

cheesypoof commented 10 years ago

I can see this at 13px font-size...

Obviously the current line-height of 1.25 was carefully considered, but :+1: for 1.32 which fixes this issue (tested 12px to 24px).