fix(web): reset letter-spacing on .xterm to fix right-side char clipping
The body has letter-spacing: -0.011em (~-0.176px at 16px) for typography refinement. xterm's DOM renderer measures cell width with that spacing inherited (~7.83px), then sets an inline letter-spacing override on .xterm-rows that cancels the body inherit, leaving glyphs to render at their natural ~8.00px width. The mismatch — measured 7.83px cells vs rendered 8.00px glyphs — accumulates as cols grow, eventually overflowing .xterm-rows > div and getting clipped by its overflow: hidden. At 124 cols the drift was ~21px, chopping ~3 chars off the right edge. Resetting letter-spacing on .xterm makes both phases agree and reduces the drift to sub-pixel rounding (~2px worst case at any reasonable cols).
This commit is contained in:
parent
994c9fc7e9
commit
ddf9732a3e
|
|
@ -479,6 +479,16 @@ a:hover {
|
|||
|
||||
/* ── xterm.js terminal viewport scrollbar — macOS-style auto-hide ──── */
|
||||
|
||||
/* Reset body's -0.011em letter-spacing inside the terminal subtree.
|
||||
xterm's DOM renderer measures cell width with the inherited spacing
|
||||
applied, but renders rows with an inline override that effectively
|
||||
cancels it. The mismatch causes glyphs to paint ~0.17px wider than
|
||||
the allocated cell, which accumulates over many cols and clips the
|
||||
rightmost chars under .xterm-rows > div { overflow: hidden }. */
|
||||
.xterm {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport {
|
||||
overflow-y: overlay !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue