Support detailed ligatures and variants

Fixes #5284
This commit is contained in:
Daniel Imms
2025-01-08 06:26:15 -08:00
parent 9e206415b8
commit 408d0995dd
7 changed files with 77 additions and 32 deletions
+8 -5
View File
@@ -15,19 +15,22 @@ export interface ITerminalAddon {
export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
private readonly _fallbackLigatures: string[];
private readonly _fontFeatureSettings?: string;
private _terminal: Terminal | undefined;
private _characterJoinerId: number | undefined;
constructor(options?: Partial<ILigatureOptions>) {
// Source: calt set from https://github.com/be5invis/Iosevka?tab=readme-ov-file#ligations
this._fallbackLigatures = (options?.fallbackLigatures || [
'<--', '<---', '<<-', '<-', '->', '->>', '-->', '--->',
'<==', '<===', '<<=', '<=', '=>', '=>>', '==>', '===>', '>=', '>>=',
'<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '-------->',
'<~~', '<~', '~>', '~~>', '::', ':::', '==', '!=', '===', '!==',
':=', ':-', ':+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+:', '-:', '=:', ':>',
'++', '+++', '<!--', '<!---', '<***>'
'<->', '<-->', '<--->', '<---->', '<=>', '<==>', '<===>', '<====>', '::', ':::',
'<~~', '</', '</>', '/>', '~~>', '==', '!=', '/=', '~=', '<>', '===', '!==', '!===',
'<:', ':=', '*=', '*+', '<*', '<*>', '*>', '<|', '<|>', '|>', '+*', '=*', '=:', ':>',
'/*', '*/', '+++', '<!--', '<!---'
]).sort((a, b) => b.length - a.length);
this._fontFeatureSettings = options?.fontFeatureSettings;
}
public activate(terminal: Terminal): void {
@@ -36,7 +39,7 @@ export class LigaturesAddon implements ITerminalAddon , ILigaturesApi {
}
this._terminal = terminal;
this._characterJoinerId = enableLigatures(terminal, this._fallbackLigatures);
terminal.element.style.fontFeatureSettings = '"liga" on, "calt" on';
terminal.element.style.fontFeatureSettings = this._fontFeatureSettings ?? '"calt" on';
}
public dispose(): void {
+1
View File
@@ -5,4 +5,5 @@
export interface ILigatureOptions {
fallbackLigatures: string[];
fontFeatureSettings: string;
}
+21 -9
View File
@@ -23,7 +23,10 @@ declare module '@xterm/addon-ligatures' {
constructor(options?: Partial<ILigatureOptions>);
/**
* Activates the addon
* Activates the addon. Note that if webgl is also being used, that addon
* should be reactivated after ligatures is activated in order to apply
* {@link ILigatureOptions.fontFeatureSettings} to the texture atlas.
*
*
* @param terminal The terminal the addon is being loaded in.
*/
@@ -40,19 +43,28 @@ declare module '@xterm/addon-ligatures' {
*/
export interface ILigatureOptions {
/**
* Fallback ligatures to use when the font access API is either not supported by the browser or
* access is denied. The default set of ligatures is taken from Iosevka's default "calt"
* ligation set: https://typeof.net/Iosevka/
* Fallback ligatures to use when the font access API is either not
* supported by the browser or access is denied. The default set of
* ligatures is taken from Iosevka's default "calt" ligation set:
* https://typeof.net/Iosevka/
*
* ```
* <-- <--- <<- <- -> ->> --> --->
* <== <=== <<= <= => =>> ==> ===> >= >>=
* <-> <--> <---> <----> <=> <==> <===> <====> -------->
* <~~ <~ ~> ~~> :: ::: == != === !==
* := :- :+ <* <*> *> <| <|> |> +: -: =: :>
* ++ +++ <!-- <!--- <***>
* ```
* <-> <--> <---> <----> <=> <==> <===> <====> :: :::
* <~~ </ </> /> ~~> == != /= ~= <> === !== !===
* <: := *= *+ <* <*> *> <| <|> |> +* =* =: :>
* /* <close block comment> +++ <!-- <!---
*/
fallbackLigatures: string[]
/**
* The CSS `font-feature-settings` value to use for enabling ligatures. This
* also supports font variants for example with a value like
* `"calt" on, "ss03"`.
*
* The default value is `"calt" on`.
*/
fontFeatureSettings: string;
}
}
+2 -2
View File
@@ -238,9 +238,9 @@ export class GlyphRenderer extends Disposable {
// Get the glyph
if (chars && chars.length > 1) {
$glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false);
$glyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext, false, this._terminal.element);
} else {
$glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false);
$glyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext, false, this._terminal.element);
}
$leftCellPadding = Math.floor((this._dimensions.device.cell.width - this._dimensions.device.char.width) / 2);