Editor lines with different heights


I’m trying to style Markdown like Mou does it, where headers have different font sizes. It’s a sort-of-preview sort-of-WYSIWYG thing.

Easy enough to change the size of header lines with some CSS, but when I bump up the font-size of a specific line, it still only occupies one “line” in the editor. So a 28px-high h1 suddenly occupies like 1.5 lines in the editor and the rest of the text or line numbers doesn’t react to the larger line.

Does Atom support this (different height lines in the same editor)? What would I have to do to implement this sort of thing? Any guidance or support?


Not sure how you are handling your styling of the lines, but you might want to take a look at my pen-paper-coffee theme for inspiration. I am doing exactly that, increased font sizes for header elements for markdown syntax:


Nice theme! Unfortunately I’m seeing exactly the same issue with line heights. Notice how all the line numbers are the same height (20px on my box) but the lines themselves vary in height. In the editor, the line <div> is also 20px high but the heading-1 text inside is noticeably taller. That one line seems to take up 1.5 lines of screen space.

(I tried to take a screenshot but it failed pretty hard, but you should be able to see this in your Atom too.)


The way Atom is currently designed, all lines are assumed to be the same height, to my understanding.


All lines are absolutely positioned. Lines 1,2,3 in the editor might be nodes 3,1,2 in the DOM. Also, the cursor and selection highlights are positioned in a layer behind the code.
All this is only possible if the height of every line is known. It seems Atom assumes them all to be the same height, which is elegant and reliable. Otherwise it would have to recompute and reflow the entire editor if while typing your syntax theme decides to make one line higher.

So now you get the fixed line-height but that still gives you some room to play with, as pen-paper-coffee demonstrates. You can make fonts a bit larger than that line-height, but at some point they will start overlapping.

Vanilla Codemirror seems to deal quite well with varying line-heights, although the cursor does weird things because it doesn’t expect it. In Brackets varying line-heights totally screw up your cursor. So, yeah, stuff like this isn’t built for rich editing.


Maybe that’s why we have the Markdown Preview package which takes a totally different approach…