New theme setting for line-height

[brunnopleffken]

Aside font size, I'd like to see another text field in Theme Settings: line height. It really helps to bring "air" to my code, specially with dark themes... Currently, I set my line height just like this:

.CodeMirror-scroll {
    line-height: 1.6em !important;
}

I really wish it was a built-in preference, in Theme Settings.

[abose]

Could you raise a pull request if interested in contributing this feature :santa: ?

[MiguelCastillo]

We had implemented this back when we first introduced themes. There were lots of lil edge complications around word highlighting and stuff like that. You can follow some of the threads by going to issues and using this filter "mentions:MiguelCastillo line height is:closed ".

[brunnopleffken]

When I'm using line-height, I'm getting these "double background" issue when searching a keyword and the misalignment of the gutter folding arrow relative to the line number, but I think we can do some tests to solve this issue...

Syntax highlight, active row background color and text selection works properly...

[MiguelCastillo]

yeah that's the word highlight I was referring to. We ended not doing it because we felt it was not stable enough for our release. Let us know if you get working correctly. :)

[TomMalbran]

We can't fix that issue, since is a problem with how CSS works. If the element has a display on inline, the line height doesn't affects the height of the element. If we changed it to display inline-block, the height would work, but then it fails to wrap at the edge of the screen when having word-wrap on. We also had issues with other features like highlight matches.

So, if you don't use wordwrap, and change the display of the spans to inline-block you can fix those issues. But there might be others, and since it won't work for everyone, I don't think that it should be a preference. Anyway you can easily do it on an extensions, but knowing that it might break things.

[MiguelCastillo]

@TomMalbran thanks! I had forgotten the details around the problem. It's been a while

[dinolatoga]

I really like Brackets but I think line-height property should be a part of the quick preferences. I think the best way to fix this is to use a unit-less line-height. Currently I am using this piece of code:

.CodeMirror {
  font-size: 13px !important;
  line-height: 1.6; /* Use whatever you desire */
}

It actually works like a charm. No double backgrounds for me.

[jesuscmd]

English: Hi!!! It's true, its so easy, its like configure a text in web, i writed these settings in brackets.min.css, the zoom is quite ugly and hard to read, in order to resolve it, I set two styles properties: font-weight: 100!important; and line-height:1.6, this makes clear and easy to read!!!!

Español: Hola, el zoom de Brackets es muy malo, para resolverlo edité el archivo brackets.min.css, y edité .CodeMirror en la carpeta www/styles con los siguientes estilos, la clave es el peso de la fuente font-weight: 100!important;:

.CodeMirror {
line-height:1.6;
 font-family:"SourceCodePro-Medium","ＭＳ ゴシック","MS Gothic",monospace;//like sublime text
 font-weight: 100!important; //this make the text clear and easy to read!
}

These are the results:

This is easier to read than the brackets zoom default:

[montagnez]

Resolve the problem :

1 - go to : AppData\Roaming\Brackets\extensions\user\FolderExtention

2 - Go to newtondark.css for example for me.

3 - add this line :

.CodeMirror { line-height: 1.6; }

4 - Be happy !

[MiguelCastillo]

https://github.com/MiguelCastillo/Brackets-LineStyle