Skip to content

fix(ui): render workspace terminal with Canvas + CJK fonts #253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maxx-masa wants to merge 1 commit into
base: master
Choose a base branch
from
+28 −8
Open

fix(ui): render workspace terminal with Canvas + CJK fonts #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
},
"dependencies": {
"@vercel/analytics": "^2.0.1",
"@xterm/addon-canvas": "^0.7.0",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/addon-webgl": "^0.18.0",
Expand Down
23 changes: 15 additions & 8 deletions ui/src/components/workspace/Terminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { lazy, Suspense, useEffect, useRef, useState } from 'react';
import type { ReactElement } from 'react';

import { CanvasAddon } from '@xterm/addon-canvas';
import { FitAddon } from '@xterm/addon-fit';
import { WebLinksAddon } from '@xterm/addon-web-links';
import { WebglAddon } from '@xterm/addon-webgl';
import { Terminal as Xterm } from '@xterm/xterm';
import '@xterm/xterm/css/xterm.css';

Expand Down Expand Up @@ -112,7 +112,7 @@ export function TerminalView(props: TerminalViewProps): ReactElement {
const term = new Xterm({
theme: darkTheme,
fontFamily:
'ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "DejaVu Sans Mono", monospace',
'ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "DejaVu Sans Mono", "Noto Sans Mono CJK JP", "Noto Sans CJK JP", monospace',
fontSize: 13,
lineHeight: 1.2,
cursorBlink: true,
Expand All @@ -127,13 +127,20 @@ export function TerminalView(props: TerminalViewProps): ReactElement {
term.loadAddon(new WebLinksAddon());
term.open(container);

let webgl: WebglAddon | null = null;
// Canvas renderer (not WebGL). The WebGL glyph atlas renders any styled
// CJK cell it can't rasterize — notably italic Japanese, since Noto Sans
// Mono CJK JP has no italic face — as a solid black box. Canvas rasterizes
// each cell via 2D fillText, which falls back through the browser font
// stack and synthesizes obliques, so bold/italic Japanese renders
// correctly. It's far faster than the DOM renderer (which made input echo
// sluggish in heavy TUIs like the agent CLIs) while avoiding WebGL's
// missing-glyph boxes.
let canvas: CanvasAddon | null = null;
try {
webgl = new WebglAddon();
webgl.onContextLoss(() => webgl?.dispose());
term.loadAddon(webgl);
canvas = new CanvasAddon();
term.loadAddon(canvas);
} catch {
webgl = null;
canvas = null;
}

safeFit(fit);
Expand Down Expand Up @@ -257,7 +264,7 @@ export function TerminalView(props: TerminalViewProps): ReactElement {
} catch {
// ignore
}
webgl?.dispose();
canvas?.dispose();
term.dispose();
};
}, [wsId, sessionId, wsUrl]);
Expand Down