CODEWITHSUNDEEP
css
jcubic
jcubic

Reputation: 66470

Issue with inconsistency of line-height and font-size

I have odd behavior of monospace font in jQuery Terminal that I've just realized.

The css in question look like this:

.terminal .terminal-output > div > div, .cmd div {
    min-height: 14px;
    min-height: calc(var(--size, 1) * 14px);
}
.terminal,
.terminal-output > :not(.raw), 
.terminal-output > :not(.raw) span, 
.terminal-output > :not(.raw) a, 
.cmd, .cmd span {
    font-family: monospace;
    font-family: FreeMono, monospace;
    font-size: 12px;
    line-height: 15px;
}
.terminal,
.terminal-output > :not(.raw) span,
.terminal-output > :not(.raw) a, 
.terminal-output > :not(.raw) div,
.cmd, .cmd span, .cmd div {
    font-size: calc(var(--size, 1) * 12px);
    line-height: calc(var(--size, 1) * 14px);
}

and HTML look like this:

<div class="terminal">
  <div class="terminal-output">
    <div style="width:100%">
      <span data-text="...">
        Foo Bar_____
      </span>
    </div>
  </div>
</div>

the problem is that underscore is not visible because height of the span is 15px in Firefox but in Chrome is 14px.

Firefox/Linux

enter image description here

Chrome/Linux

enter image description here

Is this a bug in Firefox browser? What is the correct behavior? Is there a a way to fix this? Or do I need to use CSS hacks and make the font size 11px which seams to fix the issue in Firefox, but the ASCII art is smaller. Or maybe the font "monospace" is different in Firefox and Chrome. I'm using monospace because there was problem with font stacks on Android (maybe they fixed the issue, I think it was in Android 2.3 the project is old).

You can see the demo here https://codepen.io/jcubic/pen/MbVMwO it works the same even in debug mode outside of iframe.

What's weird is that if I change the size of the terminal

:root {
    --size: 1.4;
}

it works almost fine in both browsers (except that in Firefox letter "e" is not rendered properly, one underscore is missing, and I think that still the underline is thinner and part of it is cut off).

Upvotes: 0

Views: 812

Answers (1)

alotropico
alotropico

Reputation: 1994

You can just add: line-height: 1; in the css as such property doesn't need a unit.

Upvotes: 1

Related Questions