content css prop

[Paril]

Wanted to ask about this before I opened any formal request about this. I'm in the process of fixing up some of the built-in controls to look nicer - this includes the scrollbars and <input type="range"> sliders. I use Material Symbols as a quick way to use a font to embed symbols in various places without needing to bake custom images out (and this allows me to do icons without needing SVG support & keeps them scalable).

One of the nicest CSS props for this sort of this is content: https://developer.mozilla.org/en-US/docs/Web/CSS/content
In the context of RmlUi, what I'm looking to do is something akin to this:

input.range sliderarrowdec, input.range sliderarrowinc
{
	width: 32dp;
	height: 32dp;
	font-family: icon-font;
	font-size: 32dp;
}
input.range sliderarrowdec
{
	content: '<';
}
input.range sliderarrowinc
{
	content: '>';
}

I know content isn't currently supported, but without having it being supported, is there currently something I could (ab)use in RmlUi that would give me similar behavior? My first thought was a decorator, ie something like:

input.range sliderarrowdec
{
	width: 32dp;
	height: 32dp;
	decorator: text('<' icon-font 24dp);
}

I don't know if there's enough stuff exposed that would allow me to efficiently do this, though, and it would probably make it harder to do things like setting font-effects that might be required depending on the styling we're aiming for. The nice thing about content is that it just acts like a text node, so all of the other properties "just work":tm:.

[mikke89]

Hey, I must have missed this post originally. I agree that the content property would be nice, and it has been on our radar before, see #399. It will require quite some effort to do properly, perhaps cherry picking from that PR would be enough for you?

But I quite like the idea of a decorator too. I am pretty sure we expose enough things. I suspect the simplest approach would be to interface directly with the font engine interface. That should be fairly straightforward for basic text rendering.

It could perhaps be useful to interface with ElementText to deal with font effect properties and other computed values, but I am not sure how easy that will be when it is not located in a document. Actually, I think it should be easier to parse the font properties and font effects directly from the decorator.

[Paril]

Neat, so it is possible to implement content as a decorator. Yeah, that might be the best approach until content is officially supported. I don't know if I have enough time to actually implement this in our project for now, but I might be able to give it a shot.

I read the linked discussion and I see it would also be technically predicated on ::before / ::after because "vanilla" CSS doesn't support it on regular DOM elements. Somehow I missed this fact, haha.

[mikke89]

My first thought was a decorator, ie something like:

input.range sliderarrowdec
{
	width: 32dp;
	height: 32dp;
	decorator: text('<' icon-font 24dp);
}

An update on this one. Just added the text decorator to support cases like this: 66d0b7c

decorator: text("Hello 🌎 world!" blue bottom right);

One difference from what was suggested is that it will inherit the font from its parent element instead of specifying it inline. See more here: https://mikke89.github.io/RmlUiDoc/pages/rcss/decorators/text.html

[Paril]

This should be okay. Thanks!