add --char-width and --char-height CSS variables

Author: jcubic

css/jquery.terminal-src.css

@@ -845,7 +845,8 @@ terminal .terminal-output > div {
         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
+         * 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));
     }
@@ -989,6 +990,11 @@ terminal .terminal-output > div {
     inherits: true;
     initial-value: auto;
 }
+@property --cols {
+    syntax: '<number> | auto';
+    inherits: true;
+    initial-value: auto;
+}
 @supports (-ms-ime-align:auto) {
     .terminal h1::selection,
     .terminal h2::selection,

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: Sun, 17 Nov 2024 13:13:41 +0000
+ * Date: Mon, 18 Nov 2024 23:03:38 +0000
  */
 .terminal .terminal-output .format, .cmd .format,
 .cmd-prompt, .cmd-prompt div {
@@ -845,7 +845,8 @@ terminal .terminal-output > div {
         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
+         * 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));
     }
@@ -989,6 +990,11 @@ terminal .terminal-output > div {
     inherits: true;
     initial-value: auto;
 }
+@property --cols {
+    syntax: '<number> | auto';
+    inherits: true;
+    initial-value: auto;
+}
 @supports (-ms-ime-align:auto) {
     .terminal h1::selection,
     .terminal h2::selection,

css/jquery.terminal.min.css

@@ -12057,6 +12057,8 @@
         var pixel_density = get_pixel_size();
         var char_size = get_char_size(self);
         css(self[0], {
+            '--char-width': char_size.width,
+            '--char-height': char_size.height,
             '--terminal-scrollbar': get_scrollbar_width()
         });
         // this is needed when terminal have selector with --size that is not
@@ -12580,9 +12582,18 @@
             });
             function calculate_char_size() {
                 var width = char_size.width;
+                var height = char_size.height;
                 char_size = get_char_size(self);
+                var css_vars = {};
                 if (width !== char_size.width) {
                     command_line.option('charWidth', char_size.width).refresh();
+                    css_vars['--char-width'] = char_size.width;
+                }
+                if (height !== char_size.height) {
+                    css_vars['--char-height'] = char_size.height;
+                }
+                if (Object.keys(css_vars).length) {
+                    css(self[0], css_vars);
                 }
             }
             resize();

css/jquery.terminal.min.css.map

@@ -41,7 +41,7 @@
  *
  * broken image by Sophia Bai from the Noun Project (CC-BY)
  *
- * Date: Sun, 17 Nov 2024 13:32:31 +0000
+ * Date: Mon, 18 Nov 2024 23:03:37 +0000
  */
 /* global define, Map, BigInt */
 /* eslint-disable */
@@ -5345,7 +5345,7 @@
     // -------------------------------------------------------------------------
     $.terminal = {
         version: 'DEV',
-        date: 'Sun, 17 Nov 2024 13:32:31 +0000',
+        date: 'Mon, 18 Nov 2024 23:03:37 +0000',
         // colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
         color_names: [
             'transparent', 'currentcolor', 'black', 'silver', 'gray', 'white',
@@ -12057,6 +12057,8 @@
         var pixel_density = get_pixel_size();
         var char_size = get_char_size(self);
         css(self[0], {
+            '--char-width': char_size.width,
+            '--char-height': char_size.height,
             '--terminal-scrollbar': get_scrollbar_width()
         });
         // this is needed when terminal have selector with --size that is not
@@ -12580,9 +12582,18 @@
             });
             function calculate_char_size() {
                 var width = char_size.width;
+                var height = char_size.height;
                 char_size = get_char_size(self);
+                var css_vars = {};
                 if (width !== char_size.width) {
                     command_line.option('charWidth', char_size.width).refresh();
+                    css_vars['--char-width'] = char_size.width;
+                }
+                if (height !== char_size.height) {
+                    css_vars['--char-height'] = char_size.height;
+                }
+                if (Object.keys(css_vars).length) {
+                    css(self[0], css_vars);
                 }
             }
             resize();