Pikchr SVG images not rendering in JCEF browser

[pepijnve]

Observed vs. expected behavior

SVG images generated by pikchr do not seem to render correctly in the preview window. Instead of seeing the image, nothing seems to be rendered at all.

Steps to reproduce

Add the following snippet to your document.

[pikchr]
----
box "box"
----

Environment

Plugin Version: 0.40.7

IntelliJ Details: IntelliJ IDEA 2023.2.5 (Ultimate Edition) Build #IU-232.10227.8, built on November 9, 2023 Licensed to Cerris BVBA / Pepijn Van Eeckhoudt You have a perpetual fallback license for this version. Subscription is active until November 8, 2024. Runtime version: 17.0.9+7-b1000.46 aarch64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. macOS 14.1 GC: G1 Young Generation, G1 Old Generation Memory: 2048M Cores: 10 Metal Rendering is ON Registry: debugger.new.tool.window.layout=true ide.experimental.ui=true ide.images.show.chessboard=true

Non-Bundled Plugins: com.yanncebron.intellipikchr (0.3.4) org.intellij.plugins.hcl (232.8660.88) org.jetbrains.plugins.ruby (232.10203.2) org.strangeway.vaadin (232.8660.142) org.jetbrains.kotlin (232-1.9.21-release-633-IJ10072.27) PlantUML integration (7.3.0-IJ2023.2) org.asciidoctor.intellij.asciidoc (0.40.7) JProfiler (19.9.3) com.majera.intellij.codereview.gitlab (2023.5.0.232)

Kotlin: 232-1.9.21-release-633-IJ10072.27

[pepijnve]

While experimenting a bit further I was able to get the image to show up by adding a width attribute to the block (i.e. [pikchr, width=500px]).

[mojavelinux]

I think this comes down to whether the generated SVG defines its own width/height or not. If it does not, and no width is specified, the browser will not allocate it any dimensions in certain cases...it depends on how the stylesheet is configured.

Btw, the width value should be unitless to be portable. See https://docs.asciidoctor.org/asciidoc/latest/macros/image-size/#width-and-height-attributes

[pepijnve]

Could be. I just noticed that it was not visible in the preview, while it was visible when pressing the HTML button and then opening that in a browser (Safari). This was all with default styling settings.

[ahus1]

I had a look and it seems that pikchr doesn't offer binary downloads? I also tried to use Kroki instead, but that didn't show the problem you described.

Due to the difficulties to reproduce it, I ask you or someone else from the community to debug it or send a locally rendered HTML for me to have a look.

To open the developer tools for the embedded preview, "Help | Find Action... | Open Devtools Window for the current AsciiDoc Preview" - see also the user manual. Note that once you close the dev tools, it will try to close your IDE. Please up-vote IntelliJ issue listed in the docs to get this fixed.

Using the developer tools, you can inspect and edit the CSS as needed.

[pepijnve]

As @mojavelinux mentioned this is caused by a specific kind of SVG. I'm pretty sure we can reproduce the effect with just the output SVG file. I'll try to get an example for you.

[pepijnve]

Here's the output I get for box "Hello" passed to Kroki as pikchr/svg/eNpLyq9QUPJIzcnJVwIAFloDog==.

<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 112.32 76.32">
    <path d="M2,74L110,74L110,2L2,2Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
    <text x="56" y="38" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">Hello</text>
</svg>

If I include that SVG with a plain image block macro, I get the same result where the image is not rendered in the preview.

[ahus1]

I tried this using the SVG you provided using Windows, plus a snippet

image::test.svg[]

And the result is a image rendered with the full width of the preview:

Will try on another machine using Linux.

[ahus1]

Same results on Linux - preview shows. Can you give the developer console a try and have a look?

[pepijnve]

I get this on macOS FWIW. I'll check the logs.

[pepijnve]

I tried to reproduce just now. Put it in a plain asciidoc file and everything works correctly. Place the exact same content within the scope of an Antora component and it doesn't.

[ahus1]

Thank you for the Antora context, I can now reproduce it. As I am also able to reproduce it with a plain Antora setup, it seems to be the plugin's preview is doing a good job as it is displaying a correct preview :-)

If you are able to reproduce it with plain Antora and its default UI as well, I assume this discussion should continue in the Antora UI theme repo.

I was able to make it work once updated the CSS for the imageblock to remove display:-webkit-box;display:-ms-flexbox;display:flex; in the browser's developer tools - AFAIK those are expanded from a display:flex in the default Antora UI theme.

I am still a newbie to CSS, and I can't tell the intent for that setting.

[mojavelinux]

Place the exact same content within the scope of an Antora component and it doesn't.

That's because the CSS in the default UI is configured in such a way that every SVG must have a width specified (either on the img tag or in the svg) or else it assumes the width is 0.

[ahus1]

Ok, just fixed a typo in the last sentence of my previous comment.

Reading Dan's previous comment, I assume this issue can be closed as the AsciiDoc plugin behaves as expected by providing a true preview.

[pepijnve]

That's because the CSS in the default UI is configured in such a way that every SVG must have a width specified (either on the img tag or in the svg) or else it assumes the width is 0.

@mojavelinux is this fixable? If so, I'll log a followup issue on the Antora default UI?

[mojavelinux]

It's by design. If an SVG doesn't have a width, then it's not going to render. The width is important because if the CSS tries to apply a width, it won't be fluid.

However, if I'm missing something, and there is a way to have some sort of default width without overriding the width in the SVG, I'd be open to a suggestion.

[ahus1]

Closing this issue as the observed behavior is not related to the AsciiDoc plugin for IntelliJ. If another discussion spins off for example in the Antora UI default theme, please link it here.