Hyper: Add `line-height` configuration parameter

[rauchg]

[jasonLaster]

So, this is the closest I got to figuring out how hterm manages lineheight

https://chromium.googlesource.com/apps/libapps/+/HEAD/hterm/js/hterm_scrollport.js#676

It does not look like line-height is part of hterm's built in prefs

https://chromium.googlesource.com/apps/libapps/+/HEAD/hterm/js/hterm_preference_manager.js#105

[rpunkfu]

Huuray, managed to do it! :tada: Quite hacky way, but still... Will PR later today :D

[jasonLaster]

Love it. Happy to review
On Sat, Jul 23, 2016 at 11:29 AM Oskar Cieslik [email protected]
wrote:

Huuray, managed to do it! 🎉 Quite hacky way, but still... Will PR later
today :D

[image: screen]
https://camo.githubusercontent.com/c2f61dc1a4ad85c5ea81414f19dd04f1d26db456/687474703a2f2f692e696d6775722e636f6d2f49326a55586f4f2e6a7067

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/zeit/hyperterm/issues/75#issuecomment-234724110, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAPiYnuBnS9QX-bXlB8vC5QFQC7P5Nuoks5qYjNIgaJpZM4JHRw7
.

[rpunkfu]

Working on it, still fighting with cursor node haha

[spoike]

Another reason for having a lineHeight config, fonts with powerline symbols do not get proper height by default. The arrow symbol in the screenshow below is higher than the line-height.

Input Mono was used for the screenshot above.

[spoike]

Current workaround is to add the following to the .hyperterm.js configuration for termCSS:

x-row > span {
  line-height: 1em;
  padding: 0.2em 0 0.02em 0;
}

YMMV

Update

The above CSS setting will only affect the line height for x-rowwhich will correct render line height so they align with the powerline symbols. Unfortunately hyperterm sets the position for each line and the cursor as style attribute so the lines will still overlap so this workaround won't work as all users going into this issue will face.

[AliveDD]

config: {
    fontSize: 11,
    lineHeight: 33,
    fontFamily: 'Hack',
    ...
}

... lineHeight doesnt work :(

[kartsims]

@spoike your workaround doesn't work for me, did you mean adding this to .hyperterm.js as such :

    // custom css to embed in the main window
    css: `
      x-row > span {
        line-height: 2em;
        padding: 0.2em 0 0.02em 0;
      }
    `,

Thanks for your help, I am getting to know HyperTerm and loving it

[spoike]

@kartsims you're almost there. it's for termCss instead of css.

[colepeters]

@spoike @kartsims Is this the exact block you’re adding, including the backticks instead of default single quotes?

    termCSS: `
      x-row > span {
        line-height: 2em;
        padding: 0.2em 0 0.02em 0;
      }
    `,

I’ve added this to my .hyperterm.js but it doesn’t appear to have changed anything.

[kartsims]

When I do add this, the setting is applied (so I see changes to my terminal window).

BUT it is not enough to fully change the line height everywhere. Some values are fixed in style attributes of some elements

[dbpolito]

i would love to see this too, the workarounds didn't work for me either.

[spoike]

Sorry about the confusion and the late reply. The workaround is for fixing the line height of the line which is only relevant if you are using powerline symbols in your shell prompt and other terminal UI, though it won't fix the positioning of the lines (which is currently set directly on the x-row's style attribute IIRC) and they will overlap each other.

I'll edit my reply above to make this clearer.

[piotr-yuxuan]

Just to add my two cents contribution: I use FiraCode with powerline and lines were wrapped due to bad css.
I feel like this setting give a better appearance:

termCSS: `x-row > span {
        line-height: 1.3em;
      }
      `,

[0x80]

Is anyone still working on this?

The x-row > span selector only works on console input rows and not the command output text.

[iamstarkov]

i dont think anybody works on this, though check in the chat https://zeit-community.slack.com/messages/hyper/

I would be glad i smb will fix this

[adityavm]

this doesn't look like it can be fixed by hyper. it needs to be fixed by hterm, which currently doesn't support anything like a line-height property.

---

i tried my hand at a super hacky, sorta buggy plugin that achieves this: https://gitlab.com/adityavm/hyper-lineheight. its problems are listed in the readme.

this is one of two methods i tried, the other one being setting the x-row height after calculating based on a provided line height, then calculating the correct top for the cursor whenever there was a cursor event. that implementation however ran into issues with scrolling as hterm has a different character size set internally, so it wasn't able to accurately judge which rows were visible at what time. the cursor would scroll off the bottom with no way to scroll to get to it.

if someone is willing to continue where i left off, i can put up the other code as well.

[rauchg]

@adityavm yep, accurate observation. We need to improve the hterm character / line measurement logic

[bendc]

Really looking forward to this -- basically the only visual annoyance I have that prevents me from switching :p

[PezCoder]

No offense but my vim is not operational + neovim looks like shit because of so less padding between lines.

So please, please do something. I love the UI of this terminal & that is what keeping me alive here.

[rauchg]

Understood. We'll get to it. Thanks for chiming in

[davidchristiandy]

For an increased line height, I am currently using a font with increased line height by default; for example: https://github.com/andreberg/Meslo-Font. (I am using Meslo LG L)

I also use this to increase the line height in Xcode, and apparently it works fine in Hyper.

[breachofmind]

Hey all, it appears that all x-row elements height are scaled based on the fontSize property. So I was able to get some line-height without any weird side-effects:

fontSize: 16
// ...
termCSS: 'x-row {font-size:14px;}'

So basically the x-row height - x-row font-size = padding between rows, AKA line-height. You'll have to let me know if that works with all your handsome prompt styles.

[sidd]

@breachofmind the cursor node renders in the incorrect spot with this method

[muyiwaolu]

Does anyone know what the status with this is? Is there an update coming soon, would be happy to fork and push a fix if not already in the works.

[rauchg]

@muyiwaolu I believe @dotcypress has been looking into this problem

[tonatiuh]

Any news on this? Thanks.

[pencilcheck]

I would like to know if there is a good solution for this as well, hyper is awesome btw. :D

[hemangsk]

+1 :smiley:

[thommybrowne]

@pencilcheck see @davidchristiandy 's comment above. Easy breezy.

[pencilcheck]

Well that limits you only to one kind of font, I am using Fira Code right now

[kylebradshaw]

termCSS: 'x-row {height: 20px; line-height: 20px;}',

will give me some good spacing, however it really sets the cursor off target in the process

[paintedsky]

@davidchristiandy You are a life saver, thanks!!! I can finally read 😆

[kirykr]

@spoike I did the work-around with the powline symbol font as you did, and used DevTool to align the x-row > span and x-row > span.unicode-node and this what I got:
// custom css to embed in the terminal window termCSS: `x-row > span { font-weight: 500; line-height: 1em; padding:0.233em 0 0.100em 0; height: 1.133em; } x-row > span.unicode-node { padding: 0.400em 0 0 0; margin: -0.333em 0 0.000em 0; }`,

[pencilcheck]

    termCSS: `x-row {
      display: flex;
      align-items: stretch;
    }`,

Then I adjust font size until the arrow aligns, typically around 18

[im-n1]

Hey guys...workaround for all of you that works 100% (no CSS hacks). The trick is in font.

I Use Meslo L font - https://github.com/powerline/fonts/tree/master/Meslo%20Slashed which has bigger line height (M has smaller, S even smaller). I use bold version thus I had to add one line of CSS to set font-weight - termCSS: 'x-row {font-weight: 700}'

Result:

[pencilcheck]

@grafa you could've used flexbox to align disregarding font. your screenshot doesn't illustrate the real issue I believe was the powerline glyph characters not aligned (the arrows for example). Sorry to ask but how is your method really solved it? and why is it 100%? are you sure this works on any font size? any terminal?

[im-n1]

@pencilcheck Hi mate.
I haven't said it solves original problem at all. The thing is all of us wants bigger gap between lines and one of the solutions (which I believe is mentioned above) is to use font that has bigger line height itself.

What you can see on my screenshot is the result that just works. I works everywhere because the trick is in font so no Vim issues, no different terminal issues etc.

I've tried all the flexbox termCSS hacks but non of them worked 100% (mostly cursor and midnight commander issues). This does.

Feel free to try out and let me know.

[sagarrabadiya]

this is the only thing that stopping me to use this as daily driver. my terminal output is not good readable due to line height. hope we get it fixed soon.

[sghiassy]

For reference, after installing the Meslo font (as linked to above), I updated my `fontFamily configuration to be

fontFamily: '"Meslo LG L DZ", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

Note: DZ means "dotted-zero", so if you install the font without a dotted zero, then remove DZ from the font's name

[cbioley]

@grafa The modified font trick works for me too 👌🏼

I could easily modify the "line gaps" with a free tool like http://www.glyphrstudio.com.

The only thing I had to do in Hyper was update the cursor height.

[im-n1]

Thank you, that look cool. How can I modify all the glyphs at once? Like add some line height.

[cbioley]

@grafa I'm definitely not a font guru but what I did was add/remove the same amount from ascent/descent (hamburger menu -> font settings).

[mandeepsinghgill]

100% will work.

termCSS: '.xterm-rows div {margin: 15px 0}',

[PerStirpes]

{ line-height: 1.25; } specified as a pure number, which is interpreted as relative to the font size of the element.

Read about it =>: Guide to using special characters in HTML: Line spacing problems

[timvandijck]

I would love to see a solution for this as none of the things mentioned above really helped. I feel like line height is something a lot of people like to configure in terminals.

[im-n1]

@timneutkens The font trick (look at my prev post) works 100% cause it's font thing not the hyper term hack.

[jabacchetta]

Used hyper for the first time today and loving it... but definitely noticed the line-height. Was hoping to be able to add it to the config.

[Cygnusfear]

Thought I fixed it with the above commit but ended up messing something else up. I think this is doing the trick for me now with no further issues, so maybe some other people are willing to confirm?

Should work in 2.0.4:
termCSS: '.xterm {line-height: 17px} .xterm-rows > div {display: block; line-height: 15px}'

[cbioley]

@Cygnusfear I just tested a few seconds ago.

• v. 1.4.8: it does _not_ work
• v. 2.0.4: it does work (yay!)

Thank you :)

[Cygnusfear]

Yes, I forgot to mention! It's only going to work with the new 2.0.4 release!! Glad it works! Enjoy!

[ghost]

@Cygnusfear : What would it be if I use hyper on windows. Seem that config doesn't work on my box.

[jesseleite]

Surprised this isn't a thing in .hyper.js yet 😢

[jesseleite]

One problem with some of these CSS line-height/margin/padding examples is:

When a text block with a background colour is rendered, you end up with spaces between the lines, rather than padding around the actual text itself.

[im-n1]

@JesseLeite
what "line-height" CSS setup u use?

[jesseleite]

I tried the examples in this thread above. For now I'm just going to use font-line to add line-height into the font file itself. That said, would still be nice if lineHeight becomes a config option in Hyper 👍

[lehelbabos]

+1 on this.... Love hyper but it'd be great if I could set the lineheight without having to resort to some sort of hack.

[im-n1]

One year later.
Number of line height config options: 0
Number of cursor config options: 3

[estebanrao]

Hey everyone!!
For all of you using Meslo fonts you can fix the line-height issue by doing:

termCSS: `
  x-row {
    line-height: inherit;
  }
`

[Spaxe]

I'm tracing this issue, having begun to use Fira Code with ligature support (so long Meslo, Input Mono), and changing fonts is not a valid solution for me.

I suspect it's a limitation with features from xterm not exposed properly, not just a hyper issue. ref something like https://github.com/xtermjs/xterm.js/issues/302

[12luisalmeida]

Any solution for this?

[krisztianpuska]

Sadly, no. Neither of the previous examples work, on latest canary at least. You can still change the font line-height directly to make it work, but I think thats a bit too much of a hack.

[cbioley]

@12luisalmeida Try to scroll this issue, just a bit ^^

[chabou]

This workaround will not work with our v2 anymore.
xterm is using canvas now

[Spaxe]

What's the proper way to set line height? I see xterm 3.0 exposes an option at https://github.com/xtermjs/xterm.js/pull/938

[msikma]

This should probably be closed in favor of #2850 since it targets the new Canvas renderer.

[chabou]

Yes! Closed in favor of #2850