izackp/webterm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve CSS variables in font-family before passing to Canvas

Browse Source 
The data-font-family attribute was set to 'var(--webterm-mono)' but Canvas 2D
context doesn't understand CSS variable syntax. Now we resolve the variable
using getComputedStyle before passing to ghostty-web Terminal.
This commit is contained in:
GitHub Copilot
2026-01-29 19:06:57 +00:00
parent 4620bd8364
commit 4420e77d6a
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webterm/static/js/terminal.js
+6 -6
View File
File diff suppressed because one or more lines are too long
src/webterm/static/js/terminal.ts
+17 -1
View File
@@ -314,7 +314,23 @@ function parseConfig(element: HTMLElement): TerminalConfig {
const config: TerminalConfig = {};
if (element.dataset.fontFamily) {
config.fontFamily = element.dataset.fontFamily;
let fontFamily = element.dataset.fontFamily;
// Resolve CSS variables - Canvas 2D context doesn't understand var(--name) syntax
if (fontFamily.startsWith("var(")) {
const varMatch = fontFamily.match(/var\(([^)]+)\)/);
if (varMatch) {
const varName = varMatch[1].trim();
const resolved = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
if (resolved) {
fontFamily = resolved;
console.log(`[webterm:parseConfig] Resolved CSS variable ${varName} to: "${fontFamily}"`);
} else {
console.warn(`[webterm:parseConfig] CSS variable ${varName} not found, using default font`);
fontFamily = DEFAULT_FONT_FAMILY;
}
}
}
config.fontFamily = fontFamily;
console.log(`[webterm:parseConfig] fontFamily: "${config.fontFamily}"`);
}
if (element.dataset.fontSize) {