Hyper: Line at the bottom of the terminal is not aligned properly

Created on 17 Aug 2016  Â·  28Comments  Â·  Source: vercel/hyper

The last line of my terminal is sometimes "cut", like we don't see the bottom of some characters like (q or p).
screen shot 2016-08-17 at 11 02 04 am

It's not always the case in all my terminal windows, maybe it's related when the terminal has tabs. Will try to find better repro.

help wanted Bug 😰 Can't Reproduce

Most helpful comment

Can confirm that this happens with "Times New Roman" as well. The only fix I found was to adjust the line-height, as suggested by @davegomez in my "duplicate" ticket.

termCSS: 'x-row {line-height: 1}',

All 28 comments

That's even worse than what I'm seeing (in #373)

Hello! Just wanted to report the same problem, it happens to me with powerline for tmux (pretty bad)
screenshot 2016-08-30 10 41 55
or with just tmux (not as bad, but still misaligned):
screenshot 2016-08-30 22 00 35

Can confirm that this happens with "Times New Roman" as well. The only fix I found was to adjust the line-height, as suggested by @davegomez in my "duplicate" ticket.

termCSS: 'x-row {line-height: 1}',

Awesome, I can confirm that it fixed it for me!

Tested with the recent 0.8.1 version and still have the issue.
screen shot 2016-10-08 at 4 29 40 pm

fontSize: 12,
fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

And I also confirm that changing the line-height fixes the issue.

I can't reproduce the issue @tleunen. Have you tried disabling your extensions in case you are using one or maybe tweaking you configuration (using the default one), etc?

I have tried different fonts (even the ones you mention) and themes but nothing.

It's not an issue that occurs 100% of the time :/ Maybe 3 times of 5 I'd say.

I believe I'm using the default config:

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248,28,229,0.75)',

    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for â–ˆ
    cursorShape: 'BLOCK',

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    backgroundColor: 'rgba(0, 0, 0, 0.75)',

    // border color (window, tabs)
    borderColor: '#333',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: '',

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    colors: {
      black: '#000000',
      red: '#ff0000',
      green: '#33ff00',
      yellow: '#ffff00',
      blue: '#0066ff',
      magenta: '#cc00ff',
      cyan: '#00ffff',
      white: '#d0d0d0',
      lightBlack: '#808080',
      lightRed: '#ff0000',
      lightGreen: '#33ff00',
      lightYellow: '#ffff00',
      lightBlue: '#0066ff',
      lightMagenta: '#cc00ff',
      lightCyan: '#00ffff',
      lightWhite: '#ffffff'
    },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    shell: '',

    // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
    // by default ['--login'] will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to false for no bell
    bell: 'SOUND',

    // if true, selected text will automatically be copied to the clipboard
    copyOnSelect: false

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',

    // for advanced config flags please refer to https://hyperterm.org/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [],

  // in development, you can create a directory under
  // `~/.hyperterm_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: []
};

on a fresh install (only changed the shell to tmux) I see the same issue. The termCSS fix above did it for me.

os: ubuntu 16.04 LTS

The termCSS setting did not fix this issue for me.

screenshot 2016-10-27 10 33 32

I've narrowed it down to a single character in my prompt:

ツ

I'm using a zstyle prompt theme by Nadav Shatz called "Smiley" which uses the katakana character to indicate that the previous command exited with a status of zero. Non-zero return codes (errors) are indicated on the prompt with the heavy multiplication sign ✖.

I'd imagine there are more than just katakana which would cause this, and it might even depend on the font configuration as well. Here's my Hyper configuration for good measure.

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 14,

    // font family with optional fallbacks
    fontFamily: 'Cousine, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color (hex)
    cursorColor: '#F81CE5',

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    backgroundColor: '#000',

    // border color (window, tabs)
    borderColor: '#333',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: '',

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '12px 14px',

    // some color overrides. see http://bit.ly/29k1iU2 for
    // the full list
    colors: [
      '#000000',
      '#ff0000',
      '#33ff00',
      '#ffff00',
      '#0066ff',
      '#cc00ff',
      '#00ffff',
      '#d0d0d0',
      '#808080',
      '#ff0000',
      '#33ff00',
      '#ffff00',
      '#0066ff',
      '#cc00ff',
      '#00ffff',
      '#ffffff'
    ]
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  plugins: [
    'hyperterm-solarized-light'
  ],

  // in development, you can create a directory under
  // `~/.hyperterm_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: []
};

this cuts off my tmux status bar by about 1/3/
screen shot 2016-10-27 at 6 09 17 pm

Same here you're supposed to see 2 underscore here. They are hidden
Version 0.7.1 (0.7.1.36)
screenshot 2016-10-28 10 31 53

Can you guys provide steps to reproduce it? I couldn't so far.

Try adding the katakana character to your command prompt. @davegomez

@davegomez for me it's all the time. Though I just tried termCSS: 'x-row {line-height: 1}' and this fixes the problem

I get this when I use Consolas as my font.

In my case this seems to be caused by the CSS overflow: hidden being applied to the last line. This only happens why I set my font to "Ubuntu Mono" so I suspect it's something that only happens with certain fonts.

Thanks

I am facing the same issue on Version 1.0.1 (1.0.1.1369). I'm running zsh with only the hyperterm-material plugin. My case is similar to that of @borisrorsvort. I'll try the hack he suggested.

Hi, have you tried adding padding: '12px 14px 18px 14px' to the~/.hyper.js? It helped me

Steps to reproduce, If I change font-size to 14px and font-family is fontFamily: '"Lucida Console", monospace',, so the font on the last screen line is cutted, similar with Inconsolata for Powerline font. I think the problem will be that the height is not recomputed right.

Will maybe be resolved by #1745

@szachara
I can't reproduce, can you give more details about your configuration (shell, OS, hyper version etc...)

@szachara Can you try to reproduce on master? #1745 has been merged into it

I tried with master and still cutted @chabou

Try your self with fontFamily: '"Lucida Console", monospace' and font-size 14px.

@szachara What os are you using?

NodeJS: 7.8.0
Hyper: 1.3.1
OS: Windows 10

Same problem here with fresh install just changed font settingsInconsolata For Powerline font and 14px fontSize.

NodeJS: v7.10.0
Hyper: Version 1.3.3 (1.3.3.1754)
OS: MacOS Sierra 10.12.5

I have the same problem with 1.3.3:
image
As you can see the underscore is hidden.

This: termCSS: 'x-row {line-height: 1}' in ~/.hyper.js used to fix it a while back

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stan-stripe picture stan-stripe  Â·  3Comments

laur1s picture laur1s  Â·  3Comments

alejandrofloresm picture alejandrofloresm  Â·  3Comments

cooperpellaton picture cooperpellaton  Â·  3Comments

legomushroom picture legomushroom  Â·  3Comments