Line height with React


This isnt really a bug report as I’m pretty sure its possible, I just dont know how.

So I’d like to set the line-height with the new React views.

I’ve got 1.3 set in both my theme and via the core settings, with a font size of 13 so I’d expect React to position the lines at about 17px intervals, but, it sets them at 19px so the effective line-height is 1.46.

Any ideas which prop/rule I have to set so that React knows to space my lines at 17px?

I’ve tried attaching to .editor and body as well as setting in the core settings.


Hmm, seems weird.
My current setup is 13px font-size and 1.4em line-height, giving me lines with a height of 18px (13 * 1.4 = 18.2). When trying with 1.3em I get lines of 16px height, nothing wrong here neither.

Have you tried inspecting the lines in the devtools?

There’s maybe a css rule that does not play nice here. The computed style for the lines should come from the style attribute set on the .editor container (see below).

And the classical questions:

  • Which Os do you use?
  • Which version of Atom are you running?
  • Do you have this behavior when running Atom with atom --safe?


OSX 10.8.5.
Atom 0.115.0.

So despite the applied inline styles matching what I wanted React still used some other value to work out the line-height to render at.

I had an errant 15em in my .editor-colors class which React must have been using, removing it solved the issue and the line-height is now correct. Slightly odd but no biggy.