experimental --cols CSS variable

CHANGELOG.md

@@ -2,6 +2,7 @@
 ### Features
 * add `id` option that allow to create same terminal using hot reload [#978](https://github.com/jcubic/jquery.terminal/issues/978)
 * allow using Object URLs in links [#982](https://github.com/jcubic/jquery.terminal/issues/982)
+* experimental `--cols` CSS variable
 ### Bugfix
 * fix `terminal::login()` when user already authenticated [#980](https://github.com/jcubic/jquery.terminal/issues/980)
 * improve mobile support

css/jquery.terminal-src.css

@@ -841,8 +841,13 @@ terminal .terminal-output > div {
         --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
         --terminal-font-size: calc(var(--size, 1) * (12px / var(--pixel-density, 1)));
         height: auto;
-        /* force size when user add --rows */
+        /* force size when user add --rows and --cols */
         height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px));
+        /*
+         * there is a bug in Chromium https://issues.chromium.org/issues/379430924
+         * it give wrong number of characters per line (off by one), it works fine in Firefox and Epiphany
+         */
+        width: calc((var(--cols) * 1ch) + (var(--padding, 10) * 2px) + (var(--terminal-scrollbar, 10) * 1px));
     }
     .terminal .terminal-output > :not(.raw) > div,
     .cmd div,

css/jquery.terminal.css

@@ -12,7 +12,7 @@
  * Copyright (c) 2011-2024 Jakub T. Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license
  *
- * Date: Thu, 14 Nov 2024 21:18:03 +0000
+ * Date: Sun, 17 Nov 2024 13:13:41 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -841,8 +841,13 @@ terminal .terminal-output > div {
         --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
         --terminal-font-size: calc(var(--size, 1) * (12px / var(--pixel-density, 1)));
         height: auto;
-        /* force size when user add --rows */
+        /* force size when user add --rows and --cols */
         height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px));
+        /*
+         * there is a bug in Chromium https://issues.chromium.org/issues/379430924
+         * it give wrong number of characters per line (off by one), it works fine in Firefox and Epiphany
+         */
+        width: calc((var(--cols) * 1ch) + (var(--padding, 10) * 2px) + (var(--terminal-scrollbar, 10) * 1px));
     }
     .terminal .terminal-output > :not(.raw) > div,
     .cmd div,

js/jquery.terminal-src.js

@@ -9681,6 +9681,13 @@
             return parseInt(style.getPropertyValue(prop), 10) || 0;
         }
         // ---------------------------------------------------------------------
+        function get_scrollbar_width() {
+            var width = filler.width();
+            var container_width = self.width();
+            var padding = get_padding();
+            return container_width - width - (padding.left + padding.right);
+        }
+        // ---------------------------------------------------------------------
         function get_padding() {
             var style = window.getComputedStyle(filler[0]);
             function padding(name) {
@@ -12050,6 +12057,9 @@
         self.addClass('terminal');
         var pixel_density = get_pixel_size();
         var char_size = get_char_size(self);
+        css(self[0], {
+            '--terminal-scrollbar': get_scrollbar_width()
+        });
         // this is needed when terminal have selector with --size that is not
         // bare .terminal so fake terminal will not get the proper size #602
         var need_char_size_recalculate = !terminal_ready(self);

js/jquery.terminal.js

@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Fri, 15 Nov 2024 23:08:49 +0000
+ * Date: Sun, 17 Nov 2024 13:13:40 +0000
  */
 /* global define, Map, BigInt */
 /* eslint-disable */
@@ -5345,7 +5345,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Fri, 15 Nov 2024 23:08:49 +0000',
+        date: 'Sun, 17 Nov 2024 13:13:40 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -9681,6 +9681,13 @@
             return parseInt(style.getPropertyValue(prop), 10) || 0;
         }
         // ---------------------------------------------------------------------
+        function get_scrollbar_width() {
+            var width = filler.width();
+            var container_width = self.width();
+            var padding = get_padding();
+            return container_width - width - (padding.left + padding.right);
+        }
+        // ---------------------------------------------------------------------
         function get_padding() {
             var style = window.getComputedStyle(filler[0]);
             function padding(name) {
@@ -12050,6 +12057,9 @@
         self.addClass('terminal');
         var pixel_density = get_pixel_size();
         var char_size = get_char_size(self);
+        css(self[0], {
+            '--terminal-scrollbar': get_scrollbar_width()
+        });
         // this is needed when terminal have selector with --size that is not
         // bare .terminal so fake terminal will not get the proper size #602
         var need_char_size_recalculate = !terminal_ready(self);