CSS for Themes

[SimonDanisch]

https://github.com/yurivish/Hyperscript.jl has pretty nice support for css.
We could profit from complex rules for cascading styles in plots, to make theming flexible.
What's needed for this to work is the ability, to take the Hyperscript css node, and implement something to apply it to a scene.

using Hyperscript
theme = css(".scene",
    fontSize=16px,
    backgroundColor=:red,
    css(".scatter", 
         markersize=14px
))
scene = Scene(theme)
scatter(rand(4))

We'll need to figure out if we want to support css attribute names, prefer them, or just use the ones we have in makie.
I'd say we should at least support the standard ones, to make things interop better & confuse people less.

[mkborregaard]

So javascript (which I guess means at least PlotlyJS in julia) uses css for plots - how does this idea relate to that? would it make sense to just use their definition?

[SimonDanisch]

I guess we will need to figure out how its used there... Do you have an example?

[SimonDanisch]

Hm either this feature is super hidden, my google skills left me, or PlotlyJS isn't using css for styling^^

[mkborregaard]

You're right, I just checked that as well.
A postdoc at our centre does all his viz in javascript and says it uses css - i've asked him for more info

[mkborregaard]

@spyrostheodoridis could you comment here? It would be really useful - we'd like to consider reimplementing theming with CSS at a group workshop in a few weeks.

[spyrostheodoridis]

CSS can only be used in combination with a markup language (HTML, XML, SVG etc.). In other words, if one wants to use the power and elegance of CSS, one has to render their graphics through a markup language. Plotly.js uses CSS behind the scenes. The user defines the styles in a css-like format (more like json I would say), and then these styles are being translated to css and attached in the final HTML document (since its web-browser based). So, i guess the first step is to figure out how Julia could use a a markup language for rendering graphics.

[mkborregaard]

OK, thanks a lot Spyros, that clarifies it. Our agenda here is somewhat different, we already have the rendering engine, so the question is simply whether we could co-opt the CSS format as the format to express theming. It sounds like that is somewhat orthogonal.

[mkborregaard]

The JSON format you describe is not too dissimilar, I think, from VGSpec objects in VegaLite https://www.queryverse.org/VegaLite.jl/stable/userguide/vega/#VGSpec-1

[asinghvi17]

I just took a look at Hyperscript. Unfortunately, it looks like we'll have to roll our own cascading algorithm in Attributes, possibly at the constructor level, because Hyperscript seems more geared towards emitting HTML output as text, and doesn't actually implement the cascading algorithm (at least from what I understood).

The CSS cascading algorithm is actually pretty simple for our usecase. If we continue with what we have now, with the Scene being able to encode a scatter Dict which is then picked up by the scatter constructor, then we would only need to implement a parent lookup to see whether the parent has a key which is missing from the default theme.

@SimonDanisch, would this tie in well with your Attributes refactor? I'm not too up to date on what the final goal for that now is...

[SimonDanisch]

Btw, one of my plans is to teach https://github.com/Algocircle/Cascadia.jl to find selectors in arbitrary trees, e.g. our Scene tree, or Hyperscripts CSS node tree... That should be the basis for this!
Then we can go through the Hyperscript css nodes, extract the selectors, search for the scenes/plots in the scene tree that match the selector and then we can apply the styles to those!

[ffreyer]

Can this be closed or is this still in consideration?

[SimonDanisch]

I think this can become a discussion!