How to style links

[maerzhase]

I am using default osc8 links. they are renderd with dashed line by default. I couldn't find any information on how to provide some default styles or customize the link rendering part. i would like to disable the underline alltogether :) would appreciate some help on this! thanks a lot!

[RahjIII]

I'm having a hard time with this out too. @maerzhase were you able to style your osc8 links? My users strongly dislike seeing the wavy underline when the link isn't hovered.

[jerch]

Styling of OSC 8 links for the normal output state (not hovering state) is not possible from outside, as its handling is deeply woven into the cell attribute handling:

xterm.js/src/common/buffer/AttributeData.ts

Lines 139 to 211 in e9c547c

	export class ExtendedAttrs implements IExtendedAttrs {
	private _ext: number = 0;
	public get ext(): number {
	if (this._urlId) {
	return (
	(this._ext & ~ExtFlags.UNDERLINE_STYLE) |
	(this.underlineStyle << 26)
	);
	}
	return this._ext;
	}
	public set ext(value: number) { this._ext = value; }
	public get underlineStyle(): UnderlineStyle {
	// Always return the URL style if it has one
	if (this._urlId) {
	return UnderlineStyle.DASHED;
	}
	return (this._ext & ExtFlags.UNDERLINE_STYLE) >> 26;
	}
	public set underlineStyle(value: UnderlineStyle) {
	this._ext &= ~ExtFlags.UNDERLINE_STYLE;
	this._ext |= (value << 26) & ExtFlags.UNDERLINE_STYLE;
	}
	public get underlineColor(): number {
	return this._ext & (Attributes.CM_MASK | Attributes.RGB_MASK);
	}
	public set underlineColor(value: number) {
	this._ext &= ~(Attributes.CM_MASK | Attributes.RGB_MASK);
	this._ext |= value & (Attributes.CM_MASK | Attributes.RGB_MASK);
	}
	private _urlId: number = 0;
	public get urlId(): number {
	return this._urlId;
	}
	public set urlId(value: number) {
	this._urlId = value;
	}
	public get underlineVariantOffset(): number {
	const val = (this._ext & ExtFlags.VARIANT_OFFSET) >> 29;
	if (val < 0) {
	return val ^ 0xFFFFFFF8;
	}
	return val;
	}
	public set underlineVariantOffset(value: number) {
	this._ext &= ~ExtFlags.VARIANT_OFFSET;
	this._ext |= (value << 29) & ExtFlags.VARIANT_OFFSET;
	}
	constructor(
	ext: number = 0,
	urlId: number = 0
	) {
	this._ext = ext;
	this._urlId = urlId;
	}
	public clone(): IExtendedAttrs {
	return new ExtendedAttrs(this._ext, this._urlId);
	}
	/**
	* Convenient method to indicate whether the object holds no additional information,
	* that needs to be persistant in the buffer.
	*/
	public isEmpty(): boolean {
	return this.underlineStyle === UnderlineStyle.NONE && this._urlId === 0;
	}
	}

It would be possible by reimplementing the OSC8 handler

xterm.js/src/common/InputHandler.ts

Line 2997 in e9c547c

public setHyperlink(data: string): boolean {

and

xterm.js/src/common/InputHandler.ts

Line 3015 in e9c547c

private _createHyperlink(params: string, uri: string): boolean {

and skipping the attribute changes there. But thats only possible via private methods, so untested and on your own risk.

@Tyriar Should we make the OCS8 link styling in non-hover state configurable? This would be a somewhat involved change, as we'd have to inject the config setting somehow in the attribute classes. Imho this is the first question in this regard, so demand seems low to me.

[Tyriar]

This seems like too big of a change with too little impact to me.

My users strongly dislike seeing the wavy underline when the link isn't hovered.

@RahjIII OSC8 links should be dotted, not wavy?

[RahjIII]

I mis-wrote. The OSC8 links appear to have dashed underlines, not wavy or dotted.

The thing about the OSC8 links is that they always have that dashed underline forced on them, even when they aren't being hovered. Resetting the underline mode through a SGR command (sent after the OSC8 link open) doesn't change it. Also, the OSC8 links get an additional solid underline when they are hovered.

On the one hand, the existing underlining looks kind of cool because the OSC8 underline color automatically matches the color of the linked text. However, it also makes OSC8 links look different from the regular addon-web-links inferred hyperlinks. The addon-web-links only get an underline when they are hovered, and have no forced styling otherwise.

The title of this discussion is a little misleading. I'm not really looking for "How to style links" so much as I'm looking for a way to shut the automatic dashed underline off, so that OSC8 links can appear in a way that is consistent with addon-web-links. If limiting the configuration of the automatic underlining to a single on/off switch rather than a more generic styling override would be easier to implement, that'd be sufficient for me.

I want to re-iterate- the automatic underlining of the OSC8 links does look really cool, and I appreciate that effort that went into getting them to look that way. In the general case, I think its great. But, when there is a screen full of clickable text, and the clickable context is already clear to the user, all of that forced automatic underlining gets distracting. A simple on/off for the non-hovered underlines would be great.

[Coffee-Nerd]

+1 for what RahjIII said, I'd like to see those capabilities as well.