Strikethrough text in widget?

Scriptable
1

Hi,

I’m building a calendar widget and would like to indicate cancelled events with strikethrough text.

Is this possible in Scriptable? I can’t find anything in the documentation for Font or WidgetText about formatting.

Thanks,
llui85

2

I don’t think there is. You may need use another indicator instead like an SFSymbol or maybe grayed-out text.

3

After an hour or so of experimentation, I’ve figured out a way to “fake” a strikethrough effect. You can create a linear gradient with a solid line as the background, create a new stack, add your text, and then apply the gradient to the stack background.

This method doesn’t work if the text wraps onto another line, but for my purposes it works well. Hopefully this (and underlines) can be implemented natively at some point!

Here’s a basic script to calculate the gradient automatically given a strike height:

"use strict"

let widget = new ListWidget();
	
let borderTopBG = new LinearGradient()
let c1 = new Color("#F00")
let transparent = new Color("#000000", 0)

let strikeHeight = 5
	
borderTopBG.colors = [
	transparent,
	transparent,
	c1,
	c1,
	transparent,
	transparent
]

borderTopBG.locations = [
	0,
	0.52 - (strikeHeight / 200),
	0.52 - (strikeHeight / 200),
	0.52 + (strikeHeight / 200),
	0.52 + (strikeHeight / 200),
	1
]

let stack = widget.addStack()
stack.setPadding(5, 5, 5, 5)
stack.backgroundGradient = borderTopBG

let text = stack.addText("Hello World!")
text.textColor = c1
text.font = Font.title1()

widget.presentLarge()

which shows this:

image
image1432×1398 58.8 KB

1 Like
4

If you wanted to use draw context you could place a line over the event information, the only trouble is it will involve a lot of coordinates to determine where each event would be placed.

I’m curious to see what your calendar which it will look like

5

Awesome! I was looking for this as well. Works superbly!

1 Like