Changing line height/padding


#1

I’m trying to edit my personal styles.less file and change the line-height (or padding, margins etc.) of individual lines in the editor. What I’m noticing is that while this is really easy to do (just apply some styles to the .line), it messes up the editor since the pane that contains the cursor does not follow suit. (It appears that there’s code running somewhere that calculates pixel positions for the cursor and positions it directly, not taking the changed line-height into account.)

Has anyone had success with this?

Cheers,
Hendrik


Line height option on settings
#2

Ran into a similar issue when trying to change font-size for headings in markdown.


#3

Hi,

I want to change the line-height too, didn’t found where the cursor calculation is done.
If you find something tell us :smile:


#4

Changing line-height for .editor seemed to be a little better since then the gutter and editor lines lined up, but still caused problems drawing the cursor correctly.


#5

I figured it out. The following will work:

.line, .line-number, .cursor {
  line-height: 1.5;
}

Once you save the file, your current editor view will be messed up, but when you close and re-open it (or trigger a complete window redraw), everything will work. This happens because internally, Atom only recalulcates the line heights used for cursor position calculations when the font-family property of an existing editor view is changed. Yes, I actually dug around in Atom’s source code for this. Fun!

Edit: .line-number fixes the gutter, and .cursor the cursor, obviously.


#6

To make things even simpler, you can just use the following:

.editor { line-height: 1.5 }

Once again, the important bit is that things will be messed up until you re-open the edit window.


#7

Thanks hmans. Just to make it clear you have to reload the styles.less file for the changes to take effect.


#8

Atom will reload styles.less automatically, but it won’t recalculate line heights until you re-open the affected editor views.


#9

You also have to do this everytime you restart atom. Do you think you can find a way around this hmans?


#10

Thanks hmans! I had tried this earlier and figured it wasn’t working because I wasn’t closing down the file. Closing the editor pane and reopening it worked like a charm.

It’s interesting that Atom retains line height calculations even when the entire project window is closed and reopened. It even seems to persist through app restarts.


#11

I found that if you change the font size with cmd + or with cmd - the cursor position will be re-calculated after editing the line-height. No needs to restart Atom.


#12

It appears that Atom serializes editor views to the filesystem (see ~/.atom/storage/, even though I don’t know how often and in what situations.


#13

This seems to have moved in to the settings screen now, and changing the CSS has no effect


#14

Thanks for the update @lunelson

Looks like one can change the line height directly in the config, like this:

atom.config.set('editor.lineHeight', '1.0')


#15

Simplest way to make the change is to update your config.cson file

So it should look something like this by default

"*":
  editor:
    invisibles: {}
    fontSize: 14
    tabLength: 4

If you want line height to double then set lineheight = 2, as per below

"*":
  editor:
    invisibles: {}
    fontSize: 14
    tabLength: 4
    lineHeight: 2

It should refresh as soon as you save the file.


#16

In 1.17.0 the following worked for me:

atom-text-editor {
  line-height: 140%;
}

#17

FWIW, Atom has had a built-in line-height setting (exposed through the Editor Settings UI) for a while now. Thanks anyway.


#18

The modern way to do this, if you want to do it in your stylesheet instead of messing with Editor settings UI, is

atom-text-editor {
    --editor-line-height: 1em;
}