CSS question regarding the html <summary> tag

[Hubert]

Hello,

I'm using the below customised <summary> html tag and would like to replace the unicode symbols (highlighted) with a SVG graphic that I've imported into my TiddlyWiki. I've pasted the code below in its entirety as I think it could be easier to test.

I've tried url("<<datauri "graphic.svg">>") no-repeat; but it doesn't seem to work with "content".

I would appreciate your hints.

details[open] summary ~ * {
    position: relative;
}

summary {
    display: block;
    cursor: pointer;
    outline: none;
}

summary::-webkit-details-marker {
    display: none;
    cursor: pointer;
}

summary::before {
    content: '\25B6';
    font-family: monospace;
    font-size: 100%;
    padding-right: 3px;
    vertical-align: bottom;
}

details[open] > summary::before {
    content: '\25BC';
    font-family: monospace;
    font-size: 125%;
    color: red;
    padding-right: 4.5px;
    vertical-align: bottom;
}

Regards,

Hubert

[Sycom]

I tried this once.

I had to base64 encode my svg. Not nice... Finished up by defining a macro. I will try to find it in my messy archives...

But I didn't ask here. So let's wait for a better solution ;-)

Regards

Sylvain
@sycom

[Magnus]

Maybe try background: url("data:image/svg+xml,%3Csvg%20xm...... that works for me

[Hubert]

Hi Magnus,

Thank you. Can you share a bit more about what "%3Csvg%20xm......" refers to?

Many thanks,
Hubert

[Sycom]

Hello Hubert,

I think Magnus is using an urlencoded version of the svg. You can have it with <$view tiddler="your_tiddler” format="urlencoded" />. See viewWidget documentation for a double check.

Cheers

Sylvain
@sycom

[Magnus]

Yes you are correct, I was lazy and just copied from my stylesheet in view mode. In edit mode it is 

.tc-tiddler-body h1:nth-child(1) {background: url("<<datauri "image/location.svg">>") no-repeat top left;}

Sorry for the confusion

[Hubert]

Thank you! It works. However, when I tried to reference one of the built-in icons, it didn't:

{background: url("<<datauri "$:/core/images/chevron-right">>") no-repeat top left;}

Is there anything else that I'd need to modify? Removing the datauri part had no effect.

Thanks in advance,

Hubert

[Sylvain Comte]

Hello,

Most of the core icons have no type defined (image/svg+xml) AND lacks a xmlns declaration (<svg xmlns="http://www.w3.org/2000/svg" ...)

guess it would fix this...

Sylvain

@sycom

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/YznqeuiZyqQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8ce30f75-5513-4121-b44c-2d490071731a%40googlegroups.com.

[Hubert]

Hi Sylvain,

Most of the core icons have no type defined (image/svg+xml) AND lacks a xmlns declaration (<svg xmlns="http://www.w3.org/2000/svg" ...)

guess it would fix this...

That's right, defining the type as image/svg+xml fixes this but introduces other issues (like being able to drag the svg element in some browsers, which is not always desireable/solveable through CSS) and that is why I would like to keep my svgs consistent with the way it's done in the core.

Thanks again for your hints.

Regards,

Hubert

To unsubscribe from this group and all its topics, send an email to tiddl...@googlegroups.com.

[Sylvain Comte]

Yes, it's always better to stick with core...

{background: url("data:image/svg+xml, <$view tiddler="$:/core/images/chevron-right" format="urlencoded"/>") no-repeat top left;} should work without redefining content-type,

BUT the xlmns declaration is mandatory... And is still missing :-/

cheers,

Sylvain
sylvai...@gmail.com
http://sylvain.comte.online.fr

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/438cd223-ff77-47c4-9a3d-d067a9065faf%40googlegroups.com.

[Eric Shulman]

On Monday, November 4, 2019 at 4:26:58 AM UTC-8, Hubert wrote:

Thank you! It works. However, when I tried to reference one of the built-in icons, it didn't:

{background: url("<<datauri "$:/core/images/chevron-right">>") no-repeat top left;}

* The double-quotes don't "nest".  Omit outer set of quotes, like this: 

{background: url(<<datauri "$:/core/images/chevron-right">>) no-repeat top left;}

* Make sure the "Type" field of your stylesheet tiddler is NOT set to "text/css" (Static CSS), which only permits pure CSS syntax.  To use TW syntax within your stylesheet, use either "text/vnd.tiddlywiki" or leave the Type field blank.

enjoy,

-e

Eric Shulman

[Jeremy Ruston]

Most of the core icons have no type defined (image/svg+xml) AND lacks a xmlns declaration (<svg xmlns="http://www.w3.org/2000/svg" …)

Just to be clear, this is because the core icons are designed to be used as SVG elements embedded in the HTML, rather than images. The primary reason is that it lets us style/colour the icons at the point of using them. There’s some discussion of the difference here:

https://tiddlywiki.com/#Using%20SVG

For CSS background images you’d need to use an SVG image. I don’t think there’s a straightforward way to convert the core images, you’d probably just need to do it manually.

Best wishes

Jeremy.

[Sylvain Comte]

Just to say there was no criticism of course. Just pure facts. While working on leaflet plugin, I've discovered why the image/svg+xml content-type was not defined: because this images ARE text/vnd-tiddlywiki for good reasons.

The reason why xml namespace is "missing" is not as clear for me. As far as I understand, for web applications with parser, it is generallly needed. See https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed

Is this also a feature?

In this particular case, it would solve the problem since 

> {background: url("data:image/svg+xml, <$view tiddler="$:/core/images/chevron-right" format="urlencoded"/>") no-repeat top left;} 

Works perfectly if xmlns is defined

Warm regards

Sylvain

@sycom

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/YznqeuiZyqQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7BBE975C-1844-4050-951C-DEE24A7129B8%40gmail.com.

[Hubert]

Thank you Jeremy, Sylvain, Magnus and Eric for your input.

For CSS background images you’d need to use an SVG image. I don’t think there’s a straightforward way to convert the core images, you’d probably just need to do it manually.

Having Jeremy's confirmation, I've settled on non-core SVG elements defined as images to make it work in my <summary> elements. I'm keeping all my other SVGs as non-images (the same way as in the core) for the very purpose of being able to flexibly modify them as needed (fill, hover effects, etc.), depending on application.

Thanks again.

Regards,

Hubert

To unsubscribe from this group and all its topics, send an email to tiddl...@googlegroups.com.