search

asciidoctor / asciidoctor-diagram

:left_right_arrow: Asciidoctor diagram extension, with support for AsciiToSVG, BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag), Ditaa, Erd, GraphViz, Mermaid, Msc, PlantUML, Shaape, SvgBob, Syntrax, UMLet, Vega, Vega-Lite and WaveDrom.
http://asciidoctor.org
MIT License
437 stars 106 forks source link

Syntrax diagrams SVG dimensions problem -- cropped diagrams #261

Closed inponomarev closed 3 years ago

inponomarev commented 4 years ago

Hello,

the way the SVG output of Syntrax is embedded into HTML is not working correctly in all browsers.

For example definition +++[syntrax,script,svg,opts=interactive]+++ turns into <svg ... width="468" height="271" > (see example here)

But diagrams appear to be cropped in IPhone's Safari and in print preview of Firefox, see screenshot below:

изображение

pepijnve commented 4 years ago

I did some quick checks and this seems to be caused by the CSS style that gets applied to get containing object. If I disable max-width: 100% for instance, then it seems to render correctly.

I'm not really a CSS expert I'm afraid so I'm not sure what the 'correct' fix is here.

mojavelinux commented 4 years ago

The max-width is important to prevent the object from overflowing the bounds. The problem here seems to be that we're hitting a browser bug, because the described behavior is not to spec.

You could try opts=inline instead of opts=interactive. See what that gives you.

pepijnve commented 4 years ago

@mojavelinux It wasn't clear to me what should actually happen until I read through https://css-tricks.com/scale-svg/. My conclusion from reading that is that we need to pick an option and massage the generated SVG accordingly. What's not clear yet is which sizing option we actually want.

mojavelinux commented 4 years ago

Generally speaking, we would want a viewBox w/ the preserveApectRatio setting.

viewBox="0 0 468 271" width="468" height="271" preserveAspectRatio="xMidYMid meet"

Without a viewBox, things go haywire.

pepijnve commented 3 years ago

@inponomarev I think this should be fixed in the latest release. Feel free to reopen this issue if the problem still occurs.