Make it easy to set fixed number of rows

[jcubic]

I have an idea for a new feature for jQuery Terminal

This just come out, the ASCII Star Wars demo show scrollbar because it has a wrong height.

It requires 14 lines to not show overflow.

It would be nice to have a way to set 14 rows that will adapt to the size of the terminal:

#term {
    --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
    height: calc((var(--terminal-line) * 14) + 20px);
}

--terminal-line rule taken from line-height on output line.

[jcubic]

Instead of fixed 14 we can use another CSS variable:

:root {
   --size: 1.2;
   --terminal-rows: 14;
}

.terminal {
    height: calc((var(--terminal-line) * var(--terminal-rows)) + 20px);
}

[jcubic]

And we can also parametrize the padding.

:root {
    --terminal-padding: 10px;
}

.terminal {
    height: calc((var(--terminal-line) * var(--terminal-rows)) + (var(--terminal-padding) * 2));
}

[jcubic]

--padding already exists.

Here is a demo:

https://codepen.io/jcubic/pen/PorzvVd?editors=0100

[jcubic]

Unfortunately, it's not possible to add --cols custom property because of the scrollbar.

This doesn't work:

width: calc((var(--cols) * 1ch) + (var(--padding, 10) * 2px)) !important;

[jcubic]

Example: https://codepen.io/jcubic/pen/ExBGKbV

[jcubic]

Added experimental --cols, the scrollbar width is calculated in JavaScript.

But there is a bug in a away Chromium is calculating of characters per line: Wrong calculation of ch units with scrollbar-gutter